本节将介绍table和td的标签属性。
设置表格属性
表格标签包含大量属性，其中大部分属性都可以使用CSS属性代替使用，也有几个专用属性无法使用CSS实现。HTML5支持的<table>标签属性说明如表1所示。
表1 HTML5支持的<table>标签属性
| 属性 | 说明 |
|---|---|
| border | 定义表格边框，值为整数，单位为像素。当值为0时，表示好隐藏表格边框线。功能类似CSS中的border属性，但是没有CSS提供的边框属性强大 |
| cellpadding | 定义数据表单元格的补白。功能类似CSS中的padding属性，但是功能比较弱 |
| cellspacing | 定义数据表单元格的边界。功能类似CSS中的margin属性，但是功能比较弱 |
| width | 定义数据表的宽度。功能类似CSS中的width属性 |
| frame | 设置数据表的外边框线显示，实际上它是对border属性的功能扩展。 取值包括void（不显示任一边框线）、above（顶端边框线）、below（底部边框线）、hsides（顶部和底部边框线）、lhs（左边框线）、rhs（右边框线）、vsides（左和右边的框线）、box（所有四周的边框线）、border（所有四周的边框线） |
| rules | 设置数据表的内边线显示，实际上它是对border属性的功能扩展。 取值包括none（禁止显示内边线）、groups（仅显示分组内边线）、rows（显示每行的水平线）、cols（显示每列的垂直线）、all（显示所有行和列的内边线） |
| summary | 定义表格的摘要，没有CSS对应属性 |
rules和frame是两个特殊的表格样式属性，用于定义表格的各个内、外边框线是否显示。由于使用CSS的border属性可以实现相同的效果，所以不建议用户选用。这两个属性的取值可以参考上表说明。
【示例】下面示例借助表格标签的frame和rules属性定义表格以单行线的形式进行显示。
<table border="1" frame="hsides" rules="rows" width="100%"> <caption>frame属性取值说明</caption> <tr><th>值</th><th>说明</th></tr> <tr><td>void</td><td>不显示外侧边框。</td></tr> <tr><td>above</td><td>显示上部的外侧边框。</td></tr> <tr><td>below</td><td>显示下部的外侧边框。</td> </tr> <tr><td>hsides</td><td>显示上部和下部的外侧边框。</td></tr> <tr><td>vsides</td><td>显示左边和右边的外侧边框。</td></tr> <tr><td>lhs</td><td>显示左边的外侧边框。</td></tr> <tr><td>rhs</td><td>显示右边的外侧边框。</td></tr> <tr><td>box</td> <td>在所有四个边上显示外侧边框。</td></tr> <tr><td>border</td><td>在所有四个边上显示外侧边框。</td></tr> </table>
上面示例通过frame属性定义表格仅显示上下框线，使用rules属性定义表格仅显示水平内边线，从而设计出单行线数据表格效果。在使用frame和rules属性时，同时定义border属性，指定数据表显示边框线。在浏览器中预览，则显示效果如图1所示。
图1 定义单线表格样式
cellpadding属性用于定义单元格边沿与其内容之间的空白，cellspacing 属性定义单元格之间的空间。这两个属性的取值单位为像素或者百分比。
【示例】下面示例设计井字形状的表格。
<table border="1" frame="void" cellpadding="6" cellspacing="16"> <caption>rules属性取值说明</caption> <tr><th>值</th><th>说明</th></tr> <tr><td>none</td><td>没有线条。</td></tr> <tr><td>groups</td><td>位于行组和列组之间的线条。</td></tr> <tr><td>rows</td><td>位于行之间的线条。</td></tr> <tr><td>cols</td><td>位于列之间的线条。</td></tr> <tr><td>all</td><td>位于行和列之间的线条。</td></tr> </table>
上面示例通过frame属性隐藏表格外框，然后使用cellpadding属性定义单元格内容的边距为6像素，单元格之间的间距为16像素，则在浏览器中预览效果如图2所示。
图2 定义井字表格样式
【提示】
cellpadding属性定义的效果，可以使用CSS的padding样式属性代替，建议不要使用cellpadding属性。
设置单元格属性
单元格标签（<td>和<th>）包含大量属性，其中大部分属性都可以使用CSS属性代替使用，也有几个专用属性无法使用CSS实现。HTML5支持的<td>和<th>标签属性说明如表2所示。
表2 HTML5支持的<td>和<th>标签属性
| 属性 | 说明 |
|---|---|
| abbr | 定义单元格中内容的缩写版本。 |
| align | 定义单元格内容的水平对齐方式。取值包括：right（右对齐）、left（左对齐）、center（居中对齐）、justify（两端对齐）和char（对准指定字符）。功能类似CSS中的text-align属性，建议使用CSS完成设计 |
| axis | 对单元进行分类。取值为一个类名。 |
| char | 定义根据哪个字符来进行内容的对齐。 |
| charoff | 定义对齐字符的偏移量。 |
| colspan | 定义单元格可横跨的列数。 |
| headers | 定义与单元格相关的表头。 |
| rowspan | 定义单元格可横跨的行数。 |
| scope | 定义将表头数据与单元格数据相关联的方法。取值包括：col（列的表头）、colgroup（列组的表头）、row（行的表头）、rowgroup（行组的表头） |
| valign | 定义单元格内容的垂直排列方式。取值包括：top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）、baseline（基线对齐）。功能类似CSS中的vertical-align属性，建议使用CSS完成设计 |
colspan和rowspan是两个重要的单元格属性，分别用来定义单元格可跨列或跨行显示。取值为正整数，如果取值为0时，则表示浏览器横跨到列组的最后一列，或者行组的最后一行。
【示例】下面示例使用colspan=5属性，定义单元格跨列显示，效果如图3所示。
<table border=1> <tr><th align=center colspan=5>课程表</th></tr> <tr><th>星期一</th><th>星期二</th> <th>星期三</th><th>星期四</th><th>星期五</th></tr> <tr><td align=center colspan=5>上午</td> </tr> <tr><td>语文</td><td>物理</td> <td>数学</td> <td>语文</td><td>美术</td></tr> <tr><td>数学</td><td>语文</td><td>体育</td> <td>英语</td><td>音乐</td></tr> <tr><td>语文</td> <td>体育</td><td>数学</td><td>英语</td><td>地理</td></tr> <tr><td>地理</td><td>化学</td><td>语文</td> <td>语文</td><td>美术</td></tr> <tr><td align=center colspan=5>下午</td></tr> <tr><td>作文</td><td>语文</td><td>数学</td><td>体育</td><td>化学</td></tr> <tr> <td>生物</td><td>语文</td><td>物理</td><td>自修</td><td>自修</td></tr> </table>
图3 定义单元格跨列显示