CSS Table – Cách tạo Bảng trong CSS chi tiết

CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn ngữ định dạng được sử dụng để thiết kế giao diện cho các trang web. CSS cho phép bạn thay đổi kiểu và cách hiển thị của các thành phần HTML, bao gồm cả bảng.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Table là gì ?

Bảng là một thành phần HTML rất phổ biến trong các trang web. Bảng giúp chúng ta hiển thị thông tin dưới dạng bảng để tiện cho người dùng xem. CSS Table là một công cụ hỗ trợ để thiết kế giao diện bảng theo ý muốn của người thiết kế.

CSS Table là một bộ thuộc tính CSS được sử dụng để tạo kiểu cho bảng trong HTML. Nó cho phép bạn tùy chỉnh từng phần tử trong bảng như table, th, td… để có được giao diện bảng đẹp và chuyên nghiệp hơn.

Hướng dẫn CSS Table

CSS Table là một tập hợp các thuộc tính CSS được sử dụng để định dạng bảng. CSS Table cho phép bạn tạo các bảng đẹp mắt và dễ đọc.

CSS Table Border

Thuộc tính border trong CSS được sử dụng để tạo đường viền cho bảng, th, td tags trong HTML. CSS Table Border có thể được sử dụng để tạo ra các đường viền khác nhau cho bảng.

Đặc điểm:

• Border có thể được đặt cho bảng, th và td tags.
• Border có thể có nhiều kiểu khác nhau như solid, dotted, dashed…
• Giá trị của border có thể được thiết lập bằng số nguyên hoặc các giá trị khác.

Lời khuyên: Nên sử dụng Border để tạo đường viền cho bảng, hiển thị thông tin dưới dạng chuyên nghiệp hơn.

CSS Table Border Collapse

Thuộc tính border-collapse trong CSS được sử dụng để thu gọn tất cả các đường viền của các phần tử trong bảng thành một đường viền duy nhất.

Đặc điểm:

• Thu gọn tất cả các đường viền của các phần tử trong bảng.
• Chỉ định một loại đường viền.

Lời khuyên: Sử dụng border-collapse để làm cho bảng trông gọn gàng và chuyên nghiệp hơn.

CSS Table Padding

Thuộc tính padding trong CSS được sử dụng để thêm khoảng đệm vào các phần tử trong bảng.

Đặc điểm:

• Thiết lập khoảng đệm cho table header và table data.
• Được sử dụng để tạo khoảng trống giữa đường viền và nội dung của các phần tử trong bảng.

Lời khuyên: Sử dụng padding để tạo khoảng cách giữa nội dung và đường viền của các phần tử trong bảng.

CSS Table: Styling even and odd cells

CSS Table cho phép bạn tùy chỉnh kiểu dáng cho các phần tử trong bảng. Việc tô màu các cell theo thứ tự chẵn lẻ là một cách phổ biến để làm cho bảng trông đẹp hơn.

Đặc điểm:

• Thiết lập kiểu dáng cho các cell theo thứ tự chẵn lẻ.
• Thay đổi màu nền và màu chữ trong phần tử <th>.

Lời khuyên: Tùy chỉnh kiểu dáng cho các cell sẽ giúp bảng trông đẹp và chuyên nghiệp hơn.

Ví dụ thực tế CSS Table

Dưới đây là một số ví dụ về cách sử dụng CSS Table:

Tạo các bảng cơ bản

CSS Table có thể được sử dụng để tạo các bảng cơ bản bao gồm các hàng và cột.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Table để tạo một bảng cơ bản:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Trong ví dụ này, một bảng cơ bản được tạo bằng cách sử dụng CSS Table. Bảng bao gồm hai hàng và hai cột.

Tạo các bảng tùy chỉnh

CSS Table cũng có thể được sử dụng để tạo các bảng tùy chỉnh với các kích thước và kiểu khác nhau.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Table để tạo một bảng tùy chỉnh:

<table>
  <tr>
    <th style="background-color: #ccc;">Header 1</th>
    <th style="background-color: #ddd;">Header 2</th>
  </tr>
  <tr>
    <td style="padding: 10px; text-align: center;">Row 1, Cell 1</td>
    <td style="padding: 10px; text-align: center;">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td style="padding: 10px; text-align: center;">Row 2, Cell 1</td>
    <td style="padding: 10px; text-align: center;">Row 2, Cell 2</td>
  </tr>
</table>

Trong ví dụ này, một bảng tùy chỉnh được tạo bằng cách sử dụng CSS Table. Bảng bao gồm hai hàng và hai cột. Các hàng và cột có màu nền khác nhau và các ô có màu nền và căn chỉnh khác nhau.

Bên dưới là ví dụ với HTML chi tiết:

<!DOCTYPE>
<html>  
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
table#alter tr:nth-child(even) {  
    background-color: #eee;  
}  
table#alter tr:nth-child(odd) {  
    background-color: #fff;  
}  
table#alter th {  
    color: white;  
    background-color: gray;  
}  
</style>  
</head>
<body>  
<table id="alter">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>   
</body>
</html>

Ưu và Nhược điểm CSS Table

Ưu điểm

• Giúp thiết kế bảng dễ dàng hơn, tạo ra giao diện bảng chuyên nghiệp.
• Cho phép tùy chỉnh kiểu dáng cho từng phần tử trong bảng.
• Tạo ra đường viền, khoảng trống giữa các phần tử trong bảng để hiển thị thông tin rõ ràng hơn.

Nhược điểm

• Không hỗ trợ tối ưu hóa cho các thiết bị di động vì nó yêu cầu màn hình có kích thước lớn để hiển thị đầy đủ thông tin của bảng.
• Có thể gây khó khăn khi thiết kế bảng với số lượng dữ liệu lớn.

Lời khuyên CSS Table

• Sử dụng CSS Table để tạo ra giao diện bảng chuyên nghiệp hơn.
• Sử dụng các thuộc tính của CSS Table để thiết kế bảng dễ dàng hơn, như set border cho bảng hoặc padding cho table header và table data.
• Chọn màu sắc phù hợp để tạo ra giao diện bảng đẹp mắt hơn.