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教程: