/

HTML表格

HTML表格

了解HTML表格的基本工作原理。

在Web早期，表格是构建布局的重要组成部分。

后来，表格被CSS及其布局功能取代，如今我们有强大的工具，如CSS Flexbox和CSS Grid来构建布局。现在，表格只用于构建表格！

table标签

使用table标签定义表格：

1
2
3
<table>

</table>

在表格内定义数据。我们按行来思考，这意味着我们将行添加到表格中（而不是列）。我们在行内定义列。

行

使用tr标签添加行，这是我们可以将其添加到table元素中的唯一元素：

1
2
3
4
5
<table>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

这是一个有3行的表格。

第一行可以作为表头。

列标题

表头包含列的名称，通常以粗体字显示。

想想Excel / Google Sheets文档。顶部的A-B-C-D…表头。

我们使用th标签定义表头：

1
2
3
4
5
6
7
8
9
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr></tr>
 <tr></tr>
</table>

表格内容

使用td标签在其他tr元素内部定义表格的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td>Row 1 Column 1</td>
 <td>Row 1 Column 2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td>Row 2 Column 1</td>
 <td>Row 2 Column 2</td>
 <td>Row 2 Column 3</td>
 </tr>
</table>

这是浏览器渲染的效果，如果您没有添加任何CSS样式：

没有样式

添加以下CSS：

1
2
3
4
th, td {
 padding: 10px;
 border: 1px solid #333;
}

使表格看起来更像是一个正式的表格：

正式的表格

跨列和跨行

行可以跨越2个或多个列，使用colspan属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td colspan="2">Row 1 Columns 1-2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td colspan="3">Row 2 Columns 1-3</td>
 </tr>
</table>

跨列示例

或者它可以跨越2个或多个行，使用rowspan属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td>Row 2 Column 3</td>
 </tr>
</table>

跨行示例

行标题

之前我解释了如何使用th标签在表的第一个tr标签中添加列标题。

您可以将th标签作为非表的第一个tr中的第一个元素添加，以添加行标题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
 <tr>
 <th></th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <th>Row 1</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 <tr>
 <th>Row 2</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
</table>

行标题

更多标签用于组织表格

您可以在表格中添加3个更多标签，使其更有组织。

在使用大型表格时，这样做效果更好。而且还需要正确地定义一个表头和一个表尾。

这些标签是

  • thead
  • tbody
  • tfoot

它们用于包装tr标签，以清楚地定义表的不同部分。以下是示例用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
 <thead>
 <tr>
 <th></th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>Row 1</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 <tr>
 <th>Row 2</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td>Footer of Col 1</td>
 <td>Footer of Col 2</td>
 </tr>
 </tfoot>
</table>

thead和tfoot

表格标题

表格应该有一个描述其内容的caption标签。该标签应该放在打开的table标签之后：

<table>
 <caption>Dogs age</caption>
 <tr>
 <th>Dog</th>
 <th>Age</th>
 </tr>
 <tr>
 <td>Roger</td>
 <td>7</td>
 </tr>
</table>