- Атрибут align
- Атрибут background
- Атрибут bgcolor
- Атрибути border, bordercolor і frame
- Атрибут rules
- Атрибут cellpadding
- Атрибут cellspacing
- Атрибути width і height
- завершення
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-стилі для форм .