Bảng trong CSS

Giao diện của bảng trong HTML có thể được cải thiện đáng kể với CSS.

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

Để đị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ụ

Last modified: Wednesday, 6 November 2019, 6:24 PM