Hướng dẫn cách áp dụng CSS cho thẻ table

Bạn thường xuyên sử dụng bảng để trình bày các dữ liệu, vậy bạn đã biết cách cải thiện diện mạo cho nó chưa? Với cách áp dụng CSS cho thẻ table, bạn có thể tạo ra được những cái bảng nhất quán và nổi bật. Trong bài viết dưới đây, FUNiX sẽ hướng dẫn bạn các cách vận dụng CSS để định dạng cho bảng. Mời các bạn cùng tham khảo!

• Cách áp dụng CSS tạo menu
• Cách áp dụng CSS cho thẻ image, ảnh nền
• Hướng dẫn cách áp dụng CSS cho thẻ link chuẩn nhất

>> Cách áp dụng CSS cho thẻ link
>> Cách áp dụng CSS cho thẻ image, ảnh nền
>> Cách áp dụng CSS tạo list
>> Cách áp dụng CSS cho thẻ menu

1. Lý do cần tạo kiểu cho bảng với CSS?

Những lý do bạn cần tạo kiểu cho bảng với CSS:

• Hiển thị dữ liệu như báo cáo tài chính, thống kê, kế toán… một cách khoa học, dễ nhìn, dễ tìm kiếm.
• Tạo đường viền, màu nền,… giúp phân biệt các thông tin, dữ liệu hiển trị trong bảng.
• Có thể kiểm soát bố cục và trình bày các thành phần của bảng một cách rõ ràng, chuyên nghiệp.

Như vậy, việc định dạng bảng bằng cách áp dụng CSS sẽ giúp mang lại trải nghiệm tốt hơn cho người dùng.

2. Cách áp dụng CSS cho thẻ table để định dạng bảng

Dưới đây là một số cách áp dụng CSS để tạo nên một cái bảng đẹp và chuyên nghiệp:

• Chỉnh kích thước cho bảng và các ô bên trong bảng

Muốn thay đổi kích thước cụ thể là chiều rộng hay chiều cao cho bảng, bạn thiết lập thuộc tính width (height) cho phần tử <table>. Còn nếu chỉnh chiều rộng hay chiều cao cho ô thì ta thiết lập thuộc tính width (height) cho phần tử <th> || <td>.

Ví dụ:

<table style=”width:100%;height:300px”>
    <tr>
        <td style=”width:70%;”>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . .</td>
        <td>. . . . . . . . .</td>
        <td style=”height:200px”>. . . . . . . . .</td>
    </tr>
</table>

• Cách tạo đường viền và các ô bên trong bảng

Để tạo đường viền cho bảng, bạn sử dụng thuộc tính border cho phần tử <table>. Để tạo đường viền cho ô tiêu đề, bạn chọn thuộc tính border cho phần tử <th>. Còn muốn tạo đường viền cho ô bình thường, bạn thiết lập thuộc tính border cho phần tử <td>.

Ví dụ: 

table{
    border:1px solid black;
}
th{
    border:1px solid black;
}
td{
    border:1px solid black;
}

• Cách gộp các đường viền lại với nhau

Dùng thuộc tính border, bạn sẽ thiết lập đường viền cho các phần tử <table>, <th>, <td> kết quả nhận được là mỗi phần tử sẽ có một cái đường viền riêng biệt. Trường hợp, bạn không thích thì có thể tùy chỉnh lại bằng cách thiết lập thuộc tính border-collapse với giá trị collapse cho phần tử <table> để gộp các đường viền bên trong bảng lại với nhau.

Ví dụ: 

table, th, td{
    border:1px solid black;
}
table{
    border-collapse:collapse;
}

• Kiểm soát khoảng cách giữa đường viền và nội dung 

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng bằng cách áp dụng CSS, bạn dùng thuộc tính padding trên các phần tử < td > và < th >:

Ví dụ:

th, td {
  padding: 15px;
  text-align: left;
}

• Chỉnh màu nền cho bảng và các ô bên trong bảng

Bạn sử dụng thuộc tính background-color cho phần tử <table> để chỉnh màu nền cho toàn bộ bảng. Để chỉnh màu nền cho tất cả ô trên hàng thì bạn thiết lập thuộc tính background-color cho phần tử <tr>.

Ngoài ra, để chỉnh màu nền cho một ô thì bạn sử dụng thuộc tính background-color cho phần tử <th> || <td>.

Ví dụ: 

<table style=”background-color:yellow”>
    <tr style=”background-color:skyblue”>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
      </tr>
      <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
      </tr>
      <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td style=”background-color:red”>. . . . . . . . . . . .</td>
    </tr>
</table>

• Tạo vùng đệm bên trong ô

Muốn tạo vùng đệm bên trong một ô, bạn thiết lập thuộc tính padding cho ô đó. Được biết, việc sử dụng thuộc tính padding để thiết lập vùng đệm cho một ô cũng tương tự như khi dùng thuộc tính padding để thiết lập vùng đệm cho một phần tử thông thường.

Ví dụ:

<table>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
    </tr>
    <tr>
        <td>. . . . . . . . . . . .</td>
        <td>. . . . . . . . . . . .</td>
        <td style=”padding:40px 0px 0px 80px”>. . . . . . . . . . . .</td>
    </tr>
</table>

• Vị trí tiêu đề bảng

Cách áp dụng CSS để xác định vị trí tiêu đề với các giá trị: top ở trên, bottom ở dưới bảng, bạn cần dùng thuộc tính caption-side.

Ví dụ:

<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>

Thực tế cho thấy, với cách áp dụng CSS cho bảng thông qua các thuộc tính sẽ giúp nó trở nên thân thiện với người dùng hơn. Mong rằng những thông tin chia sẻ trên đây của FUNiX, sẽ giúp ích cho bạn trong việc định dạng bảng. Chúc bạn thành công!

Phạm Thị Thanh Ngọc