Tìm hiểu cách sử dụng CSS định dạng bảng HTML

[PVS]

Tìm hiểu cách sử dụng CSS định dạng bảng HTML

Trong CSS có các thuộc tính như border-collapse, border-spacing, caption-side, empty-cells, table-layout . Những thuộc tính này sẽ hỗ trợ chúng ta định dạng bảng HTML.

Đị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ẻ thành đườ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>

​

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>

​

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

Trong HTML thẻ <caption> để định nghĩa tiêu đề của bảng. Trong CSS có thể 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>

​

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>

​

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>

​

Chúc các bạn thành công.

Nguồn: Internet​