Trong CSS, bạn có thể dễ dàng định dạng bảng để làm cho dữ liệu hiển thị gọn gàng và chuyên nghiệp hơn. Thuộc tính border-collapse giúp loại bỏ khoảng cách giữa các đường viền, trong khi border-spacing điều chỉnh khoảng cách giữa các ô. Bạn có thể sử dụng text-align để căn chỉnh nội dung trong ô, background-color để thay đổi màu nền, và hover để tạo hiệu ứng khi di chuột. Ngoài ra, nth-child hỗ trợ làm nổi bật các hàng chẵn hoặc lẻ, giúp bảng dễ nhìn và trực quan hơn.
Cách định dạng cho một cái bảng trong CSS
| STT | Họ tên | Ngày sinh |
|---|---|---|
| 1 | Nguyễn Hoàng Anh | 23/11/1992 |
| 2 | Nguyễn Thị Thùy Anh | 12/12/1994 |
| 3 | Hoàng Hiếu Dương | 07/07/1993 |
| 4 | Hoàng Tiến Đạt | 16/01/1994 |
| 5 | Lê Quang Đạ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.
| STT | Mã thẻ SV | Họ tên | Ngày sinh | Giới tính | Quê quán | Lớp |
|---|---|---|---|---|---|---|
| 1 | 12A10010151 | Nguyễn Hoàng Anh | 23/11/1992 | Nam | Cần Thơ | 12A1 |
| 2 | 12A10010007 | Nguyễn Thị Thùy Anh | 12/12/1994 | Nữ | Vĩnh Long | 12A1 |
| 3 | 12A10010184 | Hoàng Hiếu Dương | 07/07/1993 | Nam | Sóc Trăng | 12A1 |
| 4 | 12A10010154 | Hoàng Tiến Đạt | 16/01/1994 | Nam | Hậu Giang | 12A1 |
| 5 | 12A10010160 | Lê Quang Đạt | 10/12/1994 | Nam | Bạc Liêu | 12A1 |
Cách tạo đường viền cho bảng & các ô bên trong bảng
– Để tạo đường viền cho bảng thì chúng ta thiết lập thuộc tính border cho phần tử <table>
– Để tạo đường viền cho ô tiêu đề thì chúng ta thiết lập thuộc tính border cho phần tử <th>
– Để tạo đường viền cho ô bình thường thì chúng ta thiết lập thuộc tính border cho phần tử <td>
Ví dụ:
| Họ tên | Giới tính | Quê quán |
|---|---|---|
| Trần Anh Đức | Nam | Cần Thơ |
| Kiều Thị Thu Hằng | Nữ | Vĩnh Long |
| Dương Kim Thương | Nam | Trà Vinh |
Tạo đường viền cho bảng.
Tạo đường viền cho ô tiêu đề.
Tạo đường viền cho ô bình thường.
table{
border:1px solid black;
}
th{
border:1px solid black;
}
td{
border:1px solid black;
}Cách gộp các đường viền lân cận lại với nhau
Khi chúng ta sử dụng thuộc tính border để thiết lập đường viền cho các phần tử <table>, <th>, <td> thì mặc định mỗi phần tử đó sẽ có một cái đường viền riêng biệt. Tuy nhiên, nếu các bạn không thích điều này thì các bạn có thể tùy chỉnh lại bằng cách thiết lập thuộc tính border-collapse với giá trị collapse cho phần tử <table> để gộp các đường viền lân cận bên trong cái bảng lại với nhau (hoặc giá trị separate để giữ nguyên đường viền của các phần tử).
Ví dụ:
| Họ tên | Giới tính | Quê quán |
|---|---|---|
| Trần Anh Đức | Nam | Cần Thơ |
| Kiều Thị Thu Hằng | Nữ | Vĩnh Long |
| Dương Kim Thương | Nam | Trà Vinh |
Gộp các đường viền lân cận bên trong cái bảng lại với nhau
table, th, td{
border:1px solid black;
}
table{
border-collapse:collapse;
}Chỉnh màu nền cho bảng hoặc các ô bên trong bảng
– Để chỉnh màu nền cho nguyên cái bảng thì ta thiết lập thuộc tính background-color cho phần tử <table>
– Để chỉnh màu nền cho tất cả ô trên hàng thì ta thiết lập thuộc tính background-color cho phần tử <tr>
– Để chỉnh màu nền cho một ô thì ta thiết lập thuộc tính background-color cho phần tử <th> || <td>
Ví dụ:
<table style="background-color:yellow">
<tr style="background-color:skyblue">
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td style="background-color:red">. . . . . . . . . . . .</td>
</tr>
</table>Thiết lập vùng đệm bên trong ô
Để thiết lập vùng đệm bên trong một ô thì chúng ta thiết lập thuộc tính padding cho ô đó.
Lưu ý: Cách sử dụng thuộc tính padding để thiết lập vùng đệm cho một ô cũng giống như cách sử dụng thuộc tính padding để thiết lập vùng đệm cho một phần tử thông thường.
Ví dụ:
<table>
<tr>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . . . . .</td>
<td>. . . . . . . . . . . .</td>
<td style="padding:40px 0px 0px 80px">. . . . . . . . . . . .</td>
</tr>
</table>Chỉnh kích thước cho bảng hoặc các ô bên trong bảng
– Để chỉnh chiều rộng (chiều cao) cho bảng thì ta thiết lập thuộc tính width (height) cho phần tử <table>
– Để chỉnh chiều rộng (chiều cao) cho ô thì ta thiết lập thuộc tính width (height) cho phần tử <th> || <td>
Ví dụ:
<table style="width:100%;height:300px">
<tr>
<td style="width:70%;">. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
</tr>
<tr>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td style="height:200px">. . . . . . . . .</td>
</tr>
</table>– Lưu ý:
- Đối với các ô được xếp chung một cột, chiều rộng của các ô sẽ được tính dựa theo chiều rộng của ô được thiết lập thuộc tính width với giá trị lớn nhất.
- Đối với các ô được xếp chung một hàng, chiều cao của các ô sẽ được tính dựa theo chiều cao của ô được thiết lập thuộc tính height với giá trị lớn nhất.
Ví dụ:
<table>
<tr>
<td style="width:200px">. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
</tr>
<tr>
<td style="width:300px">. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
</tr>
<tr>
<td style="width:100px">. . . . . . . . .</td>
<td>. . . . . . . . .</td>
<td>. . . . . . . . .</td>
</tr>
</table>
<p>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)</p>Các thuộc tính được dùng để định dạng cho bảng
– Dưới đây là một số thuộc tính khác thường được áp dụng vào việc định dạng cho bảng.
(các bạn vui lòng bấm vào hình để xem hướng dẫn chi tiết về cách sử dụng của từng thuộc tính)
| border-spacing | – Thuộc tính này dùng để thiết lập khoảng cách nằm giữa mỗi hai ô liền kề. |
| caption-side | – Thuộc tính này dùng để thiết lập vị trí tiêu đề của cái bảng. |
| empty-cells | – Thuộc tính này dùng để tùy chỉnh việc hiển thị hay ẩn một ô có nội dung rỗng. |
| text-align | – Thuộc tính này dùng để canh lề cho văn bản bên trong ô (theo chiều ngang) |
| vertical-align | – Thuộc tính này dùng để canh lề cho văn bản bên trong ô (theo chiều dọc) |
Giới thiệu thêm một số kiểu định dạng cho bảng
Bảng chỉ chứa các đường kẻ ngang
| STT | Họ tên | Ngày sinh | Giới tính | Quê 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ữ | Sóc Trăng |
| 4 | Dương Kim Thương | 16/11/1990 | Nam | Trà Vinh |
| 5 | Mai Đức Hiếu | 18/06/1989 | Nam | Hậu Giang |
Ví dụ:
table, th, td{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
table{
border-collapse:collapse;
}Hàng đổi màu khi bị dí con chuột vào
| STT | Họ tên | Ngày sinh | Giới tính | Quê 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ữ | Sóc Trăng |
| 4 | Dương Kim Thương | 16/11/1990 | Nam | Trà Vinh |
| 5 | Mai Đức Hiếu | 18/06/1989 | Nam | Hậu Giang |
Ví dụ:
table, th, td{
border:1px solid #ccc;
}
table{
border-collapse:collapse;
}
tr:hover{
background-color:#ddd;
cursor:pointer;
}Bảng có màu xen kẻ
| STT | Họ tên | Ngày sinh | Giới tính | Quê 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ữ | Sóc Trăng |
| 4 | Dương Kim Thương | 16/11/1990 | Nam | Trà Vinh |
| 5 | Mai Đức Hiếu | 18/06/1989 | Nam | Hậu Giang |
Ví dụ:
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;
}Bảng responsive
– Thông thường, khi chiều rộng của cái bảng lớn hơn chiều rộng của phần tử chứa nó thì mặc định cái bảng sẽ bị tràn ra khỏi phần tử (điều đó gây mất thẩm mỹ đối với trang web)
| STT | Họ tên | Ngày sinh | Giới tính | Quê 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ữ | Sóc Trăng |
| 4 | Dương Kim Thương | 16/11/1990 | Nam | Trà Vinh |
| 5 | Mai Đức Hiếu | 18/06/1989 | Nam | Hậu Giang |
– Để khắc phục tình trạng này thì chúng ta cần phải thiết lập thuộc tính overflow-x với giá trị là auto cho phần tử chứa cái bảng.
| STT | Họ tên | Ngày sinh | Giới tính | Quê 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ữ | Sóc Trăng |
| 4 | Dương Kim Thương | 16/11/1990 | Nam | Trà Vinh |
| 5 | Mai Đức Hiếu | 18/06/1989 | Nam | Hậu Giang |
Ví dụ:
#father{
width:400px;
overflow:auto;
}
table{
width:600px;
}– Thuộc tính border-spacing dùng để thiết lập khoảng cách nằm giữa mỗi hai ô liền kề.
– Cú pháp:
border-spacing: value;– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| length1 length2 | – Chỉ định cụ thể khoảng cách nằm giữa mỗi hai ô liền bằng cặp giá trị length1 length2.
– Trong đó:
– Lưu ý: Nếu chúng ta chỉ xác định một giá trị length thì nó sẽ đại diện cho cả length1 & length2 |
Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính border-spacing có giá trị là 0px) |
|
| inherit | – Kế thừa giá trị thuộc tính border-spacing từ phần tử cha của nó. |
– Thông thường, khi chúng ta sử dụng thẻ <caption> để tạo tiêu đề cho cái bảng thì mặc định tiêu đề sẽ nằm phía trên cái bảng.
– Từ đây, thuộc tính caption-side được dùng để thiết lập lại vị trí của tiêu đề.
– Cú pháp:
caption-side: value;– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| top | – Tiêu đề sẽ nằm phía trên cái bảng. | Xem ví dụ |
| bottom | – Tiêu đề sẽ nằm phía dưới cái bảng. | |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính caption-side có giá trị là top) |
|
| inherit | – Kế thừa giá trị thuộc tính caption-side từ phần tử cha của nó. |
– Thuộc tính empty-cells dùng để tùy chỉnh việc hiển thị hay ẩn một ô có nội dung rỗng.
– Cú pháp:
empty-cells: value;– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| show | – Các ô có nội dung rỗng được phép hiển thị. | Xem ví dụ |
| hide | – Các ô có nội dung rỗng bị ẩn đi. | |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính empty-cells có giá trị là show) |
|
| inherit | – Kế thừa giá trị thuộc tính empty-cells từ phần tử cha của nó. |
– Thuộc tính text-align được dùng để canh lề cho văn bản nằm ở bên trong ô (theo chiều ngang)
– Cú pháp:
text-align: value;– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
| left | – Văn bản sẽ được canh nằm bên trái. | Xem ví dụ |
| center | – Văn bản sẽ được canh nằm ở giữa. | |
| right | – Văn bản sẽ được canh nằm bên phải. | |
| justify | – Văn bản sẽ được canh đều hai bên trái phải. |
– Thuộc tính vertical-align được dùng để canh lề cho văn bản nằm ở bên trong ô (theo chiều dọc)
– Cú pháp:
vertical-align: value;– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| top | – Văn bản sẽ được canh nằm ở trên. | Xem ví dụ |
| middle | – Văn bản sẽ được canh nằm ở giữa. | |
| bottom | – Văn bản sẽ được canh nằm ở dưới. |
