5行CSS樣式碼，讓你的表格更加漂亮，先放最終效果：

HTML表格代碼如下：

<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>

CSS代碼如下：

頁編程之表格樣式。

同學們好，我是一名免費的少兒編程老師。今天我要分享的內容是以列為單位設置表格樣式。在插入表格課程中，我已經講解了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標簽的配合，我們不僅能夠靈活快速地為表格添加樣式，進行美化，還能大幅減少代碼量，提高頁面加載速度。

以上就是今天的分享，希望各位同學能夠牢記在心，并在下一次練習中做到不看視頻也能夠寫出代碼。如果需要獲取相關案例和文檔，可以向我提問。我們下期再見。如果你對網頁編程、服務端編程、數據庫、算法等感興趣，歡迎點贊、關注！