Thẻ colgroup trong HTML

Ví dụ

Thiết lập màu nền cho ba cột với thẻ <colgroup> và thẻ <col>:

<table>
 <colgroup>
 <col span="2" style="background-color:red">
 <col style="background-color:yellow">
 </colgroup>
 <tr>
 <th>ISBN</th>
 <th>Tên sách</th>
 <th>Giá</th>
 </tr>
 <tr>
 <td style="color:#FFF">3476896</td>
 <td style="color:#FFF">Zarathustra Đã Nói Như Thế</td>
 <td>120 ngàn đồng</td>
 </tr>
<tr>
<td style="color:#FFF">5476499</td>
<td style="color:#FFF">Buổi Hoàng Hôn Của Những Thần Tượng</td>
<td>48 ngàn đồng</td>
</tr>
 </table>

Kết quả:

ISBN Tên sách Giá
3476896 Zarathustra Đã Nói Như Thế 120 ngàn đồng
5476499 Buổi Hoàng Hôn Của Những Thần Tượng 48 ngàn đồng

Định nghĩa và cách dùng

Thẻ <colgroup> chỉ định một nhóm các cột trong bảng có định dạng như thế nào.

Thẻ <colgroup> hữu dụng khi áp định dạng lên toàn bộ các cột, thay vì lặp lại định dạng ở mỗi ô thuộc mỗi hàng.

Lưu ý: Thẻ <colgroup> phải là con của phần tử <table>, đứng đằng sau bất kỳ phần tử <caption> nào đứng đằng trước các phần tử <thead>, <tbody>, <tfoot><tr>.

Mẹo: Để xác định các thuộc tính khác nhau của một cột trong một <colgroup>, sử dụng thẻ <col> trong thẻ <colgroup>.


Trình duyệt hỗ trợ

Thẻ Chrome IE FireFox Safari Opera
<colgroup>

Sự khác nhau giữa HTML 4.01 và HTML5

Không thuộc tính nào thuộc HTML 4.01 được hỗ trợ trong HTML5.

Các thuộc tính

Thuộc tínhGiá trịMô tả
alignleft
right
center
justify
char
Không hỗ trợ trong HTML5.
Căn lề nội dung trong nhóm các cột
charký tựKhông hỗ trợ trong HTML5.
Căn lề nội dung trong nhóm các cột tới một ký tự
charoffsốKhông hỗ trợ trong HTML5.
Thiết lập số ký tự nội dung sẽ căn lề từ ký tự được chỉ định bởi thuộc tính char
spansốChỉ định số cột nên nhóm lại với nhau
valigntop
middle
bottom
baseline
Không hỗ trợ trong HTML5.
Căn lề nội dung theo chiều dọc trong nhóm cột
widthpixels
%
chiều dài tương đối
Không hỗ trợ trong HTML5.
Chỉ định chiều rộng của nhóm cột

Thiết lập CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <colgroup> với các giá trị mặc đinh sau:

colgroup {
display: table-column-group;
}

Leave a Comment