HTML 表格元素 <table> | 梧所不學

在網頁開發中，表格是一個相當實用的元素，不管是要呈現產品清單、學校課表，或是任何需要規則排列的資料，都可以透過 HTML 表格來完成，今天就來介紹表格的基本結構與使用方法。

基本結構

HTML 表格，就像一張棋盤，由行（row）和列（column）構成。而表頭則能讓表格更具意義，它能夠清楚標示每一行或列的內容，幫助你快速理解表格所呈現的資訊。以下是表格所使用的標籤與屬性:

1. <table> 標籤：宣告一個表格的開始與結束。
2. <tr> 標籤：定義表格中的一行。
3. <th> 標籤：定義行中的一個表頭儲存格。
4. <td> 標籤：定義行中的一個資料儲存格。
5. border 屬性：設定表格邊框的寬度。
6. cellpadding 屬性：設定儲存格內容與邊框的內邊距。
7. cellspacing 屬性：設定儲存格之間的間距。

<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <th>產品名稱</th>
    <th>價格 (元)</th>
  </tr>
  <tr>
    <td>筆記本</td>
    <td>50</td>
  </tr>
  <tr>
    <td>鉛筆</td>
    <td>10</td>
  </tr>
  <tr>
    <td>橡皮擦</td>
    <td>5</td>
  </tr>
</table>

合併儲存格

有時候我們需要將儲存格進行合併，這時就要用到 rowspan 和 colspan 屬性。

1. rowspan：設定儲存格進行縱向合併
2. colspan：設定儲存格進行橫向合併

<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <th rowspan="2">訂單編號</th>
    <th rowspan="2">客戶名稱</th>
    <th colspan="2">訂購商品</th>
  </tr>
  <tr>
    <th>品名</th>
    <th>數量</th>
  </tr>
  <tr>
    <td>001</td>
    <td>王小明</td>
    <td>筆記本</td>
    <td>3</td>
  </tr>
  <tr>
    <td>002</td>
    <td>李小美</td>
    <td>鉛筆</td>
    <td>10</td>
  </tr>
</table>

結語

表格是一個很方便的 HTML 元素，可以清楚地呈現有結構的資料。不過，表格主要用於展示數據資料，不建議用來做網頁排版。