Khóa học CSS - Bài 15 - Định dạng bảng

 Quay về MỤC LỤC TỰ HỌC CSS

1. Định dạng đường viền

Ta dùng thuộc tính border để định dạng đường viền của bảng.

Ví dụ:

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

và các giá trị HTML trong phần body

<table>

<tr>

<th>Lớp</th>

<th>Tên Sinh Viên</th>

</tr>

<tr>

<td>TH001</td>

<td>Minh</td>

</tr>

<tr>

<td>TH002</td>

<td>Hùng</td>

</tr>

</table>

Chú ý: đường viền của thẻ th và td là riêng biệt.

2. Thuộc tính collapse

Thuộc tính border-collapse dùng để nhập thành đường viền đơn.

Ví dụ:

Dùng lại ví dụ trên nhưng thêm thuộc tính sau:

table {
    border-collapse: collapse;
}

Nếu bạn chỉ muốn tạo 01 đường viền bao xung quanh bảng-> định dạng chỉ thuộc tính table.

Ví dụ:

table {
    border: 1px solid black;
}

3. Bề rộng và Chiều cao

Bề rộng và Chiều cao của bảng được định bằng thuộc tính width và height.

Ví dụ:

table { width: 100%;}

th { height: 50px;}

4. Canh lề theo chiều ngang

Ta dùng thuộc tính text-align trong thẻ th hoặc td.

Ví dụ:

th {
    text-align: left;
}

5. Canh lề theo chiều dọc

Ta dùng thuộc tính vertical-align cho thẻ th và td.

Ví dụ:

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

6. Canh lề Thụt

Ta dùng thuộc tính padding trong thẻ th,td để xác định khoảng cách giữa nội dung bảng và đường viền.

Ví dụ:

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

7. Định dạng đường ngang dưới

Ta dùng thuộc tính border-bottom đối với thẻ th,td.

Ví dụ:

th, td {
    border-bottom: 1px solid #ddd;
}

table {
    border-collapse: collapse;
}

8. Thuộc tính HOVER

Dùng thuộc tính :hover đối với thẻ tr để tô sáng dòng khi rê chuột lên.

Ví dụ:

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

9. Tạo dòng màu xen kẽ (strip)

Để tạo hiệu ứng dòng màu xen kẽ (zebra strip) ta dùng thuộc tính nth-child(even/odd) đối với dòng chẵn hay lẻ.

Ví dụ:

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

10. Định dạng màu

Định màu nền hoặc chữ cho thẻ th,td như các thẻ HTML khác.

Ví dụ:

th {
    background-color: #4CAF50;
    color: white;
}

11. Định dạng RESPONSIVE

Ta thêm 01 thẻ <div style="overflow-x:auto;"> bao bên ngoài thẻ <table> để tạo scrollbar theo chiều ngang trong trường hợp dữ liệu của bảng bị tràn (trục ngang)

Nếu tạo scrollbar theo chiều dọc ta dùng: overflow-y:auto;

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

 Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm