Categories HTML

Thẻ col 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ẻ <col> chỉ định thuộc tính cột cho mỗi cột trong phần tử <colgroup>.

Thẻ <col> rất hữu dụng cho việc áp dụng styles cho tất cả các cột, thay cho việc phải lập lại style cho mỗi ô, ở các hàng.


Trình duyệt hỗ trợ

Thẻ  Chrome  IE  FireFox  Safari  Opera
<col>

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.


Sự khác biệt giữa HTML và XHTML

Trong HTML, thẻ <col> không có thẻ đóng.

Trong XHTML, thẻ <col> phải được đóng đúng cách.


Các thuộc tính

Thuộc tính Giá trị Mô tả
align left
right
center
justify
char
Không hỗ trợ trong HTML5.
Chỉ định lề của nội dung liên quan đến phần tử <col>
char ký tự Không hỗ trợ trong HTML5.
Chỉ định lề của nội dung liên quan đến phần tử <col> tới một ký tự
charoff số Không hỗ trợ trong HTML5.
Chỉ định số lượng ký tự nội dung sẽ được căn lề từ ký tự được chỉ định bởi thuộc tính char
span số Chỉ định số lượng cột mà một phần tử <col> gom lại chung thuộc tính
valign top
middle
bottom
baseline
Không hỗ trợ trong HTML5.
Chỉ định lề theo chiều thẳng đứng của nội dung liên quan đến phần tử <col>
width %
pixels
chiều dài tương đối
Không hỗ trợ trong HTML5.
Chỉ định chiều rộng của phần tử <col>

Các 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ử <col> với các giá trị mặc định sau:

col {
display: table-column;
}
Back to Top