В рамках новых спецификаций HTML5 и CSS есть несколько стилей, которые можно применять к таблицам, чтобы мы могли еще больше определять и корректировать их поведение в соответствии с тем, что у нас есть в качестве концепции для создания наших страниц или документов, элементов, которые мы можем изменить это края таблиц, обработки пустых ячеек, в том числе расположение той же таблицы.
границы коллапса
Определяет, как обрабатываются границы в соседних ячейках, значения, которые может принимать это свойство: свернуть и разделить.
С помощью этого свойства мы можем управлять поведением того, как браузер рисует края, давайте посмотрим на это изображение того, как браузер обрабатывает его по умолчанию:
Мы видим, что одна граница рисуется на таблице, а другая - в каждой ячейке таблицы, это создает эффект двойного ребра, теперь давайте посмотрим, как с помощью border-collapse мы можем решить эту проблему.
Пример [b] table {[/ b] [b] border-collapse: collapse; [/ b] [b]} [/ b] th, td {padding: 2px; } | ранг | имя | цвет | Размер & Голоса | |
|---|---|---|---|---|
| любимый: | яблоки | зеленыйсреда500|||
| 2-й Фаворит: | апельсины | оранжевыйбольшой450|||
| Предприятия Фруктовых Данных | ||||
Давайте посмотрим, что этот код генерирует в браузере, прежде чем продолжить объяснение:
Значение коллапса, которое мы помещаем в свойство border-collapse, указывает на то, что мы не хотим, чтобы граница рисовалась на каждом смежном элементе, что создает эффект, который мы видели на предыдущем изображении.
Настройка разделенных краев
Если вместо использования свернуть мы используем значение по умолчанию отдельно от свойства border-collapse, мы можем использовать дополнительные свойства, такие как border-spacing, чтобы иметь возможность определять пространство между границами смежных элементов, давайте посмотрим пример:
Пример [b] таблица {[/ b] [b] border-collapse: отдельная; [/ b] [b] интервал границы: 10px; [/ b] [b]} [/ b] th, td {padding: 2px; } | ранг | имя | цвет | Размер & Голоса | |
|---|---|---|---|---|
| любимый: | яблоки | зеленыйсреда500|||
| 2-й Фаворит: | апельсины | оранжевый|||
| Предприятия Фруктовых Данных | ||||
В этом примере мы просто указываем, что граница будет иметь пространство 10 пикселей для смежных элементов, давайте посмотрим пример того, как это передается в браузер:
Обработка пустых ячеек
Как мы видели на предыдущем изображении, браузер также выделяет пространство с рамкой для пустых ячеек, что иногда может быть нежелательно в нашей таблице, поэтому предыдущий код может внести следующую модификацию для работы с пустыми ячейками.
таблица {бордюр-коллапс: отдельный; интервал границы: 10 пикселей; [b] пустые ячейки: скрыть; [/ b]} th, td {padding: 2px; } Давайте посмотрим, как это выглядит в браузере:
Действительно, мы смогли избавиться от пустых ячеек, не потеряв формат нашей таблицы.
На этом мы заканчиваем урок, как видим, мы можем внести много изменений в наши таблицы, чтобы адаптировать их к тому, что мы можем концептуализировать и адаптировать к нашим потребностям.
СТАТЬИ