Hướng dẫn và ví dụ HTML Col, Colgroup

Xem thêm các chuyên mục:

Các hướng dẫn HTML

ColGroup, Col
Colgroup, Col Styles

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- ColGroup, Col

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>

2- Colgroup, Col Styles

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 visibility

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>

Xem thêm các chuyên mục:

Các hướng dẫn HTML