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

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

• ①Границы таблицы border
• ②Как задать ширину, высоту, фон и столбцы таблицы

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

Добавить заголовок в таблицу можно с помощью тега <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;
}

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