CSS
June 16, 2020

③Как добавить таблице заголовок

Продолжим изучение темы CSS - таблицы. Если пропустили прошлые статьи, то вот ссылки на них:


Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега <caption>, а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align. Наследуется.

caption-side

Значения:

  • top - Заголовок таблицы располагается над таблицей. Значение по умолчанию.
  • bottom - Располагает заголовок под таблицей.
  • initial - Устанавливает значение свойства в значение по умолчанию.
  • inherit - Наследует значение свойства от родительского элемента.
HTML
<table>
   <caption>Таблица № 1</caption>
      <tr>
         <th>Company</th>
         <th>Q1</th>
         <th>Q2</th>
         <th>Q3</th>
         <th>Q4</th>
      </tr>
...
</table>
CSS
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0; 
font-size: 14px;
}
📷 РИС. 1. ПРИМЕР ОТОБРАЖЕНИЯ ЗАГОЛОВКА ПОД ТАБЛИЦЕЙ

Продолжение в следующей статье!