Bảng CSS
Giao diện của một bảng HTML có thể được cải thiện đáng kể với CSS:
| Công ty | Tiếp xúc | Quốc gia |
|---|---|---|
| Hộp thức ăn của Alfred | Maria Anders | nước Đức |
| Siêu thị của Berglund | Christina Berglund | Thụy Điển |
| Trung tâm mua sắm Montezuma | Francisco Chang | Mexico |
| buôn bán nghiêm túc | Roland Mendel | Áo |
| Island Trading | Helen Bennett | Vương quốc Anh |
| Thức ăn hoàng gia | Philip Cramer | nước Đức |
| Bacchus Winecellars cười | Yoshi Tannamuri | Canada |
| Kho lương thực thu thập | Giovanni Rovelli | Nước Ý |
Đường viền bảng
Để chỉ định đường viền bảng trong CSS, hãy sử dụng thuộc bordertính.
Ví dụ dưới đây chỉ định một đường viền màu đen cho các phần tử <table>, <th> và <td>:
Thí dụ
table, th, td {
border: 1px solid black;
}
Bảng toàn chiều rộng
Bảng trên có vẻ nhỏ trong một số trường hợp. Nếu bạn cần một bảng kéo dài toàn bộ màn hình (toàn chiều rộng), hãy thêm width: 100%vào phần tử <table>:
Thí dụ
table {
width: 100%;
}
Đường viền đôi
Lưu ý rằng bảng trong các ví dụ trên có hai đường viền. Điều này là do cả bảng và các phần tử <th> và <td> đều có đường viền riêng biệt.
Để loại bỏ các đường viền đôi, hãy xem ví dụ bên dưới.
Thu gọn đường viền bảng
Thuộc border-collapsetính đặt liệu các đường viền bảng có được thu gọn thành một đường viền duy nhất hay không:
Thí dụ
table
{
border-collapse: collapse;
}
Nếu bạn chỉ muốn có đường viền xung quanh bảng, chỉ xác định thuộc bordertính cho <table>:
Thí dụ
table
{
border: 1px solid black;
}