自動目錄

• 使用colgroup注意事項
• 參考資料

過去我們要讓表格整欄上色，都得用很不方便的方法：該儲存格設定一個類別，指定他的樣式，現在有更好的方法，那就是使用HTML4新增的 colgroup標籤

先看範例

如果我要分別每一欄上色，在過去是很不方便的，得在那欄設定 class，再修改class的樣式，如果使用colgroup就能快速的解決這個問題

<table border="1">
   <colgroup>
    <col style="background-color:darkgray; color:white; width:100px;">
    <col span="2" style="background-color:green; ">
    <col style="background-color:yellow">
  </colgroup>
        <tr>
            <td width="50">文章編號</td>
            <td>名稱</td>
            <td width="60">作者</td>
            <td width="60">日期</td>
            <td width="75">備註</td>
        </tr>
        <tr>
            <td>25556</td>
            <td>文章表格教學示範</td>
            <td>瘦河馬</td>
            <td>2010-02-06</td>
            <td>這是一篇好文章</td>
        </tr>
        <tr>
            <td>25557</td>
            <td>文章表格COLGROUP教學示範</td>
            <td>瘦河馬</td>
            <td>2017-02-06</td>
            <td>這是第二篇好文章</td>
        </tr>
    </tbody>
</table>

結果

第2行是 colgroup的標籤，3~5行用<col>分別定義：

  第1欄 灰底白字寬100px，這裡注意白字沒有出來，顯然是這個樣式無法作用
  第2,3欄 綠底，使用一個span="2" 的屬性作為整合2欄
  第4欄 黃底
  第5欄未寫，故維持原樣

使用colgroup注意事項

1. <colgroup> 要放在表格內，不能放在<table></table>的標籤外，使用<col>指定每個欄
2. 理論上 <colgroup>要放在任何<tr> <thead>  <tfoot> <tbody> 之前，但我試過放在表格的很多地方都能用，例如最下、<tr>和<tr>之間
3. 所有瀏覽器都支援
4. 和<tr>不一樣，只有少許的樣式有支援^[2][3]：

5. <tr>或<td>設的樣式可以輕易的蓋掉<colgroup>

參考資料

[1] http://www.w3schools.com/TAgs/tag_colgroup.asp

[2] https://www.sitepoint.com/community/t/css-colgroup-font-style-problem/4589/5

[3] https://www.w3.org/wiki/HTML/Attributes/_Global