HTML5：表格基础知识

目录

表格的基本标签

表格中的单元格样式

单元格整体样式

某个单元格的样式

表格标签的基本属性

外边框线样式属性frame

内部边框样式属性rules

单元格合并

---

表格的基本标签

        HTML表格由table标签以及一个或多个tr、th或td标签组成：        

• table标签：定义一个表格
• caption标签：定义表格标题，嵌套在<table></table>中
• tr标签：定义表格中的一行，嵌套在<table></table>中
• th标签：定义表格中的表头单元格，嵌套在<tr></tr>中
• td标签：定义表格中的数据单元格，嵌套在<tr></tr>中

表格中的单元格样式

        表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。

单元格整体样式

        单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

        cellspacing属性用于设置单元格之间的间隙，取值为某一数值。

        cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙，也称为内边距，取值为某一数值。

某个单元格的样式

        可在对应的th或td标签中设置单元格的属性。

表格标签的基本属性

table 标签的基本属性：

 tr 标签的基本属性：

th 和td 标签的基本属性：

外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

• above：显示上边框
• below：显示下边框
• hsides：显示上下边框
• vsides：显示左右边框
• lhs：显示左边框
• rhs：显示右边框
• border：显示上下左右边框
• void：不显示边框

 例如，如果表格的外边框只需显示上边框，属性设置如下： <table frame=above>

内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

• all：显示所有内部边框
• none：不显示内部边框
• rows：仅显示行边框
• cols：仅显示列边框
• groups：显示介于行组和列组间边框

属性设置如下： <table frame=above rules=cols> 

单元格合并

 1、水平方向单元格的合并

        需要将水平方向的单元格合并时，可在<th>或<td>标记中添加colspan属性，属性的取值即为合并的单元格数目。

示例如下：

1. <tr>
2. <th>姓名</th>
3. <th colspan="4">签到</th>
4. <th>备注</th>
5. </tr>

 2、垂直方向单元格的合并

        需要将垂直方向的单元格合并时，可在<th>或<td>标记中添加rowspan属性，属性的取值即为合并的单元格数目。

用法示例：

1. <tr>
2. <td rowspan="2">领导讲话 </td>
3. <td>大会主题报告</td>
4. <td>分会专题报告</td>
5. <td rowspan="2">总结报告</td>
6. </tr>
7. <tr>
8. <td>专家报告</td>
9. <td>分组讨论</td>
10. </tr>