Định dạng hiện thị bảng table bằng CSS

• Thuộc tính table-layout
• Thuộc tính border-collapse / border-spacing
• Thuộc tính caption-side
• Thuộc tính empty-cells

Bảng hiểu trong HTML được tạo ra một cách dễ dàng bằng cách thẻ <table> <th> <tr> <td> ... (xem tạo bảng biểu HTML). Tuy nhiên hiện thị mặc định của bảng biểu nhiều khi không đáp ứng được các yêu cầu, dưới đây là một số thuộc tính có thể áp dụng để định dạng trình bày bảng biểu, tùy biến bảng biểu sao cho phù hợp.

Thuộc tính table-layout trong CSS.

Cú pháp:

table-layout: auto | fixed | inherit

CSS cho phép thiết lập bố cục bảng ở hai chế độ là tự động và cố định. Cả hai chế độ này đều có thể thiết lập độ rộng của bảng với thuộc tính css width, cũng như độ rộng của cột vẫn bằng thuộc tính width áp dụng cho phần tử <td> <th> của dòng đầu tiên. Tuy nhiên các cột không thiết lập độ rộng thì ứng xử có khác cho từng trường hợp.

Chế độ bảng cố định

table-layout: fixed

Chiều ngang của bảng không phụ thuộc vào nội dung của các ô bảng; nó chỉ phụ thuộc vào thuộc tính chiều rộng của bảng, rộng của cột, đường viền và khoảng trống ô bảng.

Chiều rộng của bảng có thể thiết lập thông qua thuộc tính width (nếu không thiết lập width thì tự động chuyển về chế độ tự động).

Chiều rộng của cột phụ thuộc vào việc bạn thiết lập thuộc tính width cho cột (thiết lập tại td, th dòng đầu tiên). Với các cột không thiết lập width nó sẽ chia đều không gian còn lại cho các cột đó. (nếu tất cả các cột không thiết lập width thì chiều rộng được chia đều - không phụ thuộc vào nội dung của ô bảng).

Chế độ bảng tự động

table-layout: auto;

Với chế độ tự động, chiều rộng bảng có được bởi chiều rộng các cột của nó (hoặc có thể chỉ rõ với thuộc tính width). Chiều rộng cột lại phụ thuộc vào nội dung các ô bảng của cột - nó có xu hướng mở rộng cột tối đa theo nội dung trừ khi chỉ rõ chiều rộng cột với thuộc tính width.

Ví dụ: chế độ auto và fixed

<style>
    .table1 {
        border: 2px solid deeppink; /* kẻ viền quanh bảng */
        table-layout: fixed;
        width: 300px;
    }
    .table-auto {
        table-layout: auto;
    }
    .table1 td {
        border: 1px solid #343333;  /* kẻ viền các cell */
    }
    .col50px {
        width: 50px;
    }
</style>

<table class="table1">
    <tr>
        <td class="col50px">ND</td>
        <td>ND bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Tại đây chứa Nội dung ô bảng</td>
    </tr>
</table>
<hr>
<table class="table1 table-auto">
    <tr>
        <td class="col50px">ND</td>
        <td>ND bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Tại đây chứa Nội dung ô bảng</td>
    </tr>
</table>

Thuộc tính border-collapse và border-spacing

Thuộc tính border-collapse được sử dụng để thiết lập chế độ kẻ viền của bảng, cho biết đường viền các đường bo viền quanh bảng, quanh các ô bảng của nó là liên tục hay tách rời.

border-collapse: collapse | separate

Khi ở chế tộ tách rời viền separate để thiết lập khoảng cách viền các ô bảng, dùng thuộc tính border-spacing

collapse là giá trị mặc định xem ví dụ bảng ở trên, ví dụ với separate như sau:

<style>
    .tb-separate {
       border-collapse: separate;  /* thiết lập chế độ tách rời ô bẳng */
       border-spacing:  5px;        /* Thiết lập khoảng tách rời */
    }
</style>

<table class="table1 tb-separate">
    <tr>
        <td class="col50px">ND</td>
        <td>ND bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Tại đây chứa Nội dung ô bảng</td>
    </tr>
</table> 

Thuộc tính caption-side

Thuộc tính này áp dụng cho <caption>, thiết lập vị trí của phần tử <caption> trong bảng (phần tử tạo tiêu đề bảng - xem Thẻ <caption> trong bảng).

caption-side: top | bottom | inherit

Ví dụ: định dạng caption của bảng nằm trên

<style>
    .my-caption { 
        caption-side: top;
        
        color: #e91e63;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        background-color: #ff572282;
        border: 1px solid red;
    }
</style>

<table class="table1">
    
    <tr>
        <td class="col50px">ND</td>
        <td>ND bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Tại đây chứa Nội dung ô bảng</td>
    </tr>
    <caption class="my-caption">Đây là tiêu đề của bảng</caption>
</table> 

Thuộc tính empty-cells

Thuộc tính empty-cells để thiết lập một ô bảng khi rỗng sẽ được hiện thị hay ẩn đi. Thiết lập ẩn đi chỉ có hiệu lực khi bảng có border-collapse: separate

empty-cells: show | hide | inherit

Mặc định là show, ô bảng vẫn hiện thị khi nó không có nội dung gì. Ví dụ sau thì ẩn đi (bạn sẽ thấy nền)

<style>
    .tablemy { 
        empty-cells: hide;
        border-collapse: separate; 
        background-color: gray; 
    }
    .tablemy td {
        background: white;
    }
</style>

<table class="table1 tablemy">
    
    <tr>
        <td class="col50px">ND</td>
        <td>ND bảng</td>
        <td>Nội dung ô bảng</td>
    </tr>
    <tr>
        <td>ND</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>ND</td>
        <td>ND ô bảng</td>
        <td>Tại đây chứa Nội dung ô bảng</td>
    </tr>
</table>