CSS Tables

21/05/2019

Bài sau » « Bài trước

Table border

Để thiết lập border cho table trong CSS ta dùng thuộc tính border. Cùng phân tích ví dụ dưới đây.

table, th, td { border: 1px solid black; }

CSS Table

Ở ví dụ trên thì table có 2 đường border. Điều đó là do table, th và td có đường border riêng biệt với nhau.

Collapse Table Borders

Thuộc tính border-collapse có nhiệm vụ thu gọn đường viền thành 1 đường. Khi đó code ở ví dụ trên ta code thêm như sau:

table { border-collapse: collapse; } table, th, td { border: 1px solid black; }

CSS Table

Nếu bạn chỉ muốn border xung quanh bên ngoài thì ta chỉ cần dùng thuộc tính border cho thẻ table.

table{ border: 1px solid black; }

Table width and height

Độ rộng và chiều cao của table được xác định bởi thuộc tính widthheight .

Ví dụ bên dưới là table có width: 100% và thẻ <th> có height: 50px 

table { width: 100%; } th { height: 50px; }

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150

Canh lề theo chiều ngang

Thuộc tính text-align dùng để canh lề theo chiều ngang (left, right or center) của thẻ <th>, <td> .

Mặc định, thẻ <th> được canh theo center, thẻ <td> được canh theo left. Xem hình ở ví dụ trên.

Canh lề theo chiều dọc

Thuộc tính vertical-align dùng để canh lề theo chiều dọc (top, bottom hoặc middle ) cho nội dung của thẻ <th>, <td> .

Mặc định, cả thẻ <th> và <td> đều được canh giữa (middle ). Ví dụ sau đây table có thẻ <td> cao 50px và verticle-align bottom :

td { height: 50px; vertical-align: bottom; }

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150

Table padding

Sử dụng thuộc tính padding cho thẻ <th>, <td> để tạo khoảng cách giữa border với content.

th, td { padding: 15px; text-align: left; }

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150

Hover table

Sử dụng thuộc tính :hover lên thẻ tr để khi hover chuột vào ta cho đổi màu nền cho nổi bật.

tr:hover {background-color: #f5f5f5;}

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150

Color table

- Sử dụng thuộc tính nth-child() và cho background-color vào thẻ tr chẵn (hoặc lẻ) để đẹp hơn. Chẳng hạn như ví dụ sau:

tr:nth-child(even) {background-color: #f2f2f2;}

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
MarkCubert$150

Responsive table

Responsive table có nghĩa là khi trên màn hình nhỏ thì sẽ có thanh scroll bar ở dưới table.

Ta chỉ cần thêm 1 thẻ DIV bọc table lại và cho thuộc tính overflow-x:auto

<div style="overflow-x:auto;" > <table> ... table content ... </table> </div>

Chú ý: Trên MAC OS, thanh scroll bar mặc định bị ẩn, chỉ hiển thị khi người dùng thao tác (kể cả khi sử dụng thuộc tính "overflow: scroll" ).

Bài sau » « Bài trước
Back to top