整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
5行CSS樣式碼，讓你的表格更加漂亮，先放最終效果：
最終樣式
<table class="style-table">
<thead>
<tr>
<th>序號</th>
<th>物品名稱</th>
<th>金額</th>
<th>備注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>洗衣粉</td>
<td>15.00</td>
<td>自己用</td>
</tr>
<tr class="active-row">
<td>2</td>
<td>潔爾陰</td>
<td>25.00</td>
<td>老婆用</td>
</tr>
<tr >
<td>3</td>
<td>搓衣板</td>
<td>5.00</td>
<td>自己用</td>
</tr>
</tbody>
</table>頁編程之表格樣式。
同學們好，我是一名免費的少兒編程老師。今天我要分享的內容是以列為單位設置表格樣式。在插入表格課程中，我已經講解了HTML中沒有單獨的列標簽，列是由對應的單元格組成的行形成的。雖然如此，但列這個概念仍然是存在的。
讓我們來看一下今天的示例效果。這個網頁上有一個3行3列的表格，其中3列分別是姓名、科目和分數，而3行分別是表頭行、字體加粗的內容和兩行。第一列和第二列的背景顏色是綠色，第三列的背景顏色是灰色。在一列中，每一個單元格的樣式都是統一的。
接下來，讓我們看看實現的代碼。以列為單位設置表格樣式，實際上是通過這兩個標簽來實現的，分別是colgroup和col。colgroup翻譯過來就是“列”的意思，而colgroup則是“列主”的意思。
首先，讓我們來看看colgroup標簽。這個標簽是一個無屬性的圍堵標簽，它的作用只有一個，即聲明這個標簽內包含的是本表格列的樣式。通過這個標簽，我們可以向整個列應用樣式，而不需要為每一個單元格或每一行設置樣式。
這個標簽必須在table標簽內，如果有caption標簽，則必須在thead標簽之前使用。如果不明白各標簽的先后順序，可以看看上節課的內容。colgroup標簽僅僅是聲明，具體的樣式是要使用col標簽來實現的。col標簽的數量應該與TDTH的標簽數量一致，一一對應地設置。第1行的col標簽對應第1列的樣式，第2行的col標簽對應第2列的樣式，以此類推。
有些同學會問，老師，你這里的表格有三列，但是你只寫了兩個col標簽，這時候就要講到col標簽在HTML5中的兩個常用屬性，一個是col屬性，說明了這一行的col標簽的樣式可以跨幾列。
例如，在這里將第一行的col標簽的Span屬性設置為2，這就意味著這個樣式在當前位置跨了兩列。換句話說，讓第一列和第二列使用了同一個樣式。
第二個屬性是它的style標簽。這個style標簽的內容是CSS的一段代碼，通過這個屬性我們可以為列添加各種效果。嚴格來說，style并不是卡標簽的一個專用屬性，而是HTML的全局屬性之一。所謂的全局屬性就是只要是HTML標簽都自帶這一個屬性。對于各位同學來說，這是一個新概念，你們只需要記住就可以了。通過使用colgroup標簽和col標簽的配合，我們不僅能夠靈活快速地為表格添加樣式，進行美化，還能大幅減少代碼量，提高頁面加載速度。
以上就是今天的分享，希望各位同學能夠牢記在心，并在下一次練習中做到不看視頻也能夠寫出代碼。如果需要獲取相關案例和文檔，可以向我提問。我們下期再見。如果你對網頁編程、服務端編程、數據庫、算法等感興趣，歡迎點贊、關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
