Таблицы в HTML

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

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах. Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на , потом придумали CSS Grid, и понеслось. Но начиналось всё именно с табличной вёрстки. 👉 Сегодня мы вспомним былые времена и погрузимся в магию создания таблиц в HTML. Возможно, когда-то в жизни вам придётся поддерживать сайт, который верстали в 2000 году на таблицах, и вы вспомните эту статью, и скупая слеза покатится по вашей щеке. За таблицы в вёрстке отвечает такой набор тегов: Сделаем простую таблицу из двух строк, по 3 ячейки в каждой. В коде это выглядит громоздко, но на деле всё получится компактно: Таким способом можно сделать таблицу любого размера — хоть 100 строк по 500 ячеек в каждой. Обратите внимание, что браузер нарисовал таблицу невидимой. Это не всегда так. Раньше браузеры рисовали таблицы с чётко видимыми границами, и некоторые браузеры делают так до сих пор. Чтобы таблица выглядела одинаково у всех, смотрите следующий раздел. Внешний вид таблицы можно настроить стилями, как у любого другого объекта на странице: В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так: Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class=”kakoi-to”, а в стилях сказать table.kakoi-to {…} — и прописать в фигурных скобках все нужные параметры оформления. Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон: Или можно было бы сказать , а в стилях прописать .highlighted{background-color:yellow;} — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript. Чтобы сделать видимые границы у всех ячеек, добавим параметр border: Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях. Видно, что между ячейками расстояние есть, а внутри ячеек текст как будто зажат. Чтобы дать тексту внутри ячеек подышать, используют padding: За заголовок в таблице отвечает отдельный тег : Все заголовки по умолчанию выравниваются по центру. Если нужно прибить их к левому краю, как и остальное содержимое таблицы, используем стиль с выравниванием. Для этого оборачиваем заголовки в общий тег для заголовков и применяем такое: Если нужно, чтобы содержимое занимало сразу несколько ячеек, используют параметр colspan для горизонтальных ячеек и rowspan — для вертикальных. В качестве параметра для них просто указываем количество ячеек, которые нужно с ними объединить: Ячейки — это контейнеры для содержимого, куда можно класть всё: Единственное, что нужно учитывать:…

Источник: thecode.media — thecode.media/table/