Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.
Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона ячеек
Пример 1. Цвет фона
То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Поля внутри ячеек
Пример 2. Поля в таблицах
Результат данного примера показан на рис. 2.
Рис. 2. Поля в ячейках
Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега
игнорируется.
Границы и рамки
Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.
Использование атрибута cellspacing
Известно, что атрибут cellspacing тега
задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять его не будем.
Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.
Применение свойства border
Пример 3. Добавление двойной рамки
В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки.
Результат примера показан на рис. 3.
Рис. 3. Граница вокруг таблицы и ячеек
Пример 4. Создание одинарной рамки
В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину.
Результат примера показан на рис. 4.
Рис. 4. Граница вокруг таблицы
При добавлении border-collapse: collapse значение атрибута cellspacing тега
игнорируется.
Выравнивание содержимого ячеек
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег
, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).
Пример 5. Выравнивание содержимого ячеек по горизонтали
В данном примере содержимое тега
выравнивается по левому краю, а содержимое тега
— по центру. Результат примера показан ниже.
Рис. 5. Выравнивание текста в ячейках
Пример 6. Выравнивание содержимого ячеек по вертикали
В данном примере устанавливается высота заголовка
как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.
В это материале собраны красиво оформленные таблицы, которые созданы на чистом CSS, где каждый вариант имеют разную тематическую направленность. Если кратко, то таблица является наиболее важным и наиболее часто используемым элементом для отображения данных. Где можно отобразить различную информацию, которая будет располагаться по раздельно или по категориям, что очень удобно для просмотра.
Если рассматривать основное отображения данных в виде списка, где аналогично можно разместить с красивым оформлением в виде таблицы. Так как сами данные, которые отображаются в табличной форме, идут как просты, так и сложные, но все больше зависит от характера размещаемого материала, где можно добавить оттенка. Поэтому было бы неплохо оформить, чтобы был более привлекательный вид и приятен для глаз.
Данное свойство полностью соответствует правилам данного свойства для всех элементов. Поэтому рассмотреть его можно в одном из предыдущих уроков.
background-color (задний фон) color (цвет текста)
Данные свойства соответствуют правилом их определения для всех остальных элементов. Поэтому темы можно рассмотреть из предыдущих уроков: задний фон и цвет.
Табличная верстка CSS
Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п.
Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки.
Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку.
Табличная верстка из двух колонок
Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.
Выполнение:
Результат:
Выполнение: Добавим новые свойства стилей:
Для разделителя была добавлена новая ячейка. Результат:
Выполнение: Добавим новые свойства границ для ячеек:
Результат:
Табличная верстка из трех колонок
Существует понятие фиксированного или «резинового» макета верстки.
Фиксированный макет CSS
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
Результат:
Резиновый макет
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
Результат:
Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
Результат: Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.
Использование вложенной таблицы в резиновом макете
Если ширина двух колонок устанавливается в процентах, а третьей — в пикселях, обойтись одной таблицей не получится. Так, если ширина всей таблицы равна 100 процентов, первой колонки — 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.
Задать фон для колонок.
Выполнение:
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Результат:
Друзья! На этой странице Вас ждёт полный практический курс по изучению таблиц. Посмотрите его, и создание таблиц больше не будет для Вас проблемой. На самом деле их создавать очень легко.
Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.
Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.
Создание таблиц в html примеры
Создание простой HTML таблички
Прежде всего нам необходимо указать тег table. Это парный тег, который указывает браузеру, что именно в нём будет располагаться вся HTML таблица.
Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.
Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.
Создание строк и ячеек
Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:
Как видите, у нас получилась простая таблица, с одной строкой и четырьмя ячейками, которые автоматически преобразуются в 4 столбца.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!
Выглядеть она у нас будет вот так:
Строка1 Ячейка1
Строка1 Ячейка2
Строка1 Ячейка3
Строка1 Ячейка4
Строка2 Ячейка1
Строка2 Ячейка2
Строка2 Ячейка3
Строка2 Ячейка4
Строка3 Ячейка1
Строка3 Ячейка2
Строка3 Ячейка3
Строка3 Ячейка4
Строка4 Ячейка1
Строка4 Ячейка2
Строка4 Ячейка3
Строка4 Ячейка4
Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного
Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:
А вот, что у нас получится в итоге:
Пример таблицы с названием
Строка1 Ячейка1
Строка1 Ячейка2
Строка1 Ячейка3
Строка1 Ячейка4
Строка2 Ячейка1
Строка2 Ячейка2
Строка2 Ячейка3
Строка2 Ячейка4
Строка3 Ячейка1
Строка3 Ячейка2
Строка3 Ячейка3
Строка3 Ячейка4
Строка4 Ячейка1
Строка4 Ячейка2
Строка4 Ячейка3
Строка4 Ячейка4
Как видите, несмотря на то, что мы разместили тег caption внутри таблицы. Он располагается над ней.
Для закрепления материала на практике, я рекомендую вам посмотреть создание базовой таблички в видео ниже.
Видео 1: HTML таблицы – тег table
Управление ячейками таблицы
И так друзья, теперь мы будем понемногу усложнять нашу таблицу. И повышать ваши умения и практику. HTML-таблица, которую мы сделали с вами выше очень проста. Однако, чаще всего, надо предоставить данные в более сложном формате:
Вот этим мы и займёмся. И начнем мы, пожалуй, с…
Ячейки-заголовки в таблице
Конечно, мы могли бы всунуть внутрь ячеек первой строки какие-нибудь заголовки, или оформить их жирными через стили. Однако это будет неправильно!
Так как специально для этих целей был создан тег th, который задается вместо обычных ячеек (тег td). И указывает на то, что это ячейки-заголовки, которые используются для названия столбцов.
А вот и результат кода выше, выполненный в браузере:
Таблица с тегом th
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Строка2 Ячейка1
Строка2 Ячейка2
Строка2 Ячейка3
Строка2 Ячейка4
Строка3 Ячейка1
Строка3 Ячейка2
Строка3 Ячейка3
Строка3 Ячейка4
Строка4 Ячейка1
Строка4 Ячейка2
Строка4 Ячейка3
Строка4 Ячейка4
Как видите, текст в этих ячейках автоматически делается жирным.
Объединение ячеек по горизонтали и вертикали
Довольно часто ячейки в HTML таблицах приходится объединять по горизонтали и вертикали. Для удобства, я называю это объединение по столбцам и по строкам. Так новичкам понятнее, что они делают.
Для этого мы будем использовать 2 атрибута, которые задаются непосредственно самим ячейкам:
Эти атрибуты должны иметь целое число, начиная с 1 и более.
Это правило очень важно, так как если вы не удалите ячейки, которое были объединены, таблица будет отображаться в браузере некорректно.
Давайте попробуем в нашей таблице объединить 2 ячейки:
И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.
В итоге у нас получится вот такой код:
А на деле, наша таблица будет выглядеть следующим образом:
Объединение ячеек таблицы
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)
Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1
Строка3 Ячейка2
Строка3 Ячейка3
Строка4 Ячейка1
Строка4 Ячейка2
Строка4 Ячейка3
Как видите, всё отображается ровно и красиво, как и было задумано. Для закрепления материала, советую посмотреть практическое видео ниже.
Объединение ячеек сразу по 2-ум направлениям
Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.
Давайте объединим ячейку 1 строки 3:
Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:
Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:
А вот так, будет выглядеть наша таблица сейчас:
Объединение ячеек по 2-ум направлениям
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)
Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)
Строка3 Ячейка3
Строка4 Ячейка3
Шапка, тело и подвал HTML таблицы.
Как и сам сайт, наша табличка может иметь свои шапку, тело и подвал. И если вы хотите, чтобы ваш код выглядел семантически правильно для поисковых систем. Советую применять эти знания на практике.
Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.
Этот тег рекомендуется размещать первым в контенте таблицы. То есть мы заводим этот тег и уже внутри него размещаем заголовочную строку с ячейками.
Фишки тега thead:
Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:
Визуально он никак не влияет на отображение таблицы, поэтому я не буду выводить результат исполнения кода.
Тег tfoot – подвал HTML таблицы
Фишки тега tfoot:
Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :
А вот и наша табличка:
Тег tfoot в таблице
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Подвал столбец 1
Подвал столбец 2
Подвал столбец 3
Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)
Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)
Строка3 Ячейка3
Строка4 Ячейка3
Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!
Тег tbody – тело таблицы.
В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.
Вот такой код получится в итоге:
Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.
И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.
Видео 3. HTML таблицы – шапка, тело и подвал
Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.
Управление колонками в HTML таблицах
Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?
Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.
Тег col
В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):
Тег col в таблице
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Подвал столбец 1
Подвал столбец 2
Подвал столбец 3
Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)
Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)
Строка3 Ячейка3
Строка4 Ячейка3
Таблицу приводить в пример не буду, так как она совершенно не поменялась.
Тег colgroup
Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.
Вот какой код ввёл я:
В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:
Тег colgroup в таблице
Столбец 1
Столбец 2
Столбец 3
Столбец 4
Подвал столбец 1
Подвал столбец 2
Подвал столбец 3
Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)
Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)
Строка3 Ячейка3
Строка4 Ячейка3
Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.
Видео 4. HTML таблицы – управление колонками
Как видите, ничего сложного в том, чтобы создать сложную функциональную таблицу нет. Главное знать теги и применять их в правильном назначении. Всё остальное – дело техники
На этом всё, мои дорогие друзья. Если будут вопросы касательно создания HTML таблиц – задавайте их в комментариях.
