HTML 表格表头

HTML 表格可以为每列或每行设置表头，也可以为多列/多行设置表头。

EMIL	TOBIAS	LINUS

8:00
9:00
10:00
11:00
12:00
13:00

	MON	TUE	WED	THU	FRI
8:00
9:00
10:00
11:00
12:00

DECEMBER

HTML 表格表头

表格表头使用 th 元素定义。每个 th 元素代表一个表格单元格。

实例

<table>
  <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>

亲自试一试

垂直表格表头

要将第一列用作表格表头，请将每行的第一个单元格定义为 <th> 元素：

实例

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

亲自试一试

对齐表格表头

默认情况下，表格表头是粗体且居中的：

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

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

实例

th {
  text-align: left;
}

亲自试一试

跨多列表头

您可以创建一个横跨两列或更多列的表头。

Name		Age
Jill	Smith	50
Eve	Jackson	94

为此，请在 <th> 元素上使用 colspan 属性：

实例

<table>
  <tr>
    <th colspan="2">Name</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>

亲自试一试

您将在表格 colspan 和 rowspan 章节中学习更多关于 colspan 和 rowspan 的知识。

表格标题

您可以添加一个标题，作为整个表格的标题。

Monthly savings
Month	Savings
January	$100
February	$50

要向表格添加标题，请使用 <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> 标签之后插入。