Как сделать таблицу в css

Таблицы в HTML. CSS-свойства для таблиц

Таблицы в HTML создаются с помощью нескольких тегов. Родительским является тег <table>, внутри которого располагаются теги <tr> — от англ. table row — это строки таблицы. А внутри <tr> размещают несколько ячеек, формируемых тегами <td> — от англ. table data. Именно внутри ячеек располагается основная информация таблицы (данные — отсюда и название ячейки table data). Все, что не попало внутрь тегов <td>, выносится за пределы таблицы.

Пример простой таблицы, который формируется простой аббревиатурой Emmet table>tr*3>td*5> <Ячейка $>:

Оформление таблиц

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

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small .

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

Результат данного примера показан на рис. 1.

Изменение цвета фона

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

Результат данного примера показан на рис. 2.

Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Вид таблицы с расстоянием между ячеек

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам ( <td> или <th> ). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table , а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

свойство не установлено

а — свойство не установлено

свойство установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам <tr> , <thead> , <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

Результат данного примера показан на рис. 5.

Таблица с горизонтальными линиями

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th> , он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Выравнивание текста в ячейках

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Тег <table> в HTML

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

Самая простая таблица

Самую простую таблицу можно составить из трех тегов: table , tr , td . tr &#8211; определяет строку, а td &#8211; ячейку. По умолчанию содержимое td элементов выравнивается влево.

Ниже показан пример такой таблицы. Из стилизации применено только атрибут border , чтобы сделать рамку, и строка-заголовок выделена жирным.

Атрибуты

Теги и разделы

Приведем различные теги, применяемые при создании таблиц.

<caption> &#8211; название таблицы. На примере выделен красным цветом.

<th> &#8211; заголовочная ячейка. Должна помещаться внутри <tr> . Обычно по умолчанию ее содержимое выделяется браузером жирным и центрируется. На примере первая строка оформлена через теги th .

  • <thead> &#8211; группирует содержимое заголовочной части таблицы.
  • <tbody> &#8211; группировка основного контента.
  • <tfoot> -группирует футер (нижнюю часть).

На примере есть все эти 3 раздела. У первого задан цвет содержимого красный, у второго &#8211; синий, у третьего &#8211; зеленый.

Группировка столбцов

<colgroup> и <col> &#8211; позволяют задавать параметры для нескольких колонок сразу, что приводит к уменьшению кода и более ранней отрисовке элемента. При этом <colgroup> как раз позволяет устанавливать такие общие свойства, а <col> применяется внутри него, чтобы задать для колонки отличающиеся от общих свойства. <colgroup> разрешается использовать как одиночный тег, если он не содержит внутри себя тегов <col> . Их работу проще всего понять на примере. Мы задали для первых 2-х столбцов один цвет фона, а для следующего (третьего) &#8211; другой.

Атрибут span для тега col позволяет установить количество колонок, к которым будут применяться параметры.

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

Чтобы объединить две или более ячейки по вертикали в одну используйте атрибут colspan .

На примере ниже мы объединили во второй строке 2 столбца, применив <td colspan="2" и выделив их для наглядности желтым.

Для объединения ячеек по вертикали используйте rowspan . Ниже пример такого объединения с использованием атрибута <td rowspan="2" .

Табличная верстка в CSS

Нужно сказать, что применение табличных тегов HTML становится все реже в пользу применения инструкций CSS. В CSS верстка таблиц возможно с помощью специального свойства display, имеющего значения, полностью имитирующие различные элементы таблицы: ячейки, столбцы, заголовки и т.д. Кроме того существует мощный способ компоновки элементов CSS Flexbox, позволяющий выстраивать элементы в виде сетки. Все это позволяет при желании отказаться от тега table.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *