Định dạng bảng biểu

Các hiện thị có thể định dạng lại bằng CSS

border-collapse thiết lập đường kẻ bảng với hai giá trị collapse đường kẻ chuyển thành đường đơn, separate chuyển đường kẻ bẳng về đường đôi (mặc định)

Ví dụ bảng sau mặc định border-collapse: separate

 <table border="2" style="border-collapse: separate">
    <tr>
        <td>Red</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>Yellow</td>
    </tr>
</table>
Red Green
Blue Yellow

Còn khi thiết lập border-collapse: collapse thì sử dụng được thêm thuộc tính border-spacing để thiết lập khoảng đường kẻ.

border-spacing: khoảng-theo-x khoảng-theo-y;
<style>
    table.collapsetb {
        border-collapse: separate;
        border-spacing: 40px 20px;
    }
</style>
<table border="1" class="collapsetb">
    <tr>
        <td>Red</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>Yellow</td>
    </tr>
</table>
Red Green
Blue Yellow

Vị trí tiêu đề bảng caption-side

Trong HTML bạn biết thẻ <caption> để định nghĩa tiêu đề của bảng. Trong CSS bạn dùng thuộc tính caption-side để định vị trí tiêu đề với các giá trị: top ở trên, bottom ở dưới bảng,

<table border="1">
    <caption style="caption-side: top;">MỘT SỐ CHỦ ĐỀ</caption>
    <tr>
        <th>Tên chủ đề</th>
        <th>Số bài viết</th>
        <th>Số câu hỏi</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>38</td>
        <td>119</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>70</td>
        <td>174</td>
    </tr>
</table>
MỘT SỐ CHỦ ĐỀ
Tên chủ đề Số bài viết Số câu hỏi
HTML 38 119
CSS 70 174

Thuộc tính empty-cells

Các ô của bảng được điều khiển hiện thị bằng thuộc tính empty-cells với các giá trị show (các cell trống được kẻ và tô nền), hide (ẩn khi cell trống)

<style>
    .tablehideempty {
        border-collapse: separate;
        empty-cells: hide;
    }
</style>

<table border="1" class="tablehideempty">
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td></td>
    </tr>
</table>
HTML CSS
JavaScript

Thuộc tính table-layout

table-layout chỉ ra việc bảng tính toán chiều rộng các cột như thế nào với các giá trị:

  • auto (mặc định) độ rộng các cột được tính toán tự động phụ thuộc vào nội dung các ô của cột
  • fixed độ rộng của cột không bị ảnh hưởng bởi nội dung

Ví dụ sau bạn sẽ phân biệt được auto và fixed

<style>
    table.auto, table.fixed {
        border-collapse: separate;
        width: 100%;
        border: 1px solid gray;
    }
    table.auto td, table.fixed  td {
        border: 1px solid gray;
    }
    table.auto {
        table-layout: auto;
    }
    table.fixed {
        table-layout: fixed;
    }
</style>

<p>Table-layout is set to <strong>auto</strong></p>
<table class="auto">
    <tr>
        <td width=“10%">500.000.000.000.000</td>
        <td width="90%">20.000</td>
    </tr>
</table>

<p>Table-layout is set to <strong>fixed</strong></p>
<table class="fixed">
    <tr>
        <td width="10%">500.000.000.000.000</td>
        <td width="90%">20.000</td>
    </tr>
</table>

Table-layout is set to auto

500.000.000.000.000 20.000

Table-layout is set to fixed

500.000.000.000.000 20.000
Đăng ký theo dõi ủng hộ kênh