Bảng CSS
Giao diện của bảng HTML có thể được cải thiện đáng kể bằng CSS:
Công ty | Liên hệ | Quốc gia |
---|---|---|
Alfred Futterkiste | Maria Anders | nước Đức |
Berglunds snabbköp | Christina Berglund | Thụy Điển |
Trung tâm thương mại Moctezuma | Francisco Chang | México |
Ernst Handel | Roland Mendel | Áo |
Giao dịch đảo | Helen Bennett | Vương quốc Anh |
Königlich Essen | Philip Cramer | nước Đức |
Hầm rượu Bacchus cười | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Nước Ý |
Hãy tự mình thử »
Đường viền bảng
Để chỉ định đường viền bảng trong CSS, hãy sử dụng thuộc tính border
.
Ví dụ bên dưới chỉ định đường viền liền nét cho các phần tử <table>, <th> và <td>:
Tên đầu tiên | Họ |
---|---|
Peter | Griffin |
Lois | Griffin |
Bảng có chiều rộng đầy đủ
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 trải 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>:
Tên đầu tiên | Họ |
---|---|
Peter | Griffin |
Lois | Griffin |
Đường viền đôi
Lưu ý rằng bảng trong các ví dụ trên có đường viền kép. Đ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ỏ đường viền kép, hãy xem ví dụ bên dưới.
Thu gọn viền bảng
Thuộc tính border-collapse
thiết lập xem các đường viền của bảng có nên được thu gọn thành một đường viền duy nhất hay không:
Tên đầu tiên | Họ |
---|---|
Peter | Griffin |
Lois | Griffin |
Nếu bạn chỉ muốn có đường viền quanh bảng thì chỉ xác định thuộc tính border
cho <table>:
Tên đầu tiên | Họ |
---|---|
Peter | Griffin |
Lois | Griffin |