目錄
行顏色設置的簡便方法
昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網頁製作》中學習了設置單元格以及其中內容的空間間距和背景顏色。
其中添加列向單元格背景顏色只需要修改對應的<tr>標籤中的style屬性，而修改行向標籤需要修改不同<tr></tr>標籤中的<td>標籤的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？
當然有！
開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。
<colgroup></colgroup>標籤是一個給行向單元格打組的標籤，在頁面中不會顯示。
<col></col>標籤是來具體設置行向單元格數量和顏色的標籤。
示例代碼如下：
<colgroup>
<col span = "1" style="background-color:#ff0000;">
</col>
</colgroup>
這段代碼添加到「第一個頁面.html」當中就可以，具體代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">
表格的頭部信息
</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息
</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;">
</col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
頁面效果如圖：
因為第一列和最後一列只有一行所以，也都變紅了。
其中span的數量代表行數。
如果把span等號後面的數改成2，因為表格只有兩行，所以整個表格都紅了。
表格嵌套
我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。
代碼示例如下：我們把「一列一行」分割成列向兩個單元格。
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
這段代碼替換文字「一列一行」即可。
頁面效果如圖所示：
留個思考題，大家可以思考一下行向分割單元格怎麼寫。
今天的內容結束了。
全部示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">
表格的頭部信息
</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息
</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;">
</col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
喜歡的小夥伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
疫情期間，請大家少出門，不聚會，生活還在繼續!用好這個假期，讓自己活得更多技能！加油！
學到這裡，相信大家已經有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進位顏色表示方法。之後會給大家推薦html代碼參考手冊的連結。如果您是零基礎的話，學完16進位顏色表示方法後，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續看後面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完後再結束這套教程。
如果您有任何疑問或不解歡迎關注並私信我。