Bài 23: Cách sử dụng Tables trong css

Cách sử dụng Tables trong css

Trong CSS, bảng (table) được sử dụng để định dạng và trình bày các dữ liệu theo kiểu bảng. Để sử dụng CSS để định dạng bảng, chúng ta có thể sử dụng các thuộc tính sau:

1. border-collapse: định dạng cách hiển thị và gộp các đường viền của bảng.

Ví dụ:

table {
  border-collapse: collapse; /* Đường viền của bảng được gộp lại */
}

2. border-spacing: khoảng cách giữa các ô của bảng.

Ví dụ:

table {
  border-spacing: 10px; /* Các ô của bảng được cách nhau 10px */
}

3. border: định dạng kiểu và kích thước của đường viền của bảng.

Ví dụ:

table {
  border: 1px solid black; /* Đường viền của bảng có độ rộng 1px và là đường viền đơn màu đen */
}

4. background-color: định dạng màu nền cho bảng.

Ví dụ:

table {
  background-color: #f2f2f2; /* Màu nền của bảng là màu xám nhạt (#f2f2f2) */
}

5. text-align: định dạng căn chỉnh nội dung trong các ô của bảng.

Ví dụ:

td {
  text-align: center; /* Nội dung các ô trong bảng được căn giữa */
}

6. vertical-align: định dạng căn chỉnh theo chiều dọc cho nội dung trong các ô của bảng.

Ví dụ:

td {
  vertical-align: middle; /* Nội dung các ô trong bảng được căn giữa theo chiều dọc */
}

7. padding: định dạng khoảng cách giữa nội dung và đường viền của các ô trong bảng.

Ví dụ:

td {
  padding: 10px; /* Khoảng cách giữa nội dung và đường viền của các ô là 10px */
}

Với các thuộc tính này, chúng ta có thể tùy chỉnh và trình bày bảng theo ý muốn của mình.