ГРУППА КУРСА
|
Главная >
Учебник CSS >
CSS стиль таблицыОтображение границ ячеекCSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения: border-collapse: separate - у каждой ячейки своя граница (по умолчанию) border-collapse: collapse - общая граница border-collapse: inherit - значение принимается от родительского элемента Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть: Стиль: +
HTML код:
Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться. В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются. Теперь установим таблице свойство border-collapse.
Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками. Расстояние между ячейкамиCSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Расстояние указывается в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse. Создадим ещё одну таблицу и установим расстояние между ячейками: Стиль:
HTML код:
Свойству border-spacing можно указать два значения через пробел. При этом, первое значение - это расстояние по горизонтали, а второе - по вертикали. Укажем созданной таблице разные расстояния.
Положение заголовка таблицыДля таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения: caption-side: top - над таблицей (по умолчанию) caption-side: bottom - под таблицей Существуют другие значения, но они поддерживаются не всеми браузерами. Добавим второй таблице заголовок и расположим его под таблицей:
Отображение пустых ячеекДля пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения: empty-cells: show - ячейки видны (по умолчанию) empty-cells: hide - ячейки не видны Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица. Стиль:
HTML код:
Пустая ячейка видна, у неё отображаются рамка и фон. Теперь добавим таблице свойство empty-cells.
Обратите внимание, пустая ячейка не отображается в таблице |