Bài 17: CSS Tables (Tạo Kiểu Cho Bảng Bằng CSS) | Tìm ở đây

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

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).