В этой статье рассмотрим актуальный вопрос, который заключается, это как нужно правильно выровнять заголовок таблицы по левому краю, чтоб все смотрелось корректно и безусловно красиво. Здесь при помощи элемента caption станет показываться выше самой таблицы и также по горизонтально и её центру.
Чтоб все выровнять корректно, это также включается заголовок, который находится внутри самого элемента, то здесь задействуем свойство text-align и также значение left или rigth, которое автоматически выравнивают всю текстуру по левому и также в аналогичном случай по правому краю.
По адаптивности все отлично смотрится:
Также можно выставить другую гамму цвета:
HTML
Код
<table>
<caption>ZorNet.Ru — сайт для вебмастера</caption>
<tr><td>AMD настраивает</td><td>Автомат</td></tr>
<tr><td>Beat Sabre Arcade</td><td>Гаубица</td></tr>
<tr><td>Как статья о сложности</td><td>Броня</td></tr>
<tr><td>Новый RTX </td><td>Танки</td></tr>
<tfoot>
<tr><th>Имя</th><th>Пистолет</th></tr>
</tfoot>
</table>
CSS
Код
caption {
text-align: left; /* Выравнивание по левому краю */
font-style: italic; /* Курсивный текст */
}
table {
width: 80%; /* Ширина таблицы */
margin: auto; /* Выравниваем таблицу по центру */
}
td {
background: #3056ad;
padding: 5px;
font-size: 13px;
font-weight: bold;
color: #f5fafd;
}
Свойство text-align идет как добавление к селектору caption.
Демонстрация
