Сайт в разработке Наполняем разделы и правим ошибки — что-то может выглядеть или работать не так. Если заметили — позвоните или напишите.

Таблицы в HTML

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

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

Правильная структура таблицы

<table>
  <caption>Сроки этапов</caption>
  <thead>
    <tr><th scope="col">Этап</th><th scope="col">Срок</th></tr>
  </thead>
  <tbody>
    <tr><td>Прототип</td><td>5 дней</td></tr>
    <tr><td>Дизайн</td><td>10 дней</td></tr>
  </tbody>
</table>

caption даёт таблице название. th — ячейка-заголовок, td — обычная ячейка. Атрибут scope="col" связывает заголовок со столбцом для вспомогательных технологий.

Проверяйте большие таблицы на телефоне: обычно им требуется горизонтальная прокрутка в контейнере. Не смешивайте в одной ячейке длинный текст, изображение и несколько интерактивных элементов.

Далее: списки HTML, доступность, структура страницы.

Другие термины

<article> в HTML: назначение и пример

article в HTML. Выделяет самостоятельный материал: публикацию, новость или другую часть, которую можно рассматривать отдельно от остальной страницы.

<aside> в HTML: назначение и пример

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

Заявка

Расскажите о проекте

Свяжемся в течение рабочего дня, зададим уточняющие вопросы и предложим варианты. Без навязчивых звонков.

Форма обратной связи

Отвечаем в рабочие дни с 10:00 до 19:00

Написать в Telegram