Chúng ta có thể xác định kiểu cho bảng bằng CSS. Các thuộc tính sau đượ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>
body {
font-family: 'Bookman Old Style', serif;
}
th {
letter-spacing: 1.9px;
}
#one {
border-right: thick solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
empty-cells: hide;
box-shadow: inset 0 0 4px orange;
}
tr {
box-shadow: inset 0 0 10px greenyellow;
}
td {
font-style: italic;
box-shadow: inset 0 0 8px red;
}
table,td {
margin: 6px;
padding: 6px;
border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
