2.18 表格

語意

即表格之意。‌

<table>：表格標籤。

<tr>：table row 的縮寫。‌

<td>：table data 的縮寫。‌

<th>：table heading 的縮寫。‌

<thead>：table head 的縮寫。‌

<tfoot>：table foot 的縮寫。‌

<tbody>：table body 的縮寫。‌

說明

撰寫表格時，預設是不會有各欄的框線。

結構

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

按照定義，撰寫的順序，<thead> 先寫，緊接著 <tbody> ，再來才是 <tfoot>。‌

範例

<table>
  <thead>
    <tr>
      <th>標題一</th>
      <th>標題二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tfoot 第一欄</td>
      <td>tfoot 第二欄</td>
    </tr>
  </tfoot>
</table>

結果呈現：

rowspan 與 colspan 合併欄位

• rowspan：以「列(橫)」的方式來算，合併幾個欄位。

• colspan：以「行(直)」的方式來算，合併幾個欄位。

<table>
  <tbody>
    <tr>
      <td>第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td rowspan="2">第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td colspan="2">第一列第一欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>