CSS - Bảng

Hướng dẫn này sẽ dạy bạn cách đặt các thuộc tính khác nhau của bảng HTML bằng CSS. Bạn có thể đặt các thuộc tính sau của bảng:

Các border-collapse chỉ định liệu trình duyệt có nên kiểm soát sự xuất hiện của các đường viền liền kề chạm vào nhau hay mỗi ô có nên duy trì kiểu dáng của nó hay không.
Các border-spacing chỉ định chiều rộng sẽ xuất hiện giữa các ô trong bảng.
Các caption-sidechú thích được trình bày trong phần tử <caption>. Theo mặc định, chúng được hiển thị phía trên bảng trong tài liệu. Bạn sử dụng thuộc tính bên chú thích để kiểm soát vị trí của chú thích bảng.
Các empty-cells chỉ định xem đường viền có được hiển thị hay không nếu một ô trống.
Các table-layout cho phép các trình duyệt tăng tốc bố cục của một bảng bằng cách sử dụng các thuộc tính chiều rộng đầu tiên mà nó đi qua cho phần còn lại của cột thay vì phải tải toàn bộ bảng trước khi hiển thị nó.

Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này với các ví dụ.

Thuộc tính thu gọn biên giới

Thuộc tính này có thể có hai giá trị thu gọn và tách biệt . Ví dụ sau sử dụng cả hai giá trị:

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính giãn cách đường viền

Thuộc tính border-spacing chỉ định khoảng cách phân tách các ô liền kề '. biên giới. Nó có thể nhận một hoặc hai giá trị; chúng phải là đơn vị độ dài.

Nếu bạn cung cấp một giá trị, nó sẽ áp dụng cho cả đường viền dọc và ngang. Hoặc bạn có thể chỉ định hai giá trị, trong trường hợp đó, giá trị đầu tiên đề cập đến khoảng cách ngang và thứ hai đề cập đến khoảng cách dọc -

NOTE - Thật không may, thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Bây giờ, hãy sửa đổi ví dụ trước và xem hiệu ứng -

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính bên chú thích

Thuộc tính caption-side cho phép bạn chỉ định nơi nội dung của phần tử <caption> nên được đặt trong mối quan hệ với bảng. Bảng sau liệt kê các giá trị có thể có.

Thuộc tính này có thể có một trong bốn giá trị trên, dưới, trái hoặc phải . Ví dụ sau sử dụng từng giá trị.

NOTE - Các thuộc tính này có thể không hoạt động với Trình duyệt IE của bạn.

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính ô trống

Thuộc tính ô trống cho biết liệu một ô không có bất kỳ nội dung nào có được hiển thị đường viền hay không.

Thuộc tính này có thể có một trong ba giá trị - hiển thị, ẩn hoặc kế thừa .

Đây là thuộc tính ô trống được sử dụng để ẩn đường viền của các ô trống trong phần tử <table>.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính bố cục bảng

Thuộc tính table-layout sẽ giúp bạn kiểm soát cách trình duyệt hiển thị hoặc sắp xếp một bảng.

Thuộc tính này có thể có một trong ba giá trị: cố định, tự động hoặc kế thừa .

Ví dụ sau đây cho thấy sự khác biệt giữa các thuộc tính này.

NOTE - Thuộc tính này không được hỗ trợ bởi nhiều trình duyệt vì vậy đừng dựa vào thuộc tính này.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Nó sẽ tạo ra kết quả sau: