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

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