HTML 中的表格

1. 元素 <table>

HTML 提供了一種方便的方法，用表格的形式來結構化表示數據。表格幫助我們將資訊組織成多行和多列，這對於表示數據、時間表、價目表或其他結構化數據集非常有用。 讓我們來了解一下用於建立表格的基本標籤：<table>、<tr>、 <td> 和 <th>。

標籤 <table> 是整個表格的容器。它用來標示表格的開始和結束，並包含與表格相關的其他所有標籤。

使用標籤 <table> 建立表格的範例：

<table>
  <!-- 表格的行與儲存格位於這裡 -->
</table>

標籤 <table> 可以額外使用 border 屬性進行設計，為表格設定邊框：

<table border="1">
  <tr>
    <td>範例儲存格</td>
  </tr>
</table>

在這裡，屬性 border="1" 為表格及其儲存格添加了一個邊框，使其變得清晰可見。

2. 元素 <tr>

標籤 <tr> 表示表格的一行 (table row)。每一行表格必須位於 <tr> 標籤內，該標籤本身放置在 <table> 標籤內。

範例：

<table border="1">
  <tr>
    <td>儲存格 1</td>
    <td>儲存格 2</td>
  </tr>
  <tr>
    <td>儲存格 3</td>
    <td>儲存格 4</td>
  </tr>
</table>

在此範例中，表格由兩行組成。每行包含兩個儲存格。

3. 元素 <td>

標籤 <td> (table data) 用於建立表格中的資料儲存格。這些儲存格可以包含文字、圖片或其他 HTML 內容。

範例使用 <td>：

<table border="1">
  <tr>
    <td>儲存格 1</td>
    <td>儲存格 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>儲存格 1</td>
    <td>儲存格 2</td>
  </tr>
</table>

<td> 儲存格是表格的基礎內容，位於 <tr> 標籤內。

4. 元素 <th>

標籤 <th> (table header) 用於建立表頭儲存格。使用 <th> 創建的儲存格預設以粗體字體出現，並且置中對齊。這對於表示列標題或行標題很有用。

包含表頭的表格範例：

    
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>安娜</td>
    <td>25</td>
  </tr>
  <tr>
    <td>伊萬</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>安娜</td>
    <td>25</td>
  </tr>
  <tr>
    <td>伊萬</td>
    <td>30</td>
</tr>
<table border="1">
    
  

在此示例中，<th> 用於表示標題「姓名」和「年齡」，這使用戶能快速了解每列數據的含義。