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