Thuộc tính caption-side trong CSS được dùng để định vị theo chiều dọc hộp chú thích của bảng. Nó có thể nhận giá trị top và bottom. 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 CSS caption-side như sau:
Selector { caption-side: /*giá trị*/ }
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">Bảng</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>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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>Bảng Demo</h2> <table> <caption>Demo</caption> <tr> <th colspan="4">Bảng</th> </tr> <tr> <td>Một...</td> <td>Hai...</td> <td>Ba</td> <td>Bốn</td> </tr> <tr> <td>Năm</td> <td>Sáu</td> <td>Bảy</td> <td>Tám</td> </tr> </table> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
