HTML 表格

HTML 表格对展现大量数据很有帮助，允许 Web 开发人员将数据排列成行和列。

HTML 表格对展现大量数据很有帮助，允许 Web 开发人员将数据排列成行和列。

HTML 中 <table> 标签定义了一个 HTML 表格。表格中的每一行用 <tr> 标签定义。表头中的单元格用 <th> 标签定义。数据单元格用 <td> 标签定义  。

默认情况下， <th> 元素中的文本是粗体且居中的， <td> 元素中的文本是常规且左对齐的。

一个简单的 HTML 表格：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

! 注： <td> 元素是一个数据单元格，也是数据容器，可以包含各种 HTML 元素（比如：文本、图像、列表、其他表格等）。

HTML 表格边框

要为表格添加边框，请使用 CSS border 属性：

table,
th,
td  {
  border: 1px solid black;
}

上面的 css 为表格及其中单元格都定义了宽度 1 像素的黑色的实线边框。

HTML 表格边框重叠

要让所有相邻的边框重叠成一个边框，使用 CSS 的 border-collapse  属性：

table,
th,
td  {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML 表格 - 单元格内边距

单元格内边距指定单元格内容与其边框之间的空间，单元格默认没有内边距。

要设置单元格内边距，使用 CSS 的 padding 属性：

th,
td  {
  padding: 15px;
}

HTML 表格 - 左对齐标题

默认情况下，表格标题为粗体且居中，要表格标题问题左对齐，使用 CSS 的 text-align 属性：

th {
  text-align: left;
}

HTML 表格 - 添加边框间距

边框间距指定单元格之间的间距，要设置表格的边框间距，使用 CSS 的 border-spacing 属性：

table  {
  border-spacing: 5px;
}

!!! 注意： 如果表格设置了边框重叠 border-collapse: collapse;， 边框间距 border-spacing 不生效。

HTML 表格 - 跨列合并单元格

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

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML 表格 - 跨行合并单元格

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

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML 表格 - 添加标题

要为表格添加标题，使用 <caption> 标签：

<table style="width:100%">
  <caption>
    Monthly savings
  </caption>
    
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

! 注： <caption>标签必须排在 <table> 元素中的第一位。

总结

  • 使用 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 属性使单元格跨行合并单元格

HTML 表格标签

| 标签 | 说明 | | <table> | 定义表格 | | <tr> | 定义表格行 | | <th> | 定义表格标题单元格 | | <td> | 定义表格数据单元格 | | <caption> | 定义表格标题 | | <colgroup> | 定义一组列以设定格式 | | <col> | 定义 <colgroup> 中的一列 | | <thead> | 定义表头 | | <tbody> | 定义表格数据体 | | <tfoot> | 定义表格底部内容 |

如需所有可用 HTML 标签的完整列表，请访问 HTML 标签参考。

HTML 图像 HTML 列表