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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,265
Reaction score
7,719
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
Mã:
<table border="2" style="border-collapse: separate">
    <tr>
        <td>Red</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>Yellow</td>
    </tr>
</table>
screenshot_1591323629.png

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ẻ.
Mã:
border-spacing: khoảng-theo-x khoảng-theo-y;
Mã:
<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>
screenshot_1591323664.png

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:
Mã:
<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>
screenshot_1591323738.png

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)
Mã:
<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>
screenshot_1591323781.png

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
Mã:
<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>
screenshot_1591323852.png

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


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom