Меню

Верстка таблиц при помощи css



Урок 5. Верстка таблиц, теги table, tr, td

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

Иногда в процессе верстки таблиц возникает необходимость создать заголовки столбца, для этого мы используем тег th. Этот тег аналогичен тегу td, тоже расположен внутри tr, но идеологически и стилистически отличается. По умолчанию он выделен жирно, и текст в нем выравнивается по центру.

Не совесем понятно? Рассмотрим таблицу из 4 строк и 2х столбцов с заголовками:

В итоге получаем:

Заголовок 1 Заголовок 2
Пример столбца 1 Пример столбца 2
Пример столбца 3 Пример столбца 4
Пример столбца 5 Пример столбца 6
Пример 7 Длинный текст 8

Объединение ячеек в таблице по вертикали и горизонтали, верстка

Теперь поговорим об одном достаточно сложном и непонятном моменте в верстке таблиц. Часто нам необходимо объединить ячейки таблицы между собой по вертикали или горизонтали. Для этого используется атрибут colspan для ячеек таблицы td. Значения у этого атрибута в виде чисел. Если ставим цифру 2 в значение, то совмещаем по горизонтали две ячейки, текущую и ту, что справа, но в разметке правой ячейки уже быть не должно, содержимое пишем в тот td, которому задали colspan.

Для совмещения ячеек по вертикали необходимо использовать аналогичный атрибут rowspan для тега td. Например, задаем значение 2, значит совмещаем ячейку с нижней. Не забываем удалить ту ячейку, с которой совмешаем из разметки таблицы, иначе выйдет смещение и появление лишних элементов в таблице. Почему объединение по вертикали сложнее? Ведь в разметки таблицы данных нижняя ячейка лежит в следующем теге tr, поэтому ее удаление не столь очевидно, как при объединении по горизонтали.

Можно объединить ячейки одновременно по вертикали и горизонтали, для это задаем оба атрибута сразу. Наглядно станет понятно в примере :

Объединяем вправо Объединяем все
Пример столбца 3 Объединяем вниз
Пример столбца 5 Пример столбца 6 Текст
Пример 7 Длинный текст 8 Текст Текст

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

Верстать таблицы научились, теперь можно создавать таблицы с любым количеством столбцов и строк, нужно лишь корректировать необходимым образом html-разметку. Чтобы придать таблицам привычный вид, нужно знать о css-свойствах, которые полезны при верстке таблиц.

Во-первых, таблицам можно задавать рамки. Рамку можно задать, как самой таблице, так и каждой размеченой ячейке таблицы. Но выглядят такие рамки неэстетично и непривычно, чтобы избежать просветов между рамками, используют свойство border-collapse: collapse; Оно накладывает рамки ячеек и убирает нежелательные расстояния между ними. Рамку задаем с помощью свойства border: 2px solid #000; Этим свойством и его значением задаем размер рамки в два пикселя, черного цвета, простой линией.

С помощью рамок можно придать таблице определенный вид. Допустим, хотим расчертить таблицу только на строки или столбцы. Для этого используем css-свойства border-bottom и border-right. С помощью этих свойств задаем рамку у ячейки только с одной стороны,что расчерчивает таблицу нужным образом.

Еще одним важным моментом в верстке таблиц становятся отступы внутри ячейки, их задаем с помощью свойства padding. Можно задать отступ только с одной стороны, для это используем одно из свойств padding-top, padding-right, padding-bottom или padding-left.

Для выравнивания текста внутри ячейки по горизонтали используем css-свойство text-align со значениями left, center и right. Для выравнивания по вертикали подойдет свойство vertical-align. Оно имеет значения top, middle, bottom. Можно задать для ячеек и строк цвет текст (color), цвет фона (background-color), жирность текста (font-weight) и так далее. Чтобы присвоить определенные стили только для конкретной строки или ячейки целесообразно использовать классы для них, а затем писать css-свойства уже для новых классов.

Пример css-кода для разметки простой таблицы.

Источник

Гибкие таблицы на CSS Grid


Просмотр списка лидов («холодных» контактов)

Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).

Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.

Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.

В первую очередь, наше решение позволяет клиентам быстро просматривать списки, например, лиды или контакты, и замечать важные детали. Это не похоже на электронную таблицу Excel — мы лучше справляемся с выкладкой данных, если их очень много.

Абсолютно всё работает в адаптивном гибком дизайне. Мы начинаем с самого узкого варианта и настраиваем макет на основе контента, дизайна и вариантов использования (у нас нет брекпоинтов, ориентированных на устройство).

На минимальной ширине экрана столбцы штабелируются вертикально, занимая всю ширину экрана.

Как выглядит список на узком экране

Гибкие таблицы сделать непросто. Вы можете выбрать из нескольких существующих шаблонов. Подумайте, какую информацию ищут пользователи, и выбирайте с умом.

Как только у нас достаточно пикселей на экране, мы переключаемся на более типичный макет, так что колонки… ну, становятся колонками. Затем в макете не происходит никаких серьёзных изменений, но мы по-прежнему хотим отображать колонки как можно удобнее для клиента.

Предположим, у нас много столбцов (позже рассмотрим, как пользователь может их настроить). Во-первых, таблица должна как минимум заполнить ширину экрана. Во-вторых, ширина столбцов должна определяться их содержимым и типом значений. Например, короткий/длинный текст, дата, номер, URL и т. д. Колонки с датой должны занимать меньше места, чем колонки длинного текста.

У столбцов должна быть минимальная ширина. В результате часто получается таблица, которая прокручивается и по вертикали, и по горизонтали.

Как макет зависит от ширины окна. Извините за дёрганую гифку, позже я приведу несколько интерактивных примеров

Начнём с того, что мы по максимуму используем для таблицы обычный CSS старой школы. Затем улучшаем его с помощью CSS Grid. Потом я покажу, как средствами Grid пользователи изменяют размер столбцов, что было гораздо неудобнее с обычным CSS.

Ну покажите уже CSS Grid

Я не эксперт по CSS Grid, но он мне нравится. Это чрезвычайно мощный и простой инструмент, который реализует сложные макеты с минимальным количеством кода. Здесь я пропущу введение в технологию. Можете прочесть «Новые макеты CSS» Рейчел Эндрю или «Полное руководство по Grid». Когда закончите размышления о том, где же был этот инструмент всю вашу жизнь, возвращайтесь ко мне.

Затем мы используем волшебное правило grid-template-columns для управления элементами сетки. Да, всего одна строка CSS. Например, если у нас колонка даты и колонка URL, получится примерно так:

Читайте также:  Таблица значений плотности веществ

Используем одинаковый минимальный размер для всех колонок, но максимальное значение ( fr ) определяется типом данных столбца. Я пробовал auto и max-content , но мы придумали лучший вариант. Вот упрощенный пример: интерактивная таблица с кодом. Попробуйте изменить размер окна.

Изменение ширины колонок с помощью Grid

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

Например, пользователь может создать для контактов настраиваемое поле (дата) под названием «Дата рождения», которое будет отслеживаться в системе для каждого контакта.

Поскольку при создании настраиваемого поля выбирается тип «Дата», система будет обрабатывать это поле с учётом такого типа. Сначала объясню, как происходит изменение ширины.

Замечательно, что достаточно обновить только один элемент в DOM, а не каждую ячейку.

Мы всегда разрабатываем UI с учётом сенсорного ввода, но в данном случае вполне нормально не поддерживать его. Это слишком точное действие. Даже если бы я хотел изменить размер столбца на тачскрине, вероятно, я ожидал бы другого взаимодействия, например, через мультитач-жест.

Колонки фиксированной ширины

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

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

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

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

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

До, во время и после изменения ширины столбца. Опять прошу прощения, что гифка немного дёргается

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

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

Вероятно, адаптивный вариант в любом случае не будет соответствовать намерениям пользователя. Мы не можем предполагать, что для него самое главное — сделать все столбцы меньше, чтобы все они остались на экране. Если человек изменил ширину колонки, он хочет увидеть определённое количество содержимого в этом столбце. Если у нас адаптивный блок, а затем он сужается в окне меньшего размера, то мы игнорируем выбор человека. Ему придётся снова изменить ширину столбца, чтобы увидеть тот же контент. Вряд ли пользователь думает: «Хм, я хочу, чтобы этот столбец занимал 20% окна, даже если я его изменю». Впрочем, я слишком углубляюсь в пограничную ситуацию: на самом деле, пользователи редко изменяют размер окон.

Перемещение и удаление столбцов


Интерфейс для настройки отображаемых столбцов

Представьте, что пользователь изменил набор столбцов через этот интерфейс. Если ни один из выбранных столбцов ранее не изменялся, то они отобразятся с использованием значений по умолчанию grid-template-column в зависимости от типа данных. Например, minmax(150px, 3.33fr) .

Если ширина какой-то колонки зафиксирована в localStorage, мы фиксируем ширину всех выбранных столбцов и тоже сохраняем эти значения в localStorage.

Со временем всё больше и больше столбцов сохраняют фиксированную ширину. Для пользователей единственный способ вернуться к адаптивному дизайну — сбросить колонки.

Мы также храним в localStorage массив идентификаторов столбцов, отдельно от записей о ширине.

«Почему вы просто не использовали <>?»

«Почему вы просто не использовали Flexbox?»

Каждая строка будет оцениваться/выводиться независимо друг от друга. Столбец может быть не выровнен относительно столбца выше из-за разного объёма содержимого.

Я мог бы переключиться на

‘ы для столбцов с вертикальной группировкой ячеек внутри. Но не хотел этого делать. Я хотел использовать

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

«Почему вы просто не использовали ?»

Действительно, — удобный старый элемент. После определения столбцов с помощью стили, применённые к одному, будут эффективно применяться ко всем ячейкам в этом столбце.

Но это оказалось слишком ограниченное решение. Мы попробовали, но очень быстро от него отказались. Настолько быстро, что я уже не могу точно вспомнить, в чём были проблемы. Почти уверен, что невозможно было достичь желаемого уровня адаптивности и оно не сработало с Flexbox и Grid.

«Почему вы просто не использовали table-layout: fixed?»

«Но вы могли обойтись простыми таблицами!»

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

Не переборщите с display: contents

Значение display: contents позволило сохранить разметку таблицы. Используйте его только тогда, когда это действительно нужно. В некоторых браузерах есть или, по крайней мере, были проблемы с доступностью и скрин-ридерами.

Мы обнаружили странный баг display: contents с нативным драг-н-дропом в Firefox.

К счастью, скоро выйдет функция подсеток (subgrid), которая позволит дочерним элементам корректно внедряться в сетки. В нашем приложении мы хотим лишь упростить разметку, но подсетки откроют двери в дикие многомерные сеточные оргии. См. «Почему display: contents не является подсеткой CSS Grid Layout».

Наверное, я что-то забыл

Кажется, была ещё проблема с переполнением текста при изменении размера столбцов, но я уже точно не помню.

Для сохранения заголовков таблиц при прокрутке вниз мы используем position: sticky . Это прекрасное усовершенствование, и оно отлично деградирует в старых браузерах. Тем не менее, для пользователей IE11 у нас есть резервный JavaScript. На самом деле я бы не рекомендовал position: sticky из-за трудностей с горизонтальной прокруткой.

Я даже не упомянул некоторые функции наших представлений списка. Например, пользователи могут применять, сохранять и обмениваться кастомными фильтрами (например, показать лиды выше $500 с потенциальными клиентами в Европе). В этих фильтрах можно запоминать набор столбцов, чтобы всегда отображать определённые столбцы для конкретного рабочего процесса.

Вскоре мы собираемся реализовать массовое редактирование в представлении списка, а также экспорт кастомного представления в CSV.

Источник

Верстка таблиц при помощи css


Просмотр списка лидов («холодных» контактов)

Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).

Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.

Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.

В первую очередь, наше решение позволяет клиентам быстро просматривать списки, например, лиды или контакты, и замечать важные детали. Это не похоже на электронную таблицу Excel — мы лучше справляемся с выкладкой данных, если их очень много.

Абсолютно всё работает в адаптивном гибком дизайне. Мы начинаем с самого узкого варианта и настраиваем макет на основе контента, дизайна и вариантов использования (у нас нет брекпоинтов, ориентированных на устройство).

На минимальной ширине экрана столбцы штабелируются вертикально, занимая всю ширину экрана.

Как выглядит список на узком экране

Гибкие таблицы сделать непросто. Вы можете выбрать из нескольких существующих шаблонов. Подумайте, какую информацию ищут пользователи, и выбирайте с умом.

Как только у нас достаточно пикселей на экране, мы переключаемся на более типичный макет, так что колонки… ну, становятся колонками. Затем в макете не происходит никаких серьёзных изменений, но мы по-прежнему хотим отображать колонки как можно удобнее для клиента.

Предположим, у нас много столбцов (позже рассмотрим, как пользователь может их настроить). Во-первых, таблица должна как минимум заполнить ширину экрана. Во-вторых, ширина столбцов должна определяться их содержимым и типом значений. Например, короткий/длинный текст, дата, номер, URL и т. д. Колонки с датой должны занимать меньше места, чем колонки длинного текста.

У столбцов должна быть минимальная ширина. В результате часто получается таблица, которая прокручивается и по вертикали, и по горизонтали.

Как макет зависит от ширины окна. Извините за дёрганую гифку, позже я приведу несколько интерактивных примеров

Начнём с того, что мы по максимуму используем для таблицы обычный CSS старой школы. Затем улучшаем его с помощью CSS Grid. Потом я покажу, как средствами Grid пользователи изменяют размер столбцов, что было гораздо неудобнее с обычным CSS.

Ну покажите уже CSS Grid

Я не эксперт по CSS Grid, но он мне нравится. Это чрезвычайно мощный и простой инструмент, который реализует сложные макеты с минимальным количеством кода. Здесь я пропущу введение в технологию. Можете прочесть «Новые макеты CSS» Рейчел Эндрю или «Полное руководство по Grid». Когда закончите размышления о том, где же был этот инструмент всю вашу жизнь, возвращайтесь ко мне.

Затем мы используем волшебное правило grid-template-columns для управления элементами сетки. Да, всего одна строка CSS. Например, если у нас колонка даты и колонка URL, получится примерно так:

Используем одинаковый минимальный размер для всех колонок, но максимальное значение ( fr ) определяется типом данных столбца. Я пробовал auto и max-content , но мы придумали лучший вариант. Вот упрощенный пример: интерактивная таблица с кодом. Попробуйте изменить размер окна.

Изменение ширины колонок с помощью Grid

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

Например, пользователь может создать для контактов настраиваемое поле (дата) под названием «Дата рождения», которое будет отслеживаться в системе для каждого контакта.

Поскольку при создании настраиваемого поля выбирается тип «Дата», система будет обрабатывать это поле с учётом такого типа. Сначала объясню, как происходит изменение ширины.

Замечательно, что достаточно обновить только один элемент в DOM, а не каждую ячейку.

Мы всегда разрабатываем UI с учётом сенсорного ввода, но в данном случае вполне нормально не поддерживать его. Это слишком точное действие. Даже если бы я хотел изменить размер столбца на тачскрине, вероятно, я ожидал бы другого взаимодействия, например, через мультитач-жест.

Колонки фиксированной ширины

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

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

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

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

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

До, во время и после изменения ширины столбца. Опять прошу прощения, что гифка немного дёргается

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

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

Вероятно, адаптивный вариант в любом случае не будет соответствовать намерениям пользователя. Мы не можем предполагать, что для него самое главное — сделать все столбцы меньше, чтобы все они остались на экране. Если человек изменил ширину колонки, он хочет увидеть определённое количество содержимого в этом столбце. Если у нас адаптивный блок, а затем он сужается в окне меньшего размера, то мы игнорируем выбор человека. Ему придётся снова изменить ширину столбца, чтобы увидеть тот же контент. Вряд ли пользователь думает: «Хм, я хочу, чтобы этот столбец занимал 20% окна, даже если я его изменю». Впрочем, я слишком углубляюсь в пограничную ситуацию: на самом деле, пользователи редко изменяют размер окон.

Перемещение и удаление столбцов


Интерфейс для настройки отображаемых столбцов

Представьте, что пользователь изменил набор столбцов через этот интерфейс. Если ни один из выбранных столбцов ранее не изменялся, то они отобразятся с использованием значений по умолчанию grid-template-column в зависимости от типа данных. Например, minmax(150px, 3.33fr) .

Если ширина какой-то колонки зафиксирована в localStorage, мы фиксируем ширину всех выбранных столбцов и тоже сохраняем эти значения в localStorage.

Со временем всё больше и больше столбцов сохраняют фиксированную ширину. Для пользователей единственный способ вернуться к адаптивному дизайну — сбросить колонки.

Мы также храним в localStorage массив идентификаторов столбцов, отдельно от записей о ширине.

«Почему вы просто не использовали <>?»

«Почему вы просто не использовали Flexbox?»

Каждая строка будет оцениваться/выводиться независимо друг от друга. Столбец может быть не выровнен относительно столбца выше из-за разного объёма содержимого.

Я мог бы переключиться на

‘ы для столбцов с вертикальной группировкой ячеек внутри. Но не хотел этого делать. Я хотел использовать

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

«Почему вы просто не использовали ?»

Действительно, — удобный старый элемент. После определения столбцов с помощью стили, применённые к одному, будут эффективно применяться ко всем ячейкам в этом столбце.

Но это оказалось слишком ограниченное решение. Мы попробовали, но очень быстро от него отказались. Настолько быстро, что я уже не могу точно вспомнить, в чём были проблемы. Почти уверен, что невозможно было достичь желаемого уровня адаптивности и оно не сработало с Flexbox и Grid.

«Почему вы просто не использовали table-layout: fixed?»

«Но вы могли обойтись простыми таблицами!»

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

Не переборщите с display: contents

Значение display: contents позволило сохранить разметку таблицы. Используйте его только тогда, когда это действительно нужно. В некоторых браузерах есть или, по крайней мере, были проблемы с доступностью и скрин-ридерами.

Мы обнаружили странный баг display: contents с нативным драг-н-дропом в Firefox.

К счастью, скоро выйдет функция подсеток (subgrid), которая позволит дочерним элементам корректно внедряться в сетки. В нашем приложении мы хотим лишь упростить разметку, но подсетки откроют двери в дикие многомерные сеточные оргии. См. «Почему display: contents не является подсеткой CSS Grid Layout».

Наверное, я что-то забыл

Кажется, была ещё проблема с переполнением текста при изменении размера столбцов, но я уже точно не помню.

Для сохранения заголовков таблиц при прокрутке вниз мы используем position: sticky . Это прекрасное усовершенствование, и оно отлично деградирует в старых браузерах. Тем не менее, для пользователей IE11 у нас есть резервный JavaScript. На самом деле я бы не рекомендовал position: sticky из-за трудностей с горизонтальной прокруткой.

Я даже не упомянул некоторые функции наших представлений списка. Например, пользователи могут применять, сохранять и обмениваться кастомными фильтрами (например, показать лиды выше $500 с потенциальными клиентами в Европе). В этих фильтрах можно запоминать набор столбцов, чтобы всегда отображать определённые столбцы для конкретного рабочего процесса.

Вскоре мы собираемся реализовать массовое редактирование в представлении списка, а также экспорт кастомного представления в CSV.

Источник

Оформляем таблицы с помощью CSS: как работать с полями, границами и свойством z-index

Структура таблицы

Эталонный вариант таблицы

Иллюстрация выше показывает, как можно оформить таблицу с помощью CSS. Первый ряд выступает в качестве заголовка, а разделы таблицы обозначены подзаголовками.

Выше представлена структура таблицы в HTML. В

содержится главное название. В таблице есть несколько секций

, каждая из которых имеет собственный подзаголовок.

Что не так с margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией

, а также между остальными секциями

, есть отступы. Можно подумать, что они определяются свойствами margin-top для

, но это не так.

Свойство border

Самый простой способ получить отступы без использования margin — применить к

border-top: 1 em .

Все секции

, у которых должны быть отступы, имеют класс .section . Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse .

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.

В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями

.

Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border .

Как применить к элементам таблицы border-radius

Задача: добавить к секциям

границы и применить к ним border-radius . Напрямую это сделать невозможно — border и border-radius не работают с

.

Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.

Как оформлять ячейки таблицы

Внешний вид текущей таблицы (см. иллюстрацию ниже) отличается от эталонного варианта, который представлен в начале статьи.

Нужны марджины, а не паддинги

После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child .

В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius . Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.

Как применять z-index к элементам таблицы

Проблемы с box-shadow

На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.

В обычной ситуации можно использовать для решения таких проблем z-index . Но с таблицами всё сложнее: z-index не работает с

. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index , появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0) .

Заключение

Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.

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

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Источник