HTML <table> 元件代表表格數據──換句話說，就是透過二維資料表來呈現資訊。
早期 table 是同時拿來做網站排版與資料呈現，在 html、div 出現之後，慢慢回歸資料呈現的使用。永遠的 table，改變的只有使用它的方式。

來看看 table 的樣子吧！

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

上面的表格，如果加上框線，在網頁上會是這樣子的呈現

有發現什麼嗎？
在 Html 上面的內容，如果沒有特別設定，在瀏覽器應該都會是由上往下逐一呈現，照理說 Body 跟 Footer 這兩列應該要對調過來才對，因為在 table 裡你會發現順序是 thead --> tfoot --> tbody

這其實是 Html5 之前的規定，在 HTML5 之後已經允許 tfoot 可以放到 tbody 之後了。[1]

Table 在 HTML5 之前存在的 Attributes

這裡面我覺得最特別的是 align ，因為他有等同 float 文繞圖的效果，大家可以到上面的例子連結去實驗一下把 p 裡面的文字加長，就可以看到文繞圖效果。

Table 的 合併

列的合併 colspan

<table border="1">
    <caption>電話簿</caption>
    <tr>
        <th>姓名</th>
        <th colspan=2>电话</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>Gary</td>
        <td>0988-123123</td>
        <td>0986-898989</td>
        <td>台北市三重區中華北路一段190-5號</td>
    </tr>
    <tr>
        <td>Howard</td>
        <td colspan=2>0966-188188</td>
        <td>台南市永康區中華北路一段190-3號</td>
    </tr>
</table>

列的合併是寫在同一個 tr 裡面的儲存格，例如這個例子裡，電話需要兩列，因此在 th 只會看到三行 <th> ，然後在中間的 th 加上 colspan=2 ，即表示將兩列 th 合併。
結果如下：

欄的合併 rowspan

<table border=1>
    <caption>電話簿</caption>
    <tr>
      <th>姓名</th>
      <td>塌客</td>
      <td>露西</td>
      <td>奈特</td>
      <td>查理</td>
      <td>史奴比</td>
    </tr>
    <tr>
      <th rowspan=2>電話</th>
      <td>0911-456789</td>
      <td rowspan=2>0933-567489</td>
      <td>0944-567289</td>
      <td rowspan=2>0966-123578</td>
      <td rowspan=2>0966-123578</td>
    </tr>
    <tr>
      <td>0922-345678</td>
      <td>0955-123589</td>
    </tr>
</table>

要注意的是合併的欄位 rowspan 要寫在上面那一欄，下面那一欄則不需要寫任何東西。因此會看到第二個 tr 裡面都是資料，第三個 tr 只有兩個 td。
結果如下：

Table 的 CSS 屬性

border：設定 table 的邊框

格式為 border: 粗細 樣式 顏色;

border-collapse：決定是否折疊表格的邊框

表格預設會有一個邊框的寬度，透過設定 border-collapse: collapse; 可以將邊框摺疊成單線。（如圖右）

border-spacing：指定相鄰單元格的邊界之間的距離

border-spacing 只能寫成一個值，或兩個值。

//一個值
border-spacing: 10px; 四邊都一樣的距離

//兩個值（與一般的上下、左右不同，是寫成左右、上下）
border-spacing: 10px 50px; 左右 10px 上下 50px 

w3school範例

caption-side：指定表格標題的位置

值有：top 與 bottom

empty-cells：指定是否在表格中的空單元格上顯示邊框和背景

值有：hide 與 show，使用 hide 可以隱藏沒有內容的單元格（包含邊框和背景）。

table-layout：設置表格佈局算法

值有：auto | fixed | initial | inherit
在設定單元格的寬度之後，針對table再加上 table-layout：fixed; 可以固定單元格的寬度，不會因為資料的長度而改變單元格的長度。

可以參考 w3school 的範例

以上是 Table 的小介紹。各位看倌明天見囉～

參考資料：
[1] https://www.w3.org/TR/html51/tabular-data.html#tabular-data
[2] https://www.w3schools.com/tags/tag_table.asp
[3] https://www.w3schools.com/css/css_table.asp