Lê Quang Đạt một ô thì ta thiết lập thuộc tính
background-color cho phần tử ||
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
. . . . . . . . . . . . |
10/12/1994 - Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính [border, cellspacing, cellpadding, . . . .] dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp.- Nhằm giúp các bạn có thể tạo ra được những chiếc bảng đẹp hơn và nhìn chuyên nghiệp hơn [giống như cái bảng bên dưới] thì ở trong bài viết này, tôi sẽ hướng dẫn các bạn cách vận dụng CSS để định dạng cho bảng.
Mã thẻ SV Giới tính 10/12/1994 - Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính [border, cellspacing, cellpadding, . . . .] dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp.- Nhằm giúp các bạn có thể tạo ra được những chiếc bảng đẹp hơn và nhìn chuyên nghiệp hơn [giống như cái bảng bên dưới] thì ở trong bài viết này, tôi sẽ hướng dẫn các bạn cách vận dụng CSS để định dạng cho bảng. Mã thẻ SV
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
10/12/1994
- Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính [border, cellspacing, cellpadding, . . . .] dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp. - - Nhằm giúp các bạn có thể tạo ra được những chiếc bảng đẹp hơn và nhìn chuyên nghiệp hơn [giống như cái bảng bên dưới] thì ở trong bài viết này, tôi sẽ hướng dẫn các bạn cách vận dụng CSS để định dạng cho bảng.
- Mã thẻ SV
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
Chiều rộng của các ô trong cột thứ nhất là 300px [vì nó là giá trị lớn nhất]
10/12/1994 - Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính [border, cellspacing, cellpadding, . . . .] dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp. - Nhằm giúp các bạn có thể tạo ra được những chiếc bảng đẹp hơn và nhìn chuyên nghiệp hơn [giống như cái bảng bên dưới] thì ở trong bài viết này, tôi sẽ hướng dẫn các bạn cách vận dụng CSS để định dạng cho bảng. để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính]
Mã thẻ SV | Giới tính
| Quê quán | Lớp
| 12A10010151 | Nam
| Cần Thơ | 12A1
| 12A10010007 | Nữ
|
Vĩnh Long 12A10010184
STTHọ tênNgày sinhNguyễn Hoàng Anh 23/11/1992 1 | Nguyễn Thị Thùy Anh | 12/12/1994 | Nguyễn Thị Thùy Anh | 12/12/1994 | 2 | Hoàng Hiếu Dương | 07/07/1993 | Hoàng Hiếu Dương | 07/07/1993 | 3 | Hoàng Tiến Đạt | 16/01/1994 | Hoàng Hiếu Dương | 12/12/1994 | 4 | Hoàng Tiến Đạt | 16/01/1994 | Nguyễn Thị Thùy Anh | 12/12/1994 | 5 | Hoàng Hiếu Dương | 07/07/1993 | Nguyễn Thị Thùy Anh | 12/12/1994 |
table, th, td{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
table{
border-collapse:collapse;
}
10/12/1994 - Trong bộ tài liệu học HTML thì tôi đã có hướng dẫn các bạn cách tạo một cái bảng rồi. Tuy nhiên, HTML chỉ hỗ trợ có một vài thuộc tính [border, cellspacing, cellpadding, . . . .] dùng để định dạng cho bảng, cho nên cái bảng sẽ nhìn rất đơn sơ, hay nói cách khác là không được đẹp.
STTHọ tênNgày sinhGiới tínhQuê quán 1 | Trần Anh Đức | 03/08/1993 | Nam | Cần Thơ | 2 | Kiều Thị Thu Hằng | 04/09/1991 | Nữ | Vĩnh Long | 3 | Vương Thị Lê Na | 06/10/1991 | Nữ | Vĩnh Long | 4 | Vương Thị Lê Na | 06/10/1991 | Nam | Cần Thơ | 5 | Kiều Thị Thu Hằng | 04/09/1991 | Nam | Cần Thơ |
table, th, td{
border:1px solid #ccc;
}
table{
border-collapse:collapse;
}
tr:hover{
background-color:#ddd;
cursor:pointer;
}
Kiều Thị Thu Hằng 04/09/1991
Nữ Vĩnh Long Ngày sinhGiới tínhQuê quán 1 | Trần Anh Đức | 03/08/1993 | Nam | Cần Thơ | 2 | Kiều Thị Thu Hằng | 04/09/1991 | Nữ | Vĩnh Long | 3 | Vương Thị Lê Na | 06/10/1991 | Nữ | Vĩnh Long | 4 | Vương Thị Lê Na | 06/10/1991 | Nam | Cần Thơ | 5 | Kiều Thị Thu Hằng | 04/09/1991 | Nam | Cần Thơ |
table, th, td{
border:1px solid #868585;
}
table{
border-collapse:collapse;
}
table tr:nth-child[odd]{
background-color:#eee;
}
table tr:nth-child[even]{
background-color:white;
}
table tr:nth-child[1]{
background-color:skyblue;
}
Kiều Thị Thu Hằng 04/09/1991 Nữ
Nữ Vĩnh Long Ngày sinhGiới tínhQuê quán 1 | Trần Anh Đức | 03/08/1993 | Nam | Cần Thơ | 2 | Kiều Thị Thu Hằng | 04/09/1991 | Nữ | Vĩnh Long | 3 | Vương Thị Lê Na | 06/10/1991 | Nữ | Vĩnh Long | 4 | Vương Thị Lê Na | 06/10/1991 | Nam | Cần Thơ | 5 | Kiều Thị Thu Hằng | 04/09/1991 | Nam | Cần Thơ |
Kiều Thị Thu Hằng overflow-x với giá trị là auto cho phần tử chứa cái bảng.
Nữ Vĩnh Long Ngày sinhGiới tínhQuê quán 1 | Trần Anh Đức | 03/08/1993 | Nam | Cần Thơ | 2 | Kiều Thị Thu Hằng | 04/09/1991 | Nữ | Vĩnh Long | 3 | Vương Thị Lê Na | 06/10/1991 | Nữ | Vĩnh Long | 4 | Vương Thị Lê Na | 06/10/1991 | Nam | Cần Thơ | 5 | Kiều Thị Thu Hằng | 04/09/1991 | Nam | Cần Thơ |
#father{
width:400px;
overflow:auto;
}
table{
width:600px;
}
Kiều Thị Thu Hằng 04/09/1991 border-spacing dùng để thiết lập khoảng cách nằm giữa mỗi hai ô liền kề. Nữ table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
} 0Vĩnh Long
Vương Thị Lê Na | 06/10/1991 Sóc Trăng - Dương Kim Thương
- 16/11/1990
Trà Vinh
| Mai Đức Hiếu | 18/06/1989 | Hậu Giang Xem ví dụ
| 7.3] Bảng có màu xen kẻ | STT
|
Họ tên 7.4] Bảng responsivecaption-side được dùng để thiết lập lại vị trí của tiêu đề. Nữ table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
} 1Vĩnh Long
Vương Thị Lê Na | 06/10/1991
| Mai Đức Hiếu | 18/06/1989 | Hậu Giang
| 18/06/1989 | Hậu Giang Xem ví dụ
| 7.3] Bảng có màu xen kẻ | STT
|
Họ tênempty-cells dùng để tùy chỉnh việc hiển thị hay ẩn một ô có nội dung rỗng. Nữ table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
} 2Vĩnh Long
Vương Thị Lê Na | 06/10/1991
| Mai Đức Hiếu | 18/06/1989 | Hậu Giang
| 18/06/1989 | Hậu Giang Xem ví dụ
| 7.3] Bảng có màu xen kẻ | STT
|
Họ têntext-align được dùng để canh lề cho văn bản nằm ở bên trong ô [theo chiều ngang] Nữ table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
} 3Vĩnh Long
Vương Thị Lê Na | 06/10/1991
| Mai Đức Hiếu | 18/06/1989 | Hậu Giang
| Xem ví dụ | 7.3] Bảng có màu xen kẻ
| STT | Họ tên
|
7.4] Bảng responsivevertical-align được dùng để canh lề cho văn bản nằm ở bên trong ô [theo chiều dọc] Nữ table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
} 4Vĩnh Long
Vương Thị Lê Na | 06/10/1991
| Mai Đức Hiếu | 18/06/1989 | Hậu Giang
| 18/06/1989 | Hậu Giang
|
|