Thẻ <colgroup> trong HTML

Thẻ <colgroup> là nhóm của một hoặc nhiều cột trong bảng. Nó thiết lập style cho tất cả các cột trong nhóm.

Thuộc tính của thẻ <colgroup>:

• span − Số lượng cột mà nhóm cột nên trải qua, thiết lập bằng thuộc tính span

Ví dụ

Ví dụ triển khai thẻ <colgroup>:

<!DOCTYPE html> <html> <head> 
<style> 
    table, th, td { 
        border: 2px solid black; 
    } 
</style> </head> 
<body> 
<h2>Kết quả</h2> 
<table> 
    <colgroup> 
        <col span="3" style="background-color:gray;"> 
        <col style="background-color:orange;"> 
    </colgroup> 
    <tr> 
        <th>Id</th> 
        <th>Tên</th> 
        <th>Phần trăm</th> 
        <th>Xếp hạng</th> 
    </tr> 
    <tr> 
        <td>009</td> 
        <td>Tom</td> 
        <td>98</td> 
        <td>1</td> 
    </tr> 
    <tr> 
        <td>011</td> 
        <td>Kieron</td> 
        <td>97</td> 
        <td>2</td> 
    </tr> 
    <tr> 
        <td>039</td> 
        <td>Gayle</td> 
        <td>95</td> 
        <td>3</td> 
    </tr> 
    <tr> 
        <td>017</td> 
        <td>Shaun</td> 
        <td>92</td> 
        <td>4</td> 
    </tr> 
    <tr> 
        <td>009</td> 
        <td>Kane</td> 
        <td>91</td> 
        <td>5</td> 
    </tr> 
    <tr> 
        <td>025</td> 
        <td>Steve</td> 
        <td>87</td> 
        <td>6</td> 
    </tr> 
    <tr> 
        <td>013</td> 
        <td>Jack</td> 
        <td>85</td> 
        <td>7</td> 
    </tr> 
    <tr> 
        <td>023</td> 
        <td>Tim</td> 
        <td>84</td> 
        <td>8</td> 
    </tr> 
</table> 
</body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Trong ví dụ trên, chúng ta thiết lập style cho nhiều cột:

<colgroup> 
    <col span="3" style="background-color:gray;"> 
    <col style="background-color:orange;"> 
</colgroup>

Chúng ta đặt màu nền xám cho 3 cột đầu tiên trong <colgroup>:

<col span="3" style="background-color:gray;">

Các cột còn lại đặt màu nền cam:

<col style="background-color:orange;">