Hướng dẫn sử dụng HTML Col, Colgroup
Xem thêm các chuyên mục:
Thẻ <col> và <colgroup> đại diện cho một cột và một nhóm cột của một bảng.
<colgroup> là thẻ con của <table>, nó được đặt sau <caption>, và đặt trước <thead>, <tbody>, <tfoot>, <tr>. Một bảng có thể có 0 hoặc nhiều thẻ con <colgroup>, và mỗi <colgroup> có 0 hoặc nhiều thẻ con <col>.
Nếu <colgroup> không có thẻ con <col>:
<colgroup span = "<number>"> </colgroup>
Nó tương đương với:
<colgroup>
<col span = "<number>" />
</colgroup>
Ví dụ:
simple-colgroup-example.html
<!DOCTYPE html>
<html>
<head>
<title>Table align</title>
<meta charset="UTF-8"/>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>HTML colgroup</h2>
<table>
<colgroup>
<col span ="3" style="background-color:lightblue">
</colgroup>
<tr>
<th>No</th>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>1</td>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
<td>..</td>
</tr>
<tr>
<td>2</td>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
<td>..</td>
</tr>
</table>
</body>
</html>
Ví dụ một bảng có nhiều <colgroup>:
colgroup-example.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Colgroup, Col</title>
<meta charset="UTF-8"/>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>HTML Colgroup, Col</h2>
<table>
<colgroup>
<col style="background-color:lightgreen;width: 50px;"/>
</colgroup>
<colgroup style="background-color:yellow;">
<col span="2"/>
<col style="width: 90px;"/>
</colgroup>
<tr>
<th>No</th>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>1</td>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
<td>..</td>
</tr>
<tr>
<td>2</td>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
<td>..</td>
</tr>
</table>
</body>
</html>
Chỉ có một vài thuộc tính (property) CSS có thể áp dụng cho <colgroup>, <col>.
CSS border
CSS border chỉ có tác dụng với một bảng cụp (Collapsing Table). Xem thêm ví dụ bên dưới.
CSS background-*
CSS background-* của <colgroup>, <col> chỉ có tác dụng tại các nơi mà hàng (row) hoặc ô (cell) của bảng là trong suốt (transparent).
CSS width
Thiết lập chiều rộng cho <col>, <colgroup>.
CSS {visibility: collapse}
Bạn có thể áp dụng CSS visibility cho <colgroup>, <col> nhưng chỉ với giá trị {visibility:collapse}, các giá trị khác là không hợp lệ và bị bỏ qua, hoặc bị đối xử giống như {visibility:visible}.
CSS border
CSS border áp dụng cho <col>, <colgroup> chỉ hoạt động với một bảng cụp (Collapsing Table).
colgroup-border-example.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Colgroup, Col</title>
<meta charset="UTF-8"/>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>HTML Colgroup, Col</h2>
<p style="color:blue; font-style:italic;">
CSS border for COL, COLGROUP works only in Collasing Table.
</p>
<table>
<colgroup>
<col style="background-color:lightgreen;width: 50px;"/>
</colgroup>
<colgroup style="background-color:yellow; border: 3px solid red;">
<col span="2"/>
<col style="width: 90px;"/>
</colgroup>
<tr>
<th>No</th>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>1</td>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
<td>..</td>
</tr>
<tr>
<td>2</td>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
<td>..</td>
</tr>
</table>
</body>
</html>
