✅ CSS Склад таблиці - Різні властивості з синтаксисом, кодами та висновками

Вступ у стилі CSS

Вступ у стилі CSS

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

Таблиці CSS досить прості для розуміння та використання. Це лише питання запам’ятовування відповідних значень властивостей відображення CSS для основних елементів таблиці HTML. За допомогою CSS ми здатні зробити кілька стильних столів.

Що таке CSS-таблиця стилів?

Таблиця CSS (каскадні таблиці стилів) описує, як викласти набір елементів у рядки та стовпці. CSS за замовчуванням, застосований до таблиці HTML, - це таблиця CSS.

CSS розробив та переробив гнучкість.
Це означає, що макет на основі CSS забезпечує розміщення всіх стилів (тобто від невеликих змін до основних правил) в одному місці.
Змінюючи правила компонування, які ви встановлюєте в цьому аркуші стилів, і ви впливаєте на кожну сторінку, що посилається на нього.
Макет сторінки на основі CSS зазвичай з'явиться швидше на екрані, і навіть завантаження буде швидше, ніж макет на основі таблиці.

Властивості стилю таблиці CSS

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

1. Прикордонний колапс

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

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

Колапс кордону: окремий: Він використовується таким чином, щоб сусідні комірки мали власні та незалежні межі, які не поділяються.

Синтаксис

border-collapse: separate;

Значення за замовчуванням, яке встановлено для властивості межа-згортання, є окремим. Коли вони розділені, браузери розміщують пробіл у декількох пікселях між кожною коміркою, використовуючи властивість пробілу кордонів.

Код

Вихід:

Колапс кордону: колапс: кожен раз, коли ми встановлюємо властивість межа-крапка для краху, він видаляє простір між клітинками.

Синтаксис

border-collapse: collapse;

Код

Вихід:

Навіть якщо ви вилучите цей простір, встановивши атрибут простору комірок для тегу HTML на 0, браузери все одно відображають подвійні межі. Тобто нижня межа однієї комірки з’явиться над верхньою межею комірки внизу, викликаючи подвоєння меж. Встановлення властивості межа-крапка на згортання усуває як простір між клітинками, так і подвоєння граничних ліній.

Колапс кордону: початковий: Він використовується для встановлення властивості границя-згортання за замовчуванням.

Колапс кордону: успадковується: використовується, коли властивість граничного згортання успадковується від своїх батьківських елементів. Ця властивість працює лише тоді, коли застосовано до а тег.

Значення: колапс, відокремлення, початковість, успадкування;

2. Межовий інтервал

Він задає простір, що суміжні рамки, та вміст, що оточує стіл. Він схожий з простором клітинок тегу

атрибут, за винятком того, що він має необов'язкове друге значення. Ця властивість працює лише тоді, коли застосовано до а

тег.

Синтаксис

border-spacing: Length|initial|inherit;

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

Код

Вихід:

У цьому випадку, якщо вказано два значення, то перше значення визначає горизонтальний проміжок між клітинками (пробіл по обидві сторони кожної комірки), а друге значення визначає вертикальний проміжок між осередками. (простір, що відокремлює нижню частину однієї комірки від верхньої частини тієї, що знаходиться під нею).

3. Сторона підписів

Властивість сторони підписів визначає розміщення підпису таблиці. Застосовуючи підпис до таблиці, ця властивість визначає, чи надпис відображається у верхній чи нижній частині таблиці. Заголовок зазвичай з’являється у верхній частині таблиці.

Синтаксис

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

Це властивість може мати одне з чотирьох значень:

Сторона підписів: верх: Це значення за замовчуванням. У цьому воно ставить надписи над таблицею.

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

Код

Вихід:

Сторона підписів: знизу: ставить підписи під таблицею.

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

Код

Вихід:

Сторона підписів: початкова: використовується для встановлення властивості за замовчуванням.
Сторона підписів: nasledit : успадковує це властивість від його батьківського елемента.

Значення: верх, низ, початковий, успадковується;

4. Порожні комірки

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

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

Це властивість може мати одне з чотирьох значень:

Порожня клітинка: show: Ця властивість використовується для відображення меж порожньої комірки.

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

Код

Вихід:

Порожня клітинка: сховати: Ця властивість використовується для приховування меж у порожній комірці.

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

Код

Вихід:

Порожня клітинка: початкова : використовується для встановлення властивості за замовчуванням.
Порожня клітинка: nasledit : успадковує цю властивість від свого батьківського елемента.

Значення: показати, приховати, початково, успадкувати;

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

Контролює, як веб-браузер малює таблицю і може трохи впливати на швидкість, з якою браузер її відображає. Ця властивість може мати одне з чотирьох значень.

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

За замовчуванням властивість - автоматично.

1. Макет таблиці: auto: автоматично змушує ширину елементів автоматично регулюватись відповідно до вмісту.

2. Таблиця - макет: виправлено : фіксований параметр змушує браузер надавати всі стовпці тієї ж ширини, що і стовпці в першому рядку. Якщо вміст виходить ширшим, ніж перший рядок, він буде завернутий, відрізаний або витягнутий за межі комірок.

Код

Вихід:

3. Макет таблиці: початковий: використовується для встановлення властивості за замовчуванням.

4. Макет таблиці: nasledit : успадковує це властивість від його батьківського елемента.

Висновок

За допомогою CSS ми можемо виготовити стильні столи та покращити зовнішній вигляд столу.

CSS Склад таблиці - Різні властивості з синтаксисом, кодами та висновками