• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выровнять заголовок таблицы CSS по сторонам (Как выровнять заголовок таблицы по левому краю через CSS)
Выровнять заголовок таблицы CSS по сторонам
Kosten
Четверг, 03 Октября 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этой статье рассмотрим актуальный вопрос, который заключается, это как нужно правильно выровнять заголовок таблицы по левому краю, чтоб все смотрелось корректно и безусловно красиво. Здесь при помощи элемента 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.

Демонстрация
Прикрепления: 8676760.png (11.6 Kb) · 4243374.png (10.8 Kb) · 78689.zip (2.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выровнять заголовок таблицы CSS по сторонам (Как выровнять заголовок таблицы по левому краю через CSS)
  • Страница 1 из 1
  • 1
Поиск: