CSS-таблиці, CSS

Зовнішній вигляд HTML-таблиць можна суттєво вдосконалити за допомогою CSS:

Межі таблиці

Щоб вказати межі CSS таблиці, скористайтеся властивістю border.

У прикладі нижче елементам

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

Властивість border-collapse визначає, чи потрібно об'єднувати подвійну межу в одну:

Якщо вам потрібна проста контурна рамка навколо всієї красивої таблиці CSS, то властивість border потрібно застосовувати до елемента

Ширина та висота таблиці визначається властивостями width та height.

У наведеному нижче прикладі ширина таблиці виставлена на 100%, а висота елементів

Властивість text-align призначена для горизонтального вирівнювання ( по лівому та правому краю, по центру ) вмісту елементів

За промовчанням вміст елементів

У наведеному нижче прикладі оформлення таблиці CSS до вмісту елементів

Властивість vertical-align призначена для вертикального вирівнювання (по верхній та нижній межі, а також посередині) вмісту всередині елементів

За замовчуванням вміст

У наведеному нижче прикладі до вмісту елементів

Для регулювання відстані між межею елемента та його вмістом скористайтеся властивістю padding (для елементів

Можна використовувати властивість border-bottom у елементах

Скористайтеся селектором :hover в елементі

Щоб отримати CSS таблиці з рядками різного кольору,використовуйте селектор nth-child() і задайте всім парним і непарним рядкам різний колір.

У наведеному нижче прикладі показано, як задавати колір фону та тексту для елементів

Адаптивна таблиця CSS показуватиме горизонтальний скролінг, якщо виявиться надто великою для сторінки або екрана.

Створюємо химерну таблицю

У цьому прикладі показано, як створити забавну таблицю за допомогою каскадних таблиць стилів CSS .

Виставляємо розташування підпису таблиці

У цьому прикладі показано, як можна розмістити підпис до таблиці за допомогою CSS.