Hướng dẫn sử dụng HTML Col, Colgroup

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

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- ColGroup, Col

Thẻ <col><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 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: