跳到主要内容

添加标题

使用 caption 为表格添加标题

添加表头

<th> 标签的工作方式与 <td> 标签非常相似,只不过 <th> 指示单元格是表格标题的一部分。大多数 Web 浏览器都自动把 <th> 单元格中的文本呈现为居中和粗体样式。

为表格添加结构

在创建简单的表格时,可以利用另外 3 个有用但是并非必需的与表格相关的标签。

  • <thead> :包装这个元素中的标头行,给组添加更多的含义,还允许这些标头行跨所有页面打印出来(如果表格足够长的话)。然后可以编排 <thead> 元素(而不是单个 <th> 单元格)的样式
  • <tbody> :包装这个元素中构成这个表格的"主体"的行(除标头和脚注行以外的所有行),给组添加更多的含义,然后还可以把 <tbody> 元素作为一个整体来编排样式,而不是编排各个 <td>单元格的样式
  • <tfoot> :与 <thead> 元素非常相似,使用它包装这个元素中的脚注行(如果具有任何脚注行的话),给组添加更多的含义,并将其作为一个整体编排样式。脚注行的一个示例可能是列中展示的数据之和,比如财务总计

表格列分组

使用 col 或 colgroup 元素进行分组。主要作用是为表格一列或多列定义样式。

span 是 colgroup 和 col 的专用属性,规定列组应该横跨的列数,取值为正值。

使用表格标签属性格式化表格

  • 表格不设置宽高时,表格大小由单元格内容撑开
  • 表格设置宽高以后,单元格会自动分配大小
  • 给单元格设置高度,所属行高度都会改变;给单元格设置宽度,所属列宽度都会改变
  • 单元格中的内容默认垂直居中显示
  • 表头单元格中的内容默认加粗并垂直居中显示
  • 表格具有默认样式,使用时需要根据实际情况来修改(重置)默认样式,使用了 cellpadding 和 cellspacing 来重置单元格的间距和边距的默认样式