Thuộc tính CSS caption-side được sử dụng để định vị hộp phụ đề bảng theo chiều dọc. Nó có thể lấy trên cùng và dưới cùng làm giá trị. Theo mặc định, chú thích bảng được đặt ở trên cùng.
Cú pháp
Cú pháp của thuộc tính kiểu danh sách CSS như sau−
Selector {
caption-side: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính CSS caption-side.
<!DOCTYPE html>
<html>
<head>
<style>
table * {
border: ridge skyblue;
padding: 0.5rem;
}
table {
margin: 20px;
box-shadow: 0 0 6px 3px indianred;
empty-cells: show;
}
caption {
border-top-style: none;
caption-side: bottom;
border-color: darkkhaki;
border-radius: 50%;
}
</style>
</head>
<body>
<table id="demo">
<caption>Demo</caption>
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></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>
table {
margin: auto;
border: double black 13px;
border-radius: 6px;
}
td, th {
border-left: 1px solid black;
border-top: 1px solid black;
}
th {
background-color: lightblue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
caption {
margin-top: 3px;
background-color: purple;
caption-side: bottom;
color: white;
border-radius: 20%;
}
</style>
</head>
<body>
<h2>Demo Table</h2>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One...</td>
<td>Two...</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
