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