html table 使用詳解

html 裏 table 是常用的數據展現方式，在此通過幾個實例總結一下它的使用方法。

與 table 有關的全部標籤

<table>
  <colgroup>
    <col width="60" />
    <col width="120" span="2"/>
  </colgroup>
  <caption>表格標題</caption>
  <thead>
    <tr>
      <th>表頭1</th><th>表頭2</th><th>表頭3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據1</td><td>數據2</td><td>數據3</td>
    </tr>
    <tr>
      <td>表頭1</td><td>表頭2</td><td>表頭3</td>
    </tr>
  </tbody>
</table>

• table 標籤標識一個表格，其他與表格相關的標籤都應該放到 table 內
• colgroup 標籤和 col 標籤配合使用來方便設置表格中每列的寬度，
  考慮到兼容性問題應該只使用 width 屬性來指定列寬，用 span 屬性來指定同時設置多列的寬度。可以省略該標籤
• caption 標籤標識表格的標識，默認它將居中顯示在表格之上。可以省略該標籤
• thead 標籤用來標識表頭。可以省略該標籤
• tbody 標籤用來標識表格主體。可以省略該標籤
• tr 標籤用來標識表格的一行，th 和 td 標籤要放到 tr 內
• th 標籤標識表頭單元格，默認它將加粗顯示
• td 標籤用來標識單元格

跨行跨列的單元格

  <table border="1" style="border-collapse: collapse">
  <tr>
    <th>表頭1</th>    
    <th colspan="2">跨兩列的單元格</th>    
  </tr>
  <tr>    
    <td rowspan="2">跨兩行的單元格</td>
    <td>數據2</td>
    <td>數據3</td>
  </tr>
  <tr>    
    <td>表頭2</td>
    <td>表頭3</td>
  </tr>
  </table>

• 設置單元格的 colspan 屬性，讓它跨列
• 設置單元格的 rowspan 屬性，讓它跨行

列寬控制和自動換行

<table style="width: 600px; table-layout: fixed; word-wrap: break-word;">
  <colgroup>
    <col width="60" />
    <col width="120" span="2"/>
  </colgroup>    
  <tr>
    <th>表頭1</th><th>表頭2</th><th>表頭3</th>
  </tr>
  <tr>
    <td>數據111111111111111111111111111111111111</td><td>數據2</td><td>數據3</td>
  </tr>
  <tr>
    <td>表頭1</td><td>表頭2</td><td>表頭3</td>
  </tr>
</table>

• 默認情況下 table 每列的實際寬度根據 table 的總寬度，每列內容的長度和列單元格寬度自動計算得出
• 若要固定列的寬度，給 table 加上table-layout: fixed，則列的實際寬度只與 table 寬度和列寬有關，與列的內容無關
• 給 table 加上word-wrap: break-word可以實現固定寬度下列內容的自動換行

邊框

<table border="1" style="border-collapse: collapse">
  <tr>
    <th>表頭1</th><th>表頭2</th><th>表頭3</th>
  </tr>
  <tr>
    <td>數據1</td><td>數據2</td><td>數據3</td>
  </tr>
  <tr>
    <td>表頭1</td><td>表頭2</td><td>表頭3</td>
  </tr>
</table>

• 默認情況下 table 沒有邊框
• 爲 table 設置 border 屬性顯示邊框
• 默認情況下單元格的邊框之間有間距比較難看，爲 table 設置樣式 border-collapse: collapse 去除邊框間距

單元格樣式

<style>
  .mytable {width: 600px; border-collapse: collapse;}
  .mytable td, .mytable th {padding: 5px;}
  .mytable tr td:first-child, .mytable tr th:first-child {height: 100px; text-align: right; vertical-align: bottom;}
</style>

<table class="mytable" border="1">
  <tr>
    <th>表頭1</th><th>表頭2</th><th>表頭3</th>
  </tr>
  <tr>
    <td>數據1</td><td>數據2222222222222222222222222222</td><td>數據3</td>
  </tr>
  <tr>
    <td>表頭1</td><td>表頭2</td><td>表頭3</td>
  </tr>
</table>

• 默認單元格是水平居左，垂直居中對齊
• 通過設置 td, th 的樣式來設置單元格內邊距，背景色，水平和垂直對齊方式等