- Để 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ử ||
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
Xem ví dụ
- 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.
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
. . . . . . . . . |
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]
Xem ví dụ - 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]
|
7] Giới thiệu thêm một số kiểu định dạng cho bảng7.1] Bảng chỉ chứa các đường kẻ ngang
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ữ
| 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
|
table, th, td{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
table{
border-collapse:collapse;
}
Xem ví dụ 7.2] Hàng đổi màu khi bị dí con chuột vào
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ữ
| 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
|
table, th, td{
border:1px solid #ccc;
}
table{
border-collapse:collapse;
}
tr:hover{
background-color:#ddd;
cursor:pointer;
}
Xem ví dụ 7.3] Bảng có màu xen kẻ
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ữ
| 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
|
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;
}
Xem ví dụ 7.4] 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]
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ữ
| 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.
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ữ
| 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
|
#father{
width:400px;
overflow:auto;
}
table{
width:600px;
}
Xem ví dụ - 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ị:
length2 length2
| - Chỉ định cụ thể khoảng cách nằm giữa mỗi hai ô liền bằng cặp giá trị length2 length2. - Trong đó: - length2 là khoảng cách nằm giữa mỗi hai ô liền kề theo chiều ngang.
- length2 là khoảng cách nằm giữa mỗi hai ô liền kề theo chiều dọc.
- Lưu ý: Nếu chúng ta chỉ xác định một giá trị length thì nó sẽ đại diện cho cả length2 & 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ẻ để 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.
|
|