Chúng ta có thể xác định kiểu cho bảng bằng CSS. Các thuộc tính sau thường được sử dụng để tạo kiểu cho
và các phần tử của nó - - đường viền
Thuộc tính đường viền CSS được sử dụng để xác định chiều rộng đường viền, kiểu đường viền và màu đường viền.
- thu gọn biên giới
Thuộc tính này được sử dụng để chỉ định liệu một phần tử
nên có đường viền chung hay đường viền riêng biệt.
- chú thích
Thuộc tính caption-side được sử dụng để đặt hộp phụ đề bảng theo chiều dọc.
- ô trống
Thuộc tính này được sử dụng để chỉ định hiển thị các ô trống của bảng.
- bố cục bảng
Để xác định thuật toán được trình duyệt sử dụng để sắp xếp các hàng, cột và ô của bảng.
Ví dụ
Các ví dụ sau minh họa kiểu bảng -
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
border: thin solid;
padding: 5px;
font-style: italic;
}
caption {
caption-side: bottom;
}
td {
box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
table {
border: 3px solid black;
}
td {
border: 3px solid lightgreen;
}
th {
border: 3px solid lightblue;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
