HTML 表格

HTML 表格允许 web 开发人员将数据排列成行和列。

HTML 表格

表格由 <table> 标签来定义。

每个表格均有若干行，由 <tr> 标签定义

每个表头由 <th> 标签定义。

每行被分割为若干单元格，由 <td> 标签定义。

HTML 表格 - 边框

要向表中添加边框，请使用 CSS border 属性：

HTML 表格 - 边框折叠

设置表格边框是折叠为单一边框还是分开的，使用 CSS border-collapse 属性：

HTML 表格 - 填充

填充指定单元格内容与其边框之间的间距。

如果不指定填充，则将显示不带填充的表格单元格。

要设置填充，请使用 CSS padding 属性：

HTML 表格 - 左对齐标题

默认情况下，表格标题为粗体且居中。

要左对齐表格标题，请使用 CSS text-align 属性：

HTML 表格 - 边框间距

边框间距指定单元格之间的间距。

要设置表格的边框间距，请使用 CSS border-spacing 属性：

HTML 表格 - 跨多列的单元格

要使单元格跨越多个列，请使用 colspan 属性：

HTML 表格 - 跨多行的单元格

要使单元格跨多行，请使用 rowspan 属性：

HTML 表格 - 标题

要向表中添加标题，请使用 <caption> 标签:

表格的特殊样式

要为一个特定表定义特殊样式，请向表中添加 id 属性：

本章小结

• 使用 HTML <table> 元素定义表
• 使用 HTML <tr> 元素定义表行
• 使用 HTML <td> 元素定义表数据
• 使用 HTML <th> 元素定义表格标题
• 使用 HTML <caption> 元素定义表格标题
• 使用 CSS border 属性定义边框
• 使用 CSS border-collapse 属性折叠单元格边框
• 使用 CSS padding 属性向单元格添加填充
• 使用 CSS text-align 属性对齐单元格文本
• 使用 CSS border-spacing 属性设置单元格之间的间距
• 使用 colspan 属性使单元格跨多个列
• 使用 rowspan 属性使单元格跨多行
• 使用 id 属性唯一地定义一个表

HTML 实验

HTML Table 标签