CSS Tables

Posted on by mtoplistChuyên mục:Top List

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 width và height .

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


table {
width: 100%;
}

th {
height: 50px;
}

FirstnameLastnameSavingsPeterGriffin$100LoisGriffin$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;
}

FirstnameLastnameSavingsPeterGriffin$100LoisGriffin$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;
}

FirstnameLastnameSavingsPeterGriffin$100LoisGriffin$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;}

FirstnameLastnameSavingsPeterGriffin$100LoisGriffin$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;}

FirstnameLastnameSavingsPeterGriffin$100LoisGriffin$150MarkCubert$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” ).

mtoplist