Статьи

Властивості 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-таблиці:

Давайте згадаємо стандартний стиль 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-стилі для форм .

Новости

Как создать фото из видео
Кризис заставляет искать дополнительные источники дохода. Одним из таких источников может стать торговля на валютном рынке Форекс. Но чтобы не потерять свои деньги необходимо работать с надежным брокером.

Как оформить группу в вконтакте видео
Дано хотел свой магазин в вк, но не знал с чего начать его делать. Так как хотелось не банальный магазин с кучей ссылок и фото, а красиво оформленный. С меню, с аватаркой. После просмотра видео создал

Как оформить диск малыш от рождения до года из фото и видео
Оформить диск "Малыш от рождения до года" из фото и видео можно совершенно разными способами! Кто-то для достижения данной цели идет на шоу-таланты, кто-то пользуется услугами профессионалов, а кто-то