HTML表格

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

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

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

`table`标签

使用table标签定义表格：

<table>

</table>

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

行

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

<table>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

这是一个有3行的表格。

第一行可以作为表头。

列标题

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

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

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

<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr></tr>
 <tr></tr>
</table>

表格内容

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

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

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

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

正式的表格

跨列和跨行

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

<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属性：

<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中的第一个元素添加，以添加行标题：

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

行标题

表格标题

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

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

table标签#

行#

列标题#

表格内容#

跨列和跨行#

行标题#

更多标签用于组织表格#

表格标题#

`table`标签

行

列标题

表格内容

跨列和跨行

行标题

更多标签用于组织表格

表格标题