Định dạng bảng trong CSS

Định dạng bảng trong CSS

Hãy tham khảo bài viết dưới đây của Mytour để tìm hiểu các thuộc tính định dạng bảng trong CSS. Ngoài ra, bạn cũng có thể xem thêm các bài viết khác trên Mytour để nắm vững hơn về các thuộc tính văn bản trong CSS nhé.

Các thuộc tính định dạng bảng trong CSS

1. Đặc điểm của đường viền

Để tạo đường viền cho bảng trong CSS, ta sử dụng thuộc tính border.

Ví dụ:

Lưu ý: Trong ví dụ này, chúng ta áp dụng đường viền kép. Lý do là cả các thẻ th và td đều có đường viền.

2. Thuộc tính border-collapse

Thuộc tính border-collapse trong CSS dùng để quyết định liệu các đường viền trong bảng có được gộp lại thành một đường viền duy nhất hay không.

Ví dụ:

Nếu muốn tạo đường viền xung quanh bảng, chúng ta chỉ cần đặt thuộc tính border cho thẻ 'table':

Ví dụ:

3. Thiết lập chiều rộng và chiều cao

Để đặt chiều rộng và chiều cao cho bảng, chúng ta dùng các thuộc tính width và height.

Ví dụ: Trong ví dụ sau, ta đặt chiều rộng của bảng là 100% và chiều cao của các thẻ 'th' là 50px:

4. Căn chỉnh văn bản

Thuộc tính text-align dùng để căn chỉnh nội dung trong các thẻ 'th' hoặc 'td' theo chiều ngang. Giá trị của thuộc tính này có thể là left, right hoặc center.

Mặc định, nội dung của thẻ 'th' được căn giữa và nội dung của thẻ 'td' được căn trái.

Ví dụ: Dưới đây là một ví dụ về việc căn chỉnh văn bản trong các thẻ 'th':

5. Căn chỉnh theo chiều dọc

Thuộc tính vertical-align dùng để căn chỉnh nội dung trong thẻ 'th' hoặc 'td' theo chiều dọc.

Mặc định, nội dung của bảng được căn giữa theo chiều dọc (cho cả thẻ 'th' và 'td').

Ví dụ:

6. Thuộc tính Padding của Bảng

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, chúng ta sử dụng thuộc tính padding trong các thẻ 'td' và 'th'.

Một Ví Dụ:

7. Thuộc Tính Đường Viền Phía Dưới

Thêm thuộc tính border-bottom vào các thẻ 'th' và 'td' để tạo đường kẻ ngang.

Một Ví Dụ:

8. Sử Dụng Selector :hover Trong CSS Đối Với Bảng

Dùng selector :hover trên thẻ 'tr' để làm nổi bật các hàng khi người dùng di chuột qua.

Một Ví Dụ:

9. Tạo Bảng Sọc Trong CSS

Để tạo hiệu ứng bảng sọc trong CSS, ta sử dụng selector nth-child() và thêm background-color cho các hàng lẻ hoặc chẵn trong bảng.

Ví Dụ:

10. Đặt Màu Nền Cho Bảng

Ví Dụ:

Dưới đây là một ví dụ minh họa về cách đặt màu nền và màu văn bản cho các phần tử thẻ 'th'.

11. Tạo Bảng Đáp Ứng

Bảng đáp ứng sẽ tự động hiển thị thanh cuộn ngang nếu kích thước màn hình nhỏ hơn nội dung của bảng.

Thêm một phần tử container (như là một thẻ div) với thuộc tính overflow-x:auto xung quanh thẻ 'table' để tạo Bảng Đáp Ứng.

Dưới đây là một ví dụ minh họa:

12. Các Thuộc Tính Định Dạng Bảng Trong CSS

Mô tả các thuộc tính:

Thuộc tính border: Thiết lập tất cả các thuộc tính border trong một lệnh.

border-collapse: Xác định liệu có gộp các đường viền trong bảng hay không.

border-spacing: Đặt khoảng cách giữa các đường viền của các ô liền kề.

caption-side: Xác định vị trí của chú thích bảng.

empty-cells: Xác định liệu có hiển thị đường viền và màu nền trên các ô trống trong bảng hay không.

table-layout: Đặt bố cục được sử dụng trong bảng.

Bài học trên đây đã giới thiệu về các thuộc tính định dạng bảng trong CSS. Trong các bài học tiếp theo, Mytour sẽ tiếp tục giới thiệu về thuộc tính Văn bản trong CSS.