表格标签
标签 | 作用 |
---|---|
< table > | 定义表格 |
< th > | 定义表格的表头 |
< tr > | 定义表格的行 |
< td > | 定义表格单元 |
< caption > | 定义表格标题 |
< colgroup > | 定义表格列的组 |
< col > | 定义用于表格列的属性 |
< thead > | 定义表格的页眉 |
< tbody > | 定义表格的主体 |
< tfoot > | 定义表格的页脚 |
table标签
在 HTML5 中,table标签中仅支持 “border” 属性,并且只允许使用值 “1” 或 “”。
属性 | 值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x) / #xxxxxx / colorname | 规定表格的背景颜色。 |
border | 1 / “” | 规定表格单元是否拥有边框。 |
cellpadding | pixels | 规定单元边沿与其内容之间的空白。 |
cellspacing | pixels | 规定单元格之间的空白。 |
frame | void、above、below、hsides、lhs、rhs、vsides、box、border | 规定外侧边框的哪个部分是可见的。 |
rules | none、groups、rows、cols、all | 规定内侧边框的哪个部分是可见的。 |
summary | text | 规定表格的摘要。 |
width | pixels | 规定表格的宽度。 |
height | pixels | 规定表格的高度。 |
合并单元格
- 跨行合并:rowspan
- 跨列合并:colspan
实例
若3×3的表格合并单元格实现下图:
实现代码:
<table width="200" height="100" cellspacing="0">
<!-- 第一行 -->
<tr>
<td></td>
<td colspan="2"></td> <!-- 合并第一行的第2、3个单元格 -->
</tr>
<!-- 第二行 -->
<tr>
<td rowspan="2"></td> <!--合并第二三行的第一个单元格 -->
<td></td>
<td></td>
</tr>
<!-- 第三行 -->
<tr>
<!-- 注意这里只有两个td标签 -->
<td></td>
<td></td>
</tr>
</table>