CSS-таблиці

1. 1. Межі таблиці border
2. 2. Як задати ширину і висоту таблиці
3. 3. Як задати фон таблиці
4. 4. Стовпці таблиці
5. 5. Як додати таблиці заголовок
6. 6. Як прибрати проміжок між рамками осередків
7. 7. Як збільшити проміжок між рамками осередків
8. 8. Як приховати порожні клітинки таблиці
9. 9. Компонування макета таблиці за допомогою властивості table-layout
10. 10. Кращі макети таблиць
11. 1. Горизонтальний мінімалізм
12. 2. Вертикальний мінімалізм
13. 3. «Коробочний» стиль
14. 4. Горизонтальна зебра
15. 5. Газетний стиль
16. 6. Фон таблиці

Наша взаимовыгодная связь https://banwar.org/

Специфікація 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 для елементів <td> і <th>. Фіксувати висоту за допомогою властивості height не рекомендується.

th, td {padding: 10px 15px;}

3. Як задати фон таблиці

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

4. Стовпці таблиці

Модель CSS таблиць орієнтована в основному на рядки (ряди), що формуються за допомогою тега <tr>. На практиці бувають випадки, коли необхідно спеціальне форматування стовпців, яке можливо наступними способами:

за допомогою тега <col> можна задати фон для будь-якої кількості стовпців;

за допомогою селектора table td: first-child, table td: last-child можна задати стилі для першого або останнього стовпця таблиці (за винятком першого осередку заголовка таблиці);

за допомогою селектора table td: nth-child (правило відбору стовпців) можна задати стилі для будь-яких стовпців таблиці.

Детальніше про тег <col> ви можете прочитати тут .

Детальніше про CSS-селектори ви зможете прочитати тут .

5. Як додати таблиці заголовок

Додати заголовок в таблицю можна за допомогою тега <caption>, а за допомогою властивості caption-side його можна помістити перед таблицею або під нею. Для горизонтального вирівнювання тексту заголовка застосовується властивість text-align. Успадковується.

caption-side Значення: top Заголовок таблиці розташовується над таблицею. Значення за замовчуванням. bottom Має у своєму розпорядженні заголовок під таблицею. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. <Table> <caption> Таблиця № 1 </ caption> <tr> <th> Company </ th> <th> Q1 </ th> <th> Q2 </ th> <th> Q3 </ th> <th > Q4 </ th> </ tr> ... </ table> caption {caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; } Мал. 2. Приклад відображення заголовка під таблицею

6. Як прибрати проміжок між рамками осередків

Рамки осередків таблиці за замовчуванням розділені невеликим проміжком. Якщо задати для таблиці border-collapse: collapse, то проміжок забереться. Властивість успадковується.

border-collapse Значення: separate Рамки осередків розташовуються окремо. collapse Рамки осередків зливаються в одну, а проміжки між рамками прибираються. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.

синтаксис

table {border-collapse: collapse;} Мал. 3. Приклад таблиць зі зливаються і роздільними рамками осередків

7. Як збільшити проміжок між рамками осередків

За допомогою властивості border-spacing можна змінювати відстань між рамками осередків. Дана властивість застосовується до таблиці в цілому. Успадковується.

border-spacing Значення: <довжина> <довжина> Додає проміжки між рамками як по вертикалі, так і по горизонталі. Якщо задані дві довжини, то перша завжди визначає горизонтальний проміжок, а друга - вертикальний. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.

синтаксис

table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Мал. 4. Приклад таблиць зі збільшеними проміжками між рамками осередків

8. Як приховати порожні клітинки таблиці

Властивість empty-cells приховує або показує порожні клітинки. Діє тільки на осередки, які не містять будь-якої контент. Якщо для комірки заданий фон, а для таблиці задано table {border-collapse: collapse;}, то клітинкуне буде прихована. Успадковується.

empty-cells Значення: show Рамка і фон порожній осередки будуть отрісовиваться так само, як для елементу таблиці, що має вміст. hide Якщо все осередки рядка порожні, то вся рядок відображається так, якби було задано значення display: none. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. <Table> <tr> <th> Company </ th> <th> Q1 </ th> <th> Q2 </ th> <th> Q3 </ th> </ tr> <tr> <td> Microsoft < / td> <td> 20.3 </ td> <td> 30.5 </ td> <td> </ td> </ tr> <tr> <td> Google </ td> <td> 50.2 </ td> < td> 40.63 </ td> <td> 45.23 </ td> </ tr> </ table> table {border: 1px solid # 69c; border-collapse: separate; empty-cells: hide; } Th, td {border: 2px solid # 69c;} Мал. 5. Приклад приховування порожній осередки таблиці

9. Компонування макета таблиці за допомогою властивості table-layout

Компонування макета таблиці визначається одним з двох підходів: фіксований макет або автоматичний макет. Під компонуванням в даному випадку мається на увазі як розподіляється ширина таблиці між шириною осередків. Властивість не успадковується.

table-layout Значення: auto Значення за замовчуванням. Ширина макета таблиці визначається шириною її вмісту з урахуванням значень властивостей padding-left, padding-right, border-left width плюс одна ширина border-right останньої клітинки в ряду, або заданої шириною осередків і товщиною рамки. Якщо ширина осередків не задана явно, вони можуть бути різної ширини. fixed Властивість спрацює тільки в тому випадку, якщо для таблиці задана ширина. Ширина осередків буде однаковою, а вміст комірок, яка не поміщається в комірку, буде наповзає під вміст сусідній осередку. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.

синтаксис

table {table-layout: fixed;}

10. Кращі макети таблиць

(За матеріалами статті Top 10 CSS Table Designs з журналу Smashing Magazine)

Перейти на сторінку з прикладами

1. Горизонтальний мінімалізм

Горизонтальні таблиці - це таблиці, текст в яких читається по горизонталі. Кожна сутність являє собою окремий рядок. Ви можете оформити подібні таблиці в мінімалістському стилі, помістивши двухпіксельную кордон під заголовком th.

<Table> <tr> <th> Employee </ th> <th> Salary </ th> <th> Bonus </ th> <th> Supervisor </ th> </ tr> <tr> <td> Stephen C . Cox </ td> <td> $ 300 </ td> <td> $ 50 </ td> <td> Bob </ td> </ tr> <tr> <td> Josephin Tan </ td> <td> $ 150 </ td> <td> - </ td> <td> Annie </ td> </ tr> <tr> <td> Joyce Ming </ td> <td> $ 200 </ td> <td> $ 35 </ td> <td> Andy </ td> </ tr> <tr> <td> James A. Pentel </ td> <td> $ 175 </ td> <td> $ 25 </ td> <td> Annie </ td> </ tr> </ table> table {font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text-align: left; } Th {font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px; } Td {color: # 669; padding: 9px 8px; transition: .3s linear; } Tr: hover td {color: # 6699ff;}

При великій кількості рядків такий дизайн таблиць ускладнює їх читання. Для вирішення цієї проблеми можна додати однопіксельні кордон під усіма елементами 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. Фон таблиці

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

table {background: url ( "https://html5book.ru/wp-content/uploads/2019/04/suggestions.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); }