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

Chia sẻ kiến thức 30/12/2021

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

Tạo bảng chuyên nghiệp bằng cách áp dụng CSS cho thẻ table
Tạo bảng chuyên nghiệp bằng cách áp dụng CSS

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

Hướng dẫn cách áp dụng CSS cho thẻ table  2
Cách tạo đường viền cho bảng với CSS
  • 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>

Hướng dẫn cách áp dụng CSS cho thẻ table  3
Thực hiện chỉnh màu nền cho bảng với CSS
  • 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

Bình luận (
0
)

Bài liên quan

5 môn học trong chương trình Blockchain Developer tại FUNiX có gì thú vị?

Tại đây, anh Nguyễn Hải Nam – Giám đốc Trung tâm Công nghệ Chuyên sâu xSeries đã có những chia sẻ cụ thể về chương trình đào tạo Blockchain Developer của FUNiX. Theo đó, khi tham gia chương trình này, các học...

Bí kíp giúp mẹ đồng hành cùng con gái học lập trình online

Có mặt trong buổi Ngày hội phụ huynh của FUNiX, chị Vũ Thị Vân - phụ huynh nữ sinh Nguyễn Vũ Khánh Linh của FUNiX đã tiết lộ những bí kíp giúp người mẹ đồng hành cùng con gái học...

Kinh nghiệm đồng hành cùng con học trực tuyến của phụ huynh FUNiX

Trong sự kiện “Ngày phụ huynh” đầu tiên của FUNiX diễn ra tối 15/1, ba vị phụ huynh FUNiX FUNiX đã có cuộc giao lưu trực tuyến thú vị, chia sẻ những kinh nghiệm đồng hành cùng con trong việc...

Những phụ huynh có con “mê tít” chương trình công nghệ thông tin online

Con khẳng định: “Không thấy học công nghệ thông tin online ở FUNiX có bất cứ nhược điểm gì. Cháu hài lòng khi không phải hít bụi để đi học thêm, không phải tham gia các lớp học thêm, học...

5 phần mềm cho dev team hữu ích nên dùng trong năm 2022

Bài viết này giới thiệu một số phần mềm cho dev team hữu ích, dành cho các lập trình viên và dự án công nghệ để cải thiện hiệu suất công việc của mình.

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        

yêu cầu gọi lại