Thẻ <caption> trong HTML

- Thẻ <caption> được dùng để tạo tiêu đề cho bảng.

- Ví dụ: Bảng bên dưới có tiêu đề là "THÔNG TIN SINH VIÊN"

- Thẻ <caption> phải được nằm bên trong phần tử <table> và nên đặt ở vị trí trên cùng.

Ví dụ:

<table border="1">
    <caption>THÔNG TIN SINH VIÊN</caption>
    ...
</table>

Xem ví dụ

- Mặc định, tiêu đề sẽ nằm ở phía trên và được canh giữa bảng.

- Tuy nhiên, chúng ta có thể sử dụng thuộc tính align để xác định vị trí khác cho tiêu đề.

- Thuộc tính align có bốn giá trị:

top	Tiều đề của bảng sẽ nằm ở phía trên bảng
bottom	Tiều đề của bảng sẽ nằm ở phía dưới bảng
left	Tiều đề của bảng sẽ nằm ở phía bên trái bảng
right	Tiều đề của bảng sẽ nằm ở phía bên phải bảng

Ví dụ:

<table border="1">
    <caption align="bottom">THÔNG TIN SINH VIÊN</caption>
    ...
</table>

Xem ví dụ

- Lưu ý: Các trình duyệt khác nhau sẽ hỗ trợ thuộc tính align trong thẻ <caption> khác nhau.

Trình duyệt Internet Explorer 8 hỗ trợ cả bốn giá trị
Trình duyệt Internet Explorer 9+ chỉ hỗ trợ giá trị top & bottom
Trình duyệt Firefox hỗ trợ cả bốn giá trị
Trình duyệt Opera hỗ trợ cả bốn giá trị
Trình duyệt Chrome chỉ hỗ trợ giá trị top & bottom
Trình duyệt Safari chỉ hỗ trợ giá trị top & bottom

- Ngoài việc sử dụng thuộc tính align trong thẻ <caption> để xác định vị trí cho tiêu đề của bảng thì chúng ta cũng có thể sử dụng thuộc tính caption-side trong CSS để thay thế.

- Các giá trị của thuộc tính caption-side và sự hỗ trợ trên khác trình duyệt cũng tương tự như thuộc tính align.

Ví dụ:

<table border="1">
    <caption style="caption-side:bottom">THÔNG TIN SINH VIÊN</caption>
    ...
</table>

Xem ví dụ