Властивості CSS для таблиць. Аналоги атрибутів - підручник CSS

1. Атрибут align
2. Атрибут background
3. Атрибут bgcolor
4. Атрибути border, bordercolor і frame
5. Атрибут rules
6. Атрибут cellpadding
7. Атрибут cellspacing
8. Атрибути width і height
9. завершення

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

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

Для додання таблиць красивого зовнішнього вигляду можна використовувати багато CSS-властивості, з якими ви вже добре знайомі: padding, border, width, height, color, display та інші.

Давайте згадаємо стандартний стиль HTML-таблиці:

Погодьтеся, на даному етапі вид зовсім непривабливий. Але шляхом нескладних маніпуляцій зі стилями CSS можна зробити цю таблицю дуже симпатичною. Нижче показаний наш варіант оформлення, а також наведено готовий код, який ви при бажанні можете доповнити або змінити:

th {text-align: left; color: #fff; background-color: # 706d97; } Td {min-width: 250px; color: # 696969; border-bottom: 1px solid #eee; } Th, td {padding: 10px; height: 20px; } Td: first-child {width: 150px; min-width: 0; } Th: last-child {text-align: right; } Td: last-child {width: 80px; min-width: 0; text-align: right; } Tr: nth-child (odd) {background-color: #eee; }

Як бачите, все властивості нам вже знайомі. До самого тегу <table> ми застосували атрибут cellspacing зі значенням 0, який прибрав прогалини між осередками. Але того ж ефекту можна домогтися і без атрибута, використовуючи тільки CSS. Таким же чином можна замінювати і інші табличні атрибути. Про це ми і поговоримо далі.

Як ви знаєте, в HTML існують спеціальні атрибути для настройки базового стилю таблиць: cellpadding, cellspacing, border, bordercolor і інші. Але набагато зручніше налаштовувати зовнішній вигляд елементів через CSS. Ми розповімо, які властивості є аналогами табличних атрибутів.

Атрибут align

За допомогою цього атрибута можна вирівняти всю таблицю щодо краю вікна браузера, вибравши одне з трьох значень - left, center або right. Зверніть увагу, атрибут вирівнює не текст, а сам блок таблиці. Аналогом CSS в даному випадку є комбінація властивостей:

/ * Аналог align = "left" * / table {display: table; margin-right: auto; } / * Аналог align = "center" * / table {display: table; margin-left: auto; margin-right: auto; } / * Аналог align = "right" * / table {display: table; margin-left: auto; }

Також таблицю можна вирівняти, задавши її батьківського елементу властивість text-align з відповідним значенням. Але це спрацює тільки за умови, що для таблиці встановлено властивість display із значенням inline або inline-block.

Атрибут background

Даний атрибут дозволяє задати фонове зображення для всієї таблиці, вказавши його URL-адресу в якості значення. Контролювати поведінку такого фону немає можливості, на відміну від аналога CSS - властивості background-image і інших властивостей для налаштування фону.

/ * Аналог background = "img / bg.png" * / table {background-image: url (img / bg.png); }

Атрибут bgcolor

Встановлює колір фону для всієї таблиці. Ви напевно вже здогадалися, яким CSS-властивість можна успішно замінити атрибут bgcolor:

/ * Аналог bgcolor = "# eaeaea" * / table {background-color: #eaeaea; }

Атрибути border, bordercolor і frame

Атрибути таблиці border, bordercolor і frame задають товщину рамки, її колір і розташування відповідно. Рекомендуємо забути про них і користуватися CSS-властивість border (і його похідними), яке об'єднує ці атрибути і дає навіть більше.

/ * Аналоги border = "1" і bordercolor = "# eee" * / table {border: 1px solid #eee; }

Якщо в CSS задано властивість border, воно перекриє значення атрибута. Така ж поведінка буде і у випадку з іншими атрибутами, що мають точний аналог в CSS.

Атрибут rules

Атрибут, який визначає, де відображати кордону (навколо осередків, між колонками, між рядками і т. Д.), Знову-таки можна замінити CSS-властивість border, застосовуючи його до відповідних тегам таблиці.

/ * Аналог rules = "cols" * / td {border-right: 1px solid black; }

Атрибут cellpadding

Встановлювати відступи між внутрішніми сторонами осередки і її вмістом можна не тільки через атрибут, але і за допомогою CSS-властивості padding, застосованого до тегу <td>.

/ * Аналог cellpadding = "10" * / td {padding: 10px; }

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

Атрибут cellspacing

Цей атрибут встановлює відстань між самими елементами таблиці. Як аналог існує CSS-властивість border-spacing, за допомогою якого теж можна створити проміжки між осередками. Крім того, ця властивість може приймати два значення одночасно (розділяються пропуском): одне для проміжків по горизонталі, друге - по вертикалі.

/ * Аналог cellspacing = "10" * / table {border-spacing: 10px; }

Атрибути width і height

Зрозуміло, ці атрибути можна легко замінити на CSS width і height:

/ * Аналоги width = "500" і height = "500" * / table {width: 500px; height: 500px; }

завершення

Як ви вже знаєте, в сучасній веб-розробці прийнято відокремлювати структуру документа від його візуального оформлення. Саме тому рекомендується використовувати CSS і не звертатися до HTML-атрибутам, які призначені для зміни зовнішнього вигляду. Це забезпечує більш зручну розробку, редагування і подальшу підтримку стилів на сайті.

Далі в підручнику: CSS-стилі для форм .