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>