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 的样式来设置单元格内边距，背景色，水平和垂直对齐方式等