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表格文档。顶端A-B-C-D...标头。

Column headers

我们使用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样式，这就是浏览器呈现它的方式：

No styling

添加此CSS：

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

使该表看起来更像一个适当的表：

A proper table

跨栏和行

一行可以决定使用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>

A colspan example

或者，它可以使用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>

A rowspan example

行标题

在我解释如何使用列标题之前，请使用th在第一个标签内tr表格的标签。

您可以添加一个th标记为a中的第一个元素tr那不是第一个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>

Row headings

更多标签来组织表格

您可以在表格中再添加3个标签，以使其更有条理。

使用大表时最好。并正确定义页眉和页脚。

这些标签是

  • thead
  • tbody
  • tfoot

他们把tr标签以清楚地定义表格的不同部分。这是一个示例用法：

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

免费下载我的HTML手册


更多HTML教程：


在线技术百科！