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

 


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

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

Có thể bạn sẽ thích…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Share via
Copy link
Powered by Social Snap