Bảng là một công cụ hiển thị dữ liệu rõ ràng và hiệu quả. Mặc dù với các công nghệ mới [như Kendo UI], thì việc hiển thị dữ liệu bằng thẻ div thường được sử dụng nhiều hơn. Tuy nhiên, với các ứng dụng Trang web nhỏ và với lượng dữ liệu hiển thị không lớn thì việc sử dụng bảng khá thuận tiện. with eLib. VN tìm hiểu bảng trong bài viết dưới đây nhé
lục mục lục
1. Bảng trong CSS
2. Thuộc tính border-collapse
3. Độ rộng và chiều cao của bảng
4. Căn chỉnh bảng trong CSS
5. Thuộc tính padding trong CSS
6. Thuộc tính border-spacing trong CSS
7. Thuộc tính caption-side trong CSS
8. Thuộc tính ô trống trong CSS
9. Thuộc tính table-layout trong CSS
1. Bảng trong CSS
Trong khi thiết lập web, bạn có thể cần tạo rất nhiều bảng để lưu trữ, hiển thị thông tin một cách khoa học
Các bảng [bảng] thường được sử dụng để hiển thị dữ liệu, chẳng hạn như báo cáo tài chính, thống kê, kế toán…
Nhưng khi bạn tạo một bảng HTML mà không có bất kỳ thuộc tính CSS hoặc bổ sung nào, trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào
Vì vậy, bạn cần phải thực thi CSS cho bảng để mang lại trải nghiệm tốt hơn
Thuộc tính đường viền được sử dụng để thiết lập đường viền cho bảng
Thuộc tính thu gọn đường viền xác định rằng các đường viền của bảng nên được hợp nhất thành một đường viền
Thuộc tính caption-side được sử dụng trong phần tử . Theo mặc định, chúng sẽ được hiển thị ở phần bên trên của bảng. Sử dụng thuộc tính này, bạn có thể xác định vị trí hiển thị của phần tử caption này.
Thuộc tính empty-cells xác định xem có hiển thị đường viền không nếu một ô trống
Thuộc tính table-layout cho phép bạn thiết lập bố cục cho bảng
2. Thuộc tính border-collapse trong CSS
Thuộc tính này có hai giá trị thu gọn và tách biệt tương ứng với các đường viền nên được kết hợp với nhau hoặc phân biệt mọc. Ví dụ
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
Vi du gia tri collapse
Cell A
Cell B
Vi du gia tri separate
Cell A
Cell B
Kết quả là
3. Độ rộng và chiều cao của bảng trong CSS
Để xác định chiều rộng và chiều cao cho bảng, bạn sử dụng hai thuộc tính chiều rộng và chiều cao trong CSS. Hai thuộc tính này có thể nhận các giá trị là % hoặc px
Ví dụ
table {
width: 100%;
}
th {
height: 50px;
}
4. Căn chỉnh bảng trong CSS
Căn chỉnh bảng theo chiều ngang trong CSS
Bạn sử dụng thuộc tính text-align để xác định căn cứ điều chỉnh nội dung theo chiều ngang của bảng. Thuộc tính này có thể nhận các giá trị bên trái, bên phải hoặc ở giữa. Ví dụ
th {
text-align: left;
}
Căn chỉnh bảng theo chiều dọc trong CSS
Để căn chỉnh bảng theo chiều dọc, bạn sử dụng thuộc tính vertical-align để có thể nhận các giá trị top, bottom, middle. Theo default, the content of table has the vertical vertical with middle value. Ví dụ
td {
height: 50px;
vertical-align: bottom;
}
5. Thuộc tính padding trong CSS
Để điều khiển khoảng cách giữa đường viền và nội dung của bảng, bạn sử dụng thuộc tính đệm trong CSS. Giá trị có thể nhận của thuộc tính này nằm ở dưới dạng đơn vị px
Ví dụ
th, td {
padding: 15px;
text-align: left;
}
6. Thuộc tính border-spacing trong CSS
Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của các ô trong bảng. Thuộc tính này có thể nhận một hoặc hai giá trị [có đơn vị là độ dài]
Nếu cung cấp một giá trị, thì giá trị này sẽ được áp dụng cho đường bao ngang và dọc. Nếu cung cấp hai giá trị, thì tương ứng theo thứ tự sẽ áp dụng cho đường viền ngang và đường viền dọc
Ghi chú Thuộc tính này không hoạt động trong Netscape 7 và IE6
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
Sửa đổi ví dụ trên và xem kết quả
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
Vi du gia tri separate va border-spacing
Cell A
Cell B
Vi du gia tri separate va border-spacing
Cell A
Cell B
Kết quả là
7. Thuộc tính caption-side trong CSS
Theo mặc định, nội dung của thẻ khi được sử dụng trong bảng sẽ được hiển thị bên trên bảng. Tuy nhiên, để thay đổi vị trí này, bạn có thể sử dụng thuộc tính phụ đề bên trong CSS
Thuộc tính này có thể nhận được một trong các giá trị. trên, dưới, trái hoặc phải. Dưới đây là ví dụ minh họa
Ghi chú. Các thuộc tính này có thể không hoạt động trong trình duyệt IE
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
Phan Caption nay se xuat hien o phan ben tren bang
Cell A
Cell B
Phan Caption nay se xuat hien o phan ben duoi bang
Cell A
Cell B
Kết quả là
8. Thuộc tính ô trống trong CSS
Để xác định xem có nên hiển thị đường viền cho một ô không có nội dung, bạn có thể sử dụng thuộc tính ô trống trong CSS
Thuộc tính này có thể nhận được một trong các giá trị. hiển thị, ẩn hoặc kế thừa
Dưới đây là ví dụ minh họa để ẩn đường viền với ô mà không có nội dung
________số 8Kết quả là
9. Thuộc tính table-layout trong CSS
Thuộc tính bảng bố cục hỗ trợ bạn điều khiển cách mà trình duyệt nên tạo bố cục cho một bảng
Thuộc tính này có thể nhận được một trong ba giá trị. cố định, tự động hoặc kế thừa
Dưới đây là ví dụ minh họa sự khác biệt giữa các giá trị của thuộc tính table-layout này
Ghi chú. Nhiều trình duyệt không hỗ trợ thuộc tính này
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
1000000000000000000000000000
10000000
100
1000000000000000000000000000
10000000
100
Kết quả là
Trên đây là bài viết của eLib. VN về Bảng trong CSS. Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn
Như vậy là chúng ta đã hoàn thành nội dung "CSS Design". Để củng cố và giữ chặt nội dung đã học, mời bạn cùng thử sức với "