Заголовок таблиці, створений за допомогою елемента <caption>, розміщується безпосередньо перед табличними даними. Щоб заголовок відображався після таблиці, застосовується властивість caption-side зі значенням bottom. У прикладі 1 показано, як змінити розташування заголовка.
Приклад 1. Використання caption-side
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок таблиці</title> <style> caption { background: #406325; /* Колір тла заголовка */
color: #fff; /* Колір тексту */
padding: 10px; /* Поля навколо тексту */
caption-side: bottom; /* Розташування знизу */
}
table { width: 100%; /* Ширина таблиці */
}
td { background: #8DC63F; /* Колір фону осередків */
padding: 5px; /* Поля в осередках */
}
</style>
</head>
<body> <table> <caption>Черепашки-ніндзя</caption> <tr><th>Ім'я</th><th>Зброя</th></tr> <tr><td>Леонардо</td><td>Катани</td></tr> <tr><td>Рафаель</td><td>Кинджали-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Мікеланджело</td><td>Нунчаки</td></tr>
</table>
</body>
</html>Результат цього прикладу показаний на рис. 1.
