HTML 表格
HTML 表格允許 Web 開發者將資料排列成行和列。
示例
Company(公司) | 聯絡 | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | 加拿大 |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
定義一個 HTML 表格
HTML 表格由行中的單元格和列組成。
示例
一個簡單的 HTML 表格
<table>
<tr>
<th>公司</th>
<th>聯絡人</th>
<th>國家</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
自己動手試一試 »
表格單元格
每個表格單元格由 <td>
和 </td>
標籤定義。
td
代表表格資料 (table data)。
介於 <td>
和 </td>
之間的所有內容是表格單元格的內容。
注意: 表格單元格可以包含各種 HTML 元素:文字、圖片、列表、連結、其他表格等。
表格行
每一行表格都以 <tr>
開始,以 </tr>
結束。
tr
代表表格行 (table row)。
示例
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
自己動手試一試 »
您可以在一個表格中包含任意多行;只需確保每一行的單元格數量相同。
注意: 有時一行可以比另一行少或多單元格。您將在後面的章節中學習相關知識。
表格標題
有時您希望您的單元格是表格的標題單元格。在這種情況下,請使用 <th>
標籤而不是 <td>
標籤。
th
代表表格標題 (table header)。
示例
將第一行設為表格標題單元格
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
自己動手試一試 »
預設情況下,<th>
元素中的文字是粗體且居中的,但您可以使用 CSS 更改它。
HTML 表格標籤
標籤 | 描述 |
---|---|
<table> | 定義表格 |
<th> | 定義表格中的標題單元格 |
<tr> | 定義表格中的一行 |
<td> | 定義表格中的一個單元格 |
<caption> | 定義表格標題 |
<colgroup> | 為表格中的一個或多個列指定組,用於格式化 |
<col> | 在 <colgroup> 元素中為每列指定列屬性 |
<thead> | 對錶格中的標題內容進行分組 |
<tbody> | 對錶格中的主體內容進行分組 |
<tfoot> | 對錶格中的頁尾內容進行分組 |
有關所有可用 HTML 標籤的完整列表,請訪問我們的 HTML 標籤參考。
影片:HTML 表格

