Bảng trong CSS

Giới thiệu

Trong bộ tài liệu học HTML thì mình đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính (border, cellspacing, cellpadding,…) dùng để định dạng cho bảng, cho nên bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp. Vì vậy, trong bài viết này mình sẽ hướng dẫn các bạn chỉnh sửa giao diện của bảng trong CSS.

Đường viền của bảng trong CSS

Để định kiểu cho đường viền (border) của bảng trong CSS, sử dụng thuộc tính border.
Ví dụ dưới đây chỉ định đường biên màu đen cho các phần tử <table>, <th>, và <td>:

Ví dụ

Lưu ý rằng bảng ở ví dụ trên có đường viền đôi. Điều này là bởi các phần tử <table>,
<th> và <td> đều có đường viền riêng biệt.

Bỏ các đường viền của bảng

Thuộc tính border-collapse thiết lập các đường viền của bảng nhập vào thành một đường viền duy nhất:

Ví dụ

Chiều rộng và chiều cao của bảng

Chiều rộng và chiều cao của một bảng được xác định bởi các thuộc tính width và height . Ví dụ dưới đây đặt chiều rộng của bảng là 100%, và chiều cao của các phần tử <th> là 50px:

Ví dụ

Căn chỉnh theo chiều ngang

Thuộc tính text-align thiết lập căn chỉnh theo chiều ngang (như trái, phải, hoặc giữa)
cho nội dung bên trong <th> hoặc <td>.
Mặc định, nội dung của các phần tử <th> được canh giữa và nội dung của các phần tử
<td> được canh trái.
Ví dụ sau văn bản trong <th> được canh lề trái:

Ví dụ

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

Thuộc tính vertical-lign dùng để thiết lập căn chỉnh theo chiều dọc (như trên, dưới,
hoặc giữa) nội dung bên trong các phần tử <th> hoặc <td>.
Mặc định, căn chỉnh theo chiều dọc nội dung trong bảng là ở giữa (middle) (cho cả <th>
và <td>).
Ví dụ sau thiết lập căn chỉnh văn bản xuống dưới (bottom) cho các phần tử <td>:

Ví dụ

Padding trong bảng

Để điều khiển khoảng cách giữa đường viền và nội dung bên trong một bảng, sử dụng
thuộc tính padding cho các phần tử <td> và <th>:

Ví dụ

Màu sắc trong bảng

Ví dụ dưới đây chỉ định màu sắc của các đường viền; màu nền và màu chữ của phần tử <th>:

Ví dụ

Kết luận

Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.