Самі по собі таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Разом з тим ці недоліки легко виправити скориставшись міццю стилів. При цьому вельми розширюються кошти з оформлення таблиць, що дозволяє вдало вписати таблиці в дизайн сайту і наочніше уявити табличні дані.
Колір фону осередків
Колір фону одночасно всіх елементів таблиці встановлюється через властивість background, яке застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, спадкуванні властивостей елементів. Хоча властивість background не успадковується, для осередків значенням фону за замовчуванням виступає transparent, тобто прозорість, тому ефект заливки фону виходить і у осередків. Якщо одночасно з TABLE задати колір у селектора TD або TH, то цей колір буде встановлений в якості фону комірки (приклад 2.3).
Приклад 2.3. Колір фону
| Тема 1 | Тема 2 |
|---|---|
| осередок 3 | осередок 4 |
В даному прикладі отримаємо синій колір фону у осередків (тег
Результат даного прикладу показаний на рис. 2.4.
Мал. 2.4. Зміна кольору фону
Поля всередині осередків
Полем називається відстань між краєм вмісту осередку і її кордоном. Зазвичай для цієї мети застосовується атрибут cellpadding тега
| Тема 1 | Тема 2 |
|---|---|
| осередок 3 | осередок 4 |
В даному прикладі за допомогою групування селектор поля встановлені одночасно для селектора TD і TH. Результат прикладу показаний на рис. 2.5.
Мал. 2.5. Поля в осередках
Якщо застосовується стильова властивість padding для елементів таблиці, то дія атрибуту cellpadding тега
| Леонардо | 5 | 8 |
| Рафаель | 4 | 11 |
| Мікеланджело | 24 | 9 |
| Донателло | 2 | 13 |
Результат даного прикладу показаний на рис. 2.6.
Мал. 2.6. Вид таблиці при використанні border-spacing
Браузер Internet Explorer до сьомої версії включно не підтримує властивість border-spacing, тому в цьому браузері для таблиць буде застосовуватися значення cellspacing заданий за замовчуванням (зазвичай воно дорівнює 2px).
При додаванні до селектора TABLE властивості border-collapse із значенням collapse, атрибут cellspacing ігнорується, а значення border-spacing обнуляється.
Межі і рамки
За замовчуванням кордону в таблиці спочатку немає, а її додавання відбувається за допомогою атрибута border тега
| Тема 1 | Тема 2 |
|---|---|
| осередок 3 | осередок 4 |
В даному прикладі використовується подвійна рамка чорного кольору навколо самої таблиці і суцільна рамка білого кольору навколо кожного осередку. Результат прикладу показаний на рис. 2.7.
Мал. 2.7. Кордон навколо таблиці і осередків
Зверніть увагу, що в місці стикування осередків утворюються подвійні лінії. Вони виходять знову ж за рахунок дії атрибута cellspacing тега
| Тема 1 | Тема 2 |
|---|---|
| осередок 3 | осередок 4 |
В даному прикладі створюється суцільна лінія зеленого кольору між осередками і чорна навколо таблиці. Всі кордони всередині таблиці мають однакову товщину. Результат прикладу показаний на рис. 2.8.
Мал. 2.8. Кордон навколо таблиці
Вирівнювання вмісту комірок
За замовчуванням текст в комірці таблиці вирівнюється по лівому краю. Винятком з цього правила є тег
Приклад 2.8. Вирівнювання вмісту комірок по горизонталі
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Тема 1 | осередок 1 | осередок 2 |
|---|---|---|
| Тема 2 | осередок 3 | осередок 4 |
В даному прикладі вміст тега
Мал. 2.9. Вирівнювання тексту в осередках
Вирівнювання по вертикалі в осередку завжди відбувається по її центру, якщо це не обумовлено. Це не завжди зручно, особливо для таблиць, у яких вміст комірок розрізняється по висоті. В такому випадку вирівнювання встановлюють по верхньому краю осередки за допомогою властивості vertical-align, як показано в прикладі 2.9.
Приклад 2.9. Вирівнювання вмісту комірок по вертикалі
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Тема 1 | Тема 2 |
|---|---|
| осередок 1 | осередок 2 |
В даному прикладі встановлюється висота заголовка
Мал. 2.10. Вирівнювання тексту в осередках
порожні осередки
Браузери інакше відображають осередок, усередині якої нічого немає. «Нічого» в даному випадку означає, що всередину вічка не додали ні малюнок, ні текст, причому пробіл в розрахунок не береться. Природно, вид осередків розрізняється тільки в тому випадку, якщо навколо них встановлена межа. При використанні невидимою рамки, вид осередків, незалежно від того, є в них що-небудь чи ні, збігається.
Старі браузери не відображали колір фону порожніх клітинок вигляду
На щастя епоха однопіксельні малюнків і всіляких розпірок на їх основі пройшла. Браузери досить коректно працюють з таблицями і без присутності вмісту осередків.
Для управління видом порожніх клітинок використовується властивість empty-cells, при значенні hide межа і фон в порожніх клітинках не відображається. Якщо все осередки в рядку порожні, то рядок ховається цілком. Осередок вважається порожній в наступних випадках:
- немає взагалі ніяких символів;
- в комірці міститься тільки переклад рядка, символ табуляції або пробіл;
- значення visibility встановлено як hidden.
Додавання нерозривного пробілу сприймається як видиме зміст, тобто осередок вже буде не пустий (приклад 2.10).
Приклад 2.10. порожні осередки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Леонардо | 5 | 8 |
| Рафаель | 11 | |
| Мікеланджело | 24 | |
| Донателло | 13 |
Вид таблиці в браузері Safari показаний на рис. 2.11а. Та ж таблиця в браузері IE7 продемонстрована на рис. 2.11б.
а. У браузері Safari, Firefox, Opera, IE8, IE9
б. У браузері IE7
Мал. 2.11. Вид таблиці з порожніми осередками
CSS дозволяє установть не тільки стиль кордону таблиці, але і стиль меж окремих осередків. Так як у кожного осередку свої кордони, то між сусідніми осередками межа виходить здвоєний. Але існує можливість об'єднати кордони сусідніх осередків в одну. Для цього є властивість border-collapse. Воно приймає значення:
border-collapse: separate - у кожного осередку своя межа (за замовчуванням)
border-collapse: collapse - спільний кордон
border-collapse: inherit - значення приймається від батьківського елемента
Для прикладу створимо таблицю і поставимо рамку осередкам всіх таблиць, які будуть на сторінці. Спочатку не будемо нічого змінювати, щоб подивитися, як таблиця буде виглядати:
стиль:
1 |
Розмір таблиціПісля додавання рамок до осередків таблиці стало помітно, що вміст комірок занадто близько розташоване до країв. Для додавання вільного простору між краями осередків і їх вмістом можна скористатися властивістю padding: Th, td (padding: 7px;) Спробувати » Розмір таблиці залежить від її вмісту, але часто виникають ситуації, коли таблиця виявляється занадто вузькою і з'являється необхідність її розтягнути. Ширину і висоту таблиці можна змінювати за допомогою властивостей width і height, задаючи потрібні розміри або самої таблиці або осередкам: Table (width: 70%;) th (height: 50px;) Спробувати » вирівнювання текстуЗа замовчуванням текст в заголовних осередках таблиці вирівнюється по центру, а в звичайних осередках текст вирівняний по лівому краю, використовуючи властивість text-align можна управляти вирівнюванням тексту по горизонталі. CSS властивість vertical-align дозволяє управляти вирівнюванням текстового вмісту по вертикалі. За замовчуванням текст вирівняний вертикально по центру осередків. Вертикальне вирівнювання можна перевизначити за допомогою одного з значень властивості vertical-align:
Чергування фонового кольору рядків таблиціПри перегляді великих таблиць, що містять багато рядків з великою кількістю інформації, буває важко відстежити, які дані відносяться до конкретної рядку. Щоб допомогти користувачам зорієнтуватися, можна використовувати два різних фонових кольору по черзі. Для створення описаного ефекту можна використовувати селектор class, додаючи його до кожної другому рядку таблиці:
Додавати атрибут class до кожної другому рядку досить обтяжлива заняття. В CSS3 був доданий псевдо-клас: nth-child, що дозволяє вирішити цю проблему альтернативним шляхом. Тепер ефекту чергування можна досягти виключно засобами CSS, не вдаючись до зміни HTML-розмітки документа. За допомогою псевдо-класу: nth-child можна вибрати всі парні або непарні рядки таблиці, використовуючи одне з ключових слів: even (парні) чи odd (непарні): Tr: nth-child (odd) (background-color: # EAF2D3;) Спробувати » Зміна фону рядка при наведенні курсоруЩе одним способом підвищення зручності читання табличних даних є зміна фонового кольору рядка при наведенні на неї курсора миші. Це допоможе виділити потрібний вміст таблиці і підвищить візуальне сприйняття даних. Реалізувати такий ефект дуже просто, для цього потрібно додати псевдо-клас: hover до селектору рядки таблиці і задати потрібний колір фону: Tr: hover (background-color: # E0E0FF;) Спробувати » Вирівнювання таблиці по центруВирівнювання HTML таблиці по центру можливо тільки в тому випадку, якщо ширина таблиці менше, ніж ширина її батьківського елемента. Щоб вирівняти таблицю по центру, треба скористатися властивістю margin, задавши йому мінімум два значення: перше значення буде відповідати за зовнішній відступ таблиці зверху і знизу, а друге - за автоматичне вирівнювання по центру: Table (margin: 10px auto;) Спробувати » Якщо вам потрібні різні відступи зверху і знизу таблиці, то можна задати властивості margin три значення: перше відповідатиме за відступ зверху, друге за вирівнювання по горизонталі, а третє за відступ знизу: Table (margin: 10px auto 30px;) Ми вже з'ясували з вами, що у HTML-таблиць є рамки, Хоча за замовчуванням їх браузери і не показують. Але це ще не все, у кожного елементу таблиці теж є рамка, яка називається межа осередку. Але і це ще не все, використовуючи спеціальні атрибути тега Для зміни відстані між осередками(Їх межами) і від осередків до рамкитаблиці в тезі Щоб встановити внутрішні відступи від меж осередків до їх вмістунеобхідно в тезі Зверніть увагу, що браузери за замовчуванням встановлюють невеликі (в два пікселя) значення cellspacing і cellpadding, тому щоб прибрати відстані зовсім - встановіть у атрибутів значення нуль (0). Приклад кордонів, рамок і відступів HTML-таблиць
Таблиця тільки з встановленими рамкою і кордонами осередків:
Результат в браузері Таблиця зі зміненими відступами і відстанями: Природно не обов'язково малювати у таблиці рамку і межі комірок, щоб змінювати внутрішні відступи і відстані між осередками. Згідно синтаксису HTML, браузери додають значення cellspacing і cellpadding до розмірів таблиці та її осередків. Наприклад, якщо ви встановите ширину осередку в 100 пікселів і cellpadding = "10" - браузери додадуть до ширини 20 пікселів (по 10 зліва і справа) і вона стане дорівнює 120 пікселів. Загалом, по ходу справи розберетеся. Відступ від теми або як прибрати відступи по краях сторінкиСпочатку всі браузери встановлюють невеликі відступи по краях HTML-сторінки, які часто бувають не потрібні, тому зараз ви навчитеся їх прибирати. Взагалі, цю інформацію слід було б помістити в початок підручника, але там би вона навряд чи вам у пригоді. Свого часу у тега існувало чотири атрибута, які встановлювали розмір цих відступів для кожної сторони сторінки: topmargin (зверху), rightmargin (праворуч), bottommargin (знизу) і leftmargin (зліва). Зараз ці атрибути застаріли, тому будемо застосовувати стилі (CSS). Отже, змінити відстані відступів по краях сторінки можна кількома способами, я покажу вам два, а про третій дізнаєтеся, якщо вирішите вивчати CSS.Спосіб перший. B тезі вказати атрибут style з наступними значеннями: style = "margin: 0"> ... - прибирає відступи відразу з усіх боків HTML-сторінки. style = "Margin: зверху справа знизу зліва">... - регулює розмір відступів для кожної сторони за годинниковою стрілкою. Як правило використовуються розміри в пікселях, наприклад: style = "margin: 5px 3px 4px 5px"> ...Другий і більш зручний спосіб. У тезі
Домашнє завдання. У цьому уроці я теж не буду все докладно описувати - тільки загальні моменти. Для повноти картини подивіться результат прикладу.
Специфікація CSS дає необмежені можливості для оформлення таблиць. За замовчуванням таблиця і елементи таблиці не мають видимих кордонів і фону, при цьому осередку всередині таблиці не прилягають впритул один до одного. Ширина осередків таблиці визначається шириною їх вмісту, тому ширина стовпців таблиці може бути різною. Висота всіх осередків ряду однакова і визначається висотою найвищої осередку. форматування таблиць1. Межі таблиці borderТаблиця і осередки всередині неї по-замовчуванням відображаються в браузері без видимих кордонів. межі таблицізадаються властивістю border: Table (border-collapse: collapse; / * прибираємо порожні проміжки між осередками * / border: 1px solid grey; / * встановлюємо для таблиці зовнішній кордон сірого кольору товщиною 1px * /) Межі осередків заголовкакожного стовпчика задаються для елемента th: Th (border: 1px solid grey;) межі осередківтіла таблиці задаються для елемента td: Td (border: 1px solid grey;) Товщина рамок сусідніх вічок не подвоюється, тому задати кордону для всієї таблиці можна в такий спосіб: Th, td (border: 1px solid grey;) Зовнішню кордон таблиці можна виділити, задавши їй збільшену ширину: Table (border: 3px solid grey;) Межі можна задавати частково: / * Встановлюємо для таблиці зовнішній кордон сірого кольору товщиною 3px * / table (border-top: 3px solid grey;) / * задаємо для осередку тіла таблиці кордон сірого кольору товщиною 1px * / td (border-bottom: 1px solid grey;) Детальніше про властивість border ви можете прочитати. 2. Як задати ширину і висоту таблиціЗа замовчуванням ширина і висота таблицівизначається вмістом її осередків. Якщо ширина не задана, то вона буде дорівнює ширині самого широкого ряду (рядки). Ширина таблиці і стовпцівзадається за допомогою властивості width. Якщо для таблиці задано table (width: 100%;), то ширина таблиці буде дорівнює ширині блоку-контейнера, в якому вона знаходиться. Ширину таблиці і стовпців зазвичай задають в px або%, наприклад: Table (width: 600px;) th (width: 20%;) td: first-child (width: 30%;) Висота таблиціне ставить. висотою рядівтаблиці можна управляти, додавши верхній і нижній padding для елементів і | . Фіксувати висоту за допомогою властивості height не рекомендується. | Th, td (padding: 10px 15px;) 3. Як задати фон таблиціЗа замовчуванням фон таблиціі осередків прозорий. Якщо сторінка або блок, що містять таблицю, мають фон, то він буде просвічуватися крізь таблицю. Якщо фон заданий і для таблиці і для осередків, то в місцях накладення фону таблиці і осередків буде видно фон тільки осередків. В якості фону для таблиці в цілому і її осередків можуть виступати: 4. Стовпці таблиціМодель CSS таблиць орієнтована в основному на рядки (ряди), що формуються за допомогою тега за допомогою тега Можна задати фон для будь-якої кількості стовпців; за допомогою селектора table td: first-child, table td: last-child можна задати стилі для першого або останнього стовпця таблиці (за винятком першого осередку заголовка таблиці); за допомогою селектора table td: nth-child (правило відбору стовпців) можна задати стилі для будь-яких стовпців таблиці. Детальніше про CSS-селектори ви зможете прочитати. 5. Як додати таблиці заголовокДодати заголовок в таблицю можна за допомогою тега
 Мал. 2. Приклад відображення заголовка під таблицею 6. Як прибрати проміжок між рамками осередківРамки осередків таблиці за замовчуванням розділені невеликим проміжком. Якщо задати для таблиці border-collapse: collapse, то проміжок забереться. Властивість успадковується. синтаксис Table (border-collapse: collapse;) 7. Як збільшити проміжок між рамками осередківЗа допомогою властивості border-spacing можна змінювати відстань між рамками осередків. Дана властивість застосовується до таблиці в цілому. Успадковується. синтаксис Table (border-collapse: separate; border-spacing: 10px 20px;) table (border-collapse: separate; border-spacing: 10px;) 8. Як приховати порожні клітинки таблиціВластивість empty-cells приховує або показує порожні клітинки. Діє тільки на осередки, які не містять будь-якої контент. Якщо для комірки заданий фон, а для таблиці задано table (border-collapse: collapse;), то клітинкуне буде прихована. Успадковується.
 Мал. 5. Приклад приховування порожній осередки таблиці 9. Компонування макета таблиці за допомогою властивості table-layoutКомпонування макета таблиці визначається одним з двох підходів: фіксований макет або автоматичний макет. Під компонуванням в даному випадку мається на увазі як розподіляється ширина таблиці між шириною осередків. Властивість не успадковується. синтаксис Table (table-layout: fixed;) 10. Кращі макети таблиць1. Горизонтальний мінімалізмГоризонтальні таблиці - це таблиці, текст в яких читається по горизонталі. Кожна сутність являє собою окремий рядок. Ви можете оформити подібні таблиці в мінімалістському стилі, помістивши двухпіксельную кордон під заголовком th.
При великій кількості рядків такий дизайн таблиць ускладнює їх читання. Для вирішення цієї проблеми можна додати однопіксельні кордон під усіма елементами td. Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; transition: .3s linear;) / * решті код - як в прикладі вище * / Додавання ефекту: hover для елемента tr полегшить читання таблиць, оформлених в мінімалістському стилі. При наведенні курсора миші на осередок, інші осередки тієї ж рядки виділяються одночасно, що спрощує процес відстеження інформації, якщо таблиці мають кілька стовпців. Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;) 2. Вертикальний мінімалізмНезважаючи на те, що подібні таблиці використовуються рідко, тим не менш, вертикально орієнтовані таблиці корисні для категоризації або порівняння опису об'єктів, представлених колонкою. Можна оформити їх в мінімалістському стилі, додавши пробіл, що розділяє стовпці. Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- right: 30px solid #fff; border-left: 30px solid #fff; color: # 669; padding: 12px 2px;) 3. «Коробочний» стильНайбільш надійним стилем для оформлення таблиць всіх типів, є так званий «коробковий» стиль. Досить підібрати хорошу колірну гамму, а потім задати колір фону для всіх осередків. Не забудьте підкреслити відмінність між рядками, встановивши кордони як роздільник. Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;) Найскладніше - знайти ту колірну гамму, яка буде гармонійно поєднуватися з вашим сайтом. Якщо сайт навантажений з графіки та дизайну, то вам буде досить важко використовувати цей стиль. Table (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- left: 1px solid # 9baff1; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px ;) 4. Горизонтальна зебраЗебра-таблиця виглядає досить привабливою і зручною. Додатковий колір фону може служити в якості візуальної підказки для людей при читанні таблиці. Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( background: # e8edff;) 5. Газетний стильДля досягнення так званого газетного ефекту, можна застосувати кордону для елементів таблиці і пограти з осередками всередині. Легкий, мінімалістичний газетний стиль може виглядати так: обіграйте колірну гамму, додайте кордону, відступи, різні фони, і ефект: hover при наведенні на рядок. Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px dashed # 69c; padding: 12px 17px;) td (color: # 669; padding: 7px 17px; ) tr: hover td (background: #ccddff;)
Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff;) tr: hover td (background: # 99bcff;)
Table (border: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: uppercase; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px dashed # 6cf; padding: 10px 20px;) 6. Фон таблиціЯкщо ви шукаєте швидкий і унікальний спосіб оформлення таблиці, виберіть привабливе зображення або фото, які стосуються теми таблиці і встановіть її фоном таблиці. Png ") 98% 86% no-repeat;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- top: 1px solid white; padding: 10px 12px; background: rgba (51, 51, 153, .2); transition: .3s;) tr: hover td (background: rgba (51, 51, 153, .1); ) Сподобалася стаття? Поділіться з друзями!
Поділитися в Facebook
Читайте також
наверх
|
Мал. 3. Приклад таблиць зі зливаються і роздільними рамками осередків
Мал. 4. Приклад таблиць зі збільшеними проміжками між рамками осередків
