✅ CSS Table Styling - Различные свойства с синтаксисом, кодами и выводом

Введение в CSS Table Styling

Введение в CSS Table Styling

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

Таблицы CSS довольно просты для понимания и использования. Это всего лишь вопрос запоминания соответствующих значений свойств отображения CSS для основных элементов таблицы HTML. С помощью CSS мы можем создавать стильные таблицы.

Что такое CSS Table Styling?

Таблица CSS (каскадные таблицы стилей) описывает, как расположить набор элементов в строках и столбцах. CSS по умолчанию, применяемый к таблице HTML, является таблицей CSS.

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

Свойства стиля таблицы CSS

Ниже приведены различные свойства стилей таблиц CSS:

1. Пограничный коллапс

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

Синтаксис: border-collapse: separate|collapse|initial|inherit;

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

Синтаксис

border-collapse: separate;

Значение по умолчанию, которое установлено для свойства border-collapse, является отдельным. Когда они разделены, браузеры помещают пространство в пару пикселей между каждой ячейкой, используя свойство border-spacing.

Код

Выход:

Border collapse: collapse: всякий раз, когда мы устанавливаем свойство border-collapse для свертывания, оно удаляет пространство между ячейками.

Синтаксис

border-collapse: collapse;

Код

Выход :

Даже если вы удалите это пространство, установив атрибут cellspacing для тега HTML на 0, браузеры по-прежнему будут отображать двойные границы. То есть нижняя граница одной ячейки появится над верхней границей ячейки ниже, что приведет к удвоению границ. Установка свойства border-collapse для коллапса устраняет как пространство между ячейками, так и удвоение границ.

Border collapse: initial: используется для установки для свойства border-collapse значения по умолчанию.

Border collapse: наследовать: используется, когда свойство border-collapse наследует от своих родительских элементов. Это свойство работает только применительно к тег.

Значения: коллапс, отдельный, начальный, наследовать;

2. Расстояние между границами

Он устанавливает пространство смежных границ и содержимое, окружающее таблицу. Это похоже на пространство тегов тега

атрибут, за исключением того, что он имеет необязательное второе значение. Это свойство работает только применительно к

тег.

Синтаксис

border-spacing: Length|initial|inherit;

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

Код

Выход:

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

3. Заголовок

Свойство caption-side определяет размещение заголовка таблицы. Применительно к заголовку таблицы это свойство определяет, будет ли заголовок отображаться вверху или внизу таблицы. Подпись обычно появляется в верхней части таблицы.

Синтаксис

caption-side: top|bottom|initial|inherit;

Это свойство может иметь одно из четырех значений:

Заголовок: top: это значение по умолчанию. В этом он помещает заголовок над таблицей.

Синтаксис: caption-side:top;

Код

Выход:

Заголовок: нижний: помещает заголовок ниже таблицы.

Синтаксис: caption-side:bottom;

Код

Выход:

Заголовок: начальный: используется для установки значения свойства по умолчанию.
Заголовок: заголовок: наследует это свойство от родительского элемента.

Значения: верх, низ, начальный, наследовать;

4. Пустые клетки

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

Синтаксис: empty-cells: show|hide|initial|inherit;

Это свойство может иметь одно из четырех значений:

Empty-cell: show: Это свойство используется для отображения границ пустой ячейки.

Синтаксис: empty-cells: show;

Код

Выход:

Empty-cell: hide: Это свойство используется для скрытия границ в пустой ячейке.

Синтаксис: empty-cells: hide;

Код

Выход:

Пустая ячейка: начальная : используется для установки значения свойства по умолчанию.
Пустая ячейка: наследовать: наследует это свойство от родительского элемента.

Значения: показать, скрыть, инициализировать, наследовать;

5. Таблица-макет

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

Синтаксис: table-layout: auto|fixed|initial|inherit;

Свойство по умолчанию - auto.

1. Макет таблицы: auto: auto автоматически настраивает ширину элементов по размеру содержимого.

2. Таблица - макет: фиксированный : фиксированный параметр заставляет браузер отображать все столбцы одинаковой ширины со столбцами в первой строке. Если содержимое выходит за пределы первой строки, оно будет обернуто, обрезано или расширено за пределы ячеек.

Код

Выход:

3. Table-layout: initial: используется для установки значения свойства по умолчанию.

4. Таблица-макет: наследовать: наследует это свойство от его родительского элемента.

Вывод

С помощью CSS мы можем создавать стильные таблицы и улучшать их внешний вид.

CSS Table Styling - Различные свойства с синтаксисом, кодами и выводом