NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 1 tháng 4, 2018

Tự 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:

Nguồn: Lớp học vi tính .COM