Таблицы

Для создания таблиц в языке HTML применяются следующие основные теги:

  • <table> - определяет границы таблицы
    • <tr> - ряд данных
      • <th> - ячейка таблицы с заголовком
      • <td> - простая ячейка таблицы

Таблица состоит из рядов, колонок и составляющих их ячеек. Ряды и колонки формируют сетку, а ячейки таблицы полностью ее заполняют без перекрытий.

HTML таблицы должны использоваться только для представления табличных данных, но не для позиционирования материалов на странице.

Заголовок и разделы таблицы

  • <table>
    • <caption> - заголовок таблицы
    • <thead> - вступительная часть таблицы
    • <tbody> - основная часть таблицы
    • <tfoot> - заключительная часть таблицы

Объединение ячеек таблицы

Для объединения соседних ячеек таблицы используются атрибуты colspan и rowspan для тегов <th> и <td>.

  • colspan - объединение ячеек из соседних колонок таблицы
  • rowspan - объединение ячеек из соседних рядов таблицы

Размещение таблицы в теге figure

Зачастую таблицы представляют собой некий самодостаточный завершенный материал на странице, и поэтому для их размещения используется тег <figure>. В этом случае возникает вопрос оформления заголовка таблицы.

  • caption vs figcaption

Если таблица является единственным содержимым тега <figure> то для заголовка таблицы лучше использовать тег <figcaption>, а не <caption>.

Оформление таблицы с помощью CSS

  • Ширина таблицы
  • Внутренние отступы
  • Рамки и слияние рамок (border-collapse)
  • Выравнивание содержимого ячеек (text-align)