Bài 17: CSS Tables (Tạo kiểu cho bảng bằng CSS)
Giao diện của bảng HTML có thể được cải thiện rất nhiều với CSS:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Nội dung
Thuộc tính border
Thuộc tính border được dùng để tạo đường viền cho bảng.
Ví dụ bên dưới sẽ tạo viền đen cho các phần tử <table>, <th> và <td>:
Ví dụ:
table, th, td {
border: 1px solid black;
}
Lưu ý rằng bảng trong ví dụ trên có viền kép. Điều này là do cả hai phần tử bảng và <th> và <td> có các đường viền riêng biệt.
Thuộc tính border-collapse
Thuộc tính border-collapse làm cho tất cả các đường viền của bảng gộp lại thành 1 đường viền duy nhất.
Ví dụ:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Nếu chỉ muốn 1 đường viền xung quanh bảng, bạn hãy đặt thuộc tính border cho duy nhất phần tử <table>.
Ví dụ:
table {
border: 1px solid black;
}
Thuộc tính Width và Height
Chiều rộng và chiều cao của bảng sẽ được xác định bằng thuộc tính width và height .
Ví dụ:
table {
width: 100%;
}
th {
height: 50px;
}
Thuộc tính text-align
Thuộc tính text-align thiết lập căn lề ngang (trái, pahir hoặc giữa) cho nội dung trong phần tử <th> hoặc <td>.
Theo mặc định, nội dung của các phần tử <th> được căn giữa và nội dung của các phần tử <td> được căn trái.
Ví dụ sau đây căn chỉnh văn bản trong phần tử <th>:
Ví dụ:
th {
text-align: left;
}
Thuộc tính vertical-align
Thuộc tính vertical-align dùng để căn lề dọc (như trên, dưới hoặc giữa) của nội dung trong <th> hoặc <td>.
Theo mặc định, căn chỉnh dọc của nội dung trong bảng là ở giữa (cho cả hai phần tử <th> và <td>).
Ví dụ sau đặt căn chỉnh văn bản dọc thành dưới cùng cho các phần tử <td>:
Ví dụ:
td {
height: 50px;
vertical-align: bottom;
}
Thuộc tính padding
Để kiểm soát không gian giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính padding trên các phần tử <td> và <th>:
Ví dụ:
th, td {
padding: 15px;
text-align: left;
}
Thuộc tính border-bottom
Thêm thuộc tínhborder-bottom vào <th> and <td> để tạo các vạch chia ngang.
Ví dụ:
th, td {
border-bottom: 1px solid #ddd;
}
Bộ chọn :hover
Sử dụng bộ chọn:hover vào <tr> để tạo màu cho các hàng của bảng khi di chuột qua nó:
Ví dụ:
tr:hover {
background-color: #f5f5f5;
}
Bộ chọn nth-child()
Để tạo 1 bảng kiểu sọc ngựa vằn, sử dụng bộ chọn nth-child() và thuộc tính background-color vào tất cả các hàng của bảng chẵn-even (hoặc lẻ-odd):
Ví dụ:
tr:nth-child(even) {
background-color: #f2f2f2;
}
Thuộc tính background-color và color
Ví dụ dưới đây chỉ định màu nền và màu văn bản của các phần tử <th>:
Ví dụ:
th {
background-color: #4CAF50;
color: white;
}
Responsive Table với overflow-x:auto
Với những màn hình quá nhỏ để hiển thị nội dung nó sẽ thêm vào đó 1 thanh cuộn ngang. Chính vì thế để tạo 1 bảng tương thích (responsive table) với tất cả các loại màn hình ta sử dụng ta thêm 1 phần tử container (như <div>) với overflow-x:auto xung quanh phần tử <table> để tạo sự tương thích cho nó.
Ví dụ:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Lưu ý: Trong OS X Lion (trên Mac), thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng (ngay cả khi “overflow: scroll” được đặt).
