Відстань між стовпчиками в таблиці ЦСС.

Добрий день. Таблиця як елемент має свої особливості, які сильно відрізняють її від більш звичних багатьом блоків. Сьогодні я хотів би розповісти про те, як прописується в css відстань між осередками таблиці.

Відмінності з блочною моделлю

Щоб ставити відстань між блоками зазвичай використовують зовнішні відступи, але у випадку з осередками це не працює. Внутрішні відступи осередків можна прописати, а ось зовнішні - немає.

Це начебто і невелика біда, тільки ось за замовчуванням осередку в таблиці розташовані не впритул один до одного, а з невеликими відступами, які не завжди потрібні. Як їх прибрати?

Властивість border-spacing

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

Важливий момент: задавати border-spacing потрібно всій таблиці.Тобто ось так:

Table (
Border-spacing: 0;
}

Цим правилом ми прибираємо відстань між осередками і тепер вони щільно притиснуті один до одного. Відповідно, у точках ви можете задати це відстань, якщо це буде необхідно.

Можливо, трохи незвично, що властивість задається для селектора table, але це така особливість таблиці, просто потрібно запам'ятати її. Властивість не буде працювати, якщо для таблиці також задати border-collapse: collapse. В такому випадку у осередків автоматично забираються зовнішні відступи, і необхідності в border-spacing немає ніякої.

Застарілий спосіб задати зовнішні відступи осередкам

Раніше для цього до тегу

додавали атрибут cellspacing, який і визначав відступ, але сьогодні такий спосіб не рекомендується використовувати. Це засмічує код і не відповідає сучасним стандартам веб-розробки.

Справа в тому, що відступи відносяться до зовнішнім виглядомелемента, а html абсолютно не годиться для цієї справи. Стандартами визначено, що за це повинен відповідати в основному css.

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

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

Для того, щоб зробити відступи в комірці слід використовувати атрибут cellpaddingдля тега

. Однак, є й інший, більш кращий варіант: CSS.

В такому випадку відступи задаються за допомогою властивості padding. З його допомогою не важко зробити відступ там, де треба, тобто - зверху, праворуч, знизу або ліворуч, використовуючи, відповідно, одне з даних властивостей: padding-top, padding-right, padding-bottomі padding-left.

Можна задати, на скільки саме пікселів повинен здійснюватися відступ. Наведемо приклад, в якому нижній відступ становитиме 20 пікселів, а всі інші будуть по 10 . такий CSS-код буде виглядати ось так:

Td (padding: 10px; padding-bottom: 20px;)

А повний код стилів на даному етапі:

Table (border: solid 1px blue; border-collapse: collapse;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

Результат в браузері:

Відступи між осередками

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

Відступи в таблицях бувають не тільки всередині осередків. Вони можуть також бути присутнім і між самими осередками.

Існує дві можливості зробити відступи між осередками:

1. з використанням атрибута cellspacingдля тега

.

з використанням CSS-Властивості border-spacing.

Треба підкреслити, що border-spacingпрописується для таблиці в цілому, в той час як властивість paddingпрописується безпосередньо для осередків.

Давайте глянемо на приклад:

Table (border: solid 1px blue; border-collapse: separate; border-spacing: 5px;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

І на отриманий результат:

Відразу обмовимося, що не треба намагатися зробити такі відступи за допомогою border-collapse: collapse. Адже при використанні цієї опції осередку «липнуть» один до одного.

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

Самі по собі таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Разом з тим ці недоліки легко виправити скориставшись міццю стилів. При цьому вельми розширюються кошти з оформлення таблиць, що дозволяє вдало вписати таблиці в дизайн сайту і наочніше уявити табличні дані.

Колір фону осередків

Колір фону одночасно всіх елементів таблиці встановлюється через властивість background, яке застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, спадкуванні властивостей елементів. Хоча властивість background не успадковується, для осередків значенням фону за замовчуванням виступає transparent, тобто прозорість, тому ефект заливки фону виходить і у осередків. Якщо одночасно з TABLE задати колір у селектора TD або TH, то цей колір буде встановлений в якості фону комірки (приклад 2.3).

Приклад 2.3. Колір фону

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладіотримаємо синій колір фону у осередків (тег ) І червоний у заголовка (тег ). Це пов'язано з тим, що стиль для селектора TH не визначений, тому «просвічується» фон батька, в даному випадку, селектора TABLE. А колір для селектора TD вказаний явно, ось осередки і «заливаються» синім кольором.

Результат даного прикладу показаний на рис. 2.4.

Мал. 2.4. Зміна кольору фону

Поля всередині осередків

Полем називається відстань між краєм вмісту осередку і її кордоном. Зазвичай для цієї мети застосовується атрибут cellpadding тега

. Він визначає значення поля в пікселах з усіх боків осередки. Допускається використовувати стильову властивість padding, додаючи його до селектора TD, як показано в прикладі 2.4.

Приклад 2.4. Поля в таблицях

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі за допомогою групування селектор поля встановлені одночасно для селектора TD і TH. Результат прикладу показаний на рис. 2.5.

Мал. 2.5. Поля в осередках

Якщо застосовується стильова властивість padding для елементів таблиці, то дія атрибуту cellpadding тега

ігнорується.

Відстань між осередками

Для зміни відстані між осередками застосовується атрибут cellspacing тега

. Вплив цього атрибута добре помітно при використанні кордонів навколо осередків або при заливці осередків кольором, який виділяється на тлі сторінки. Як заміну cellspacing виступає стильова властивість border-spacing, воно встановлює відстань між кордонами осередків. Одне значення встановлює одночасно відстань по вертикалі і горизонталі між кордонами осередків. Якщо значень у цієї властивості два, то перше визначає горизонтальну відстань (тобто зліва і праворуч від осередку), а друге - вертикальне (зверху і знизу).

Властивість border-spacing діє тільки в тому випадку, якщо для селектора TABLE не задано властивість border-collapse із значенням collapse (приклад 2.5).

Приклад 2.5. Відстань між кордонами осередків

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Леонардо	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 тега

. Браузери по-різному відображають таку кордон, тому краще не вказувати цей атрибут взагалі, а малювання кордонів покласти на стилі. Розглянемо два методи, безпосередньо пов'язаних зі стилями.

Використання атрибута cellspacing

Відомо, що атрибут cellspacing тега

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

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

Застосування властивості border

Стильова властивість border одночасно встановлює колір кордону, її стиль і товщину навколо елементу. Там, де необхідно створити окремі лінії на різних сторонах, краще використовувати похідні - border-left, border-right, border-top і border-bottom, ці властивості відповідно визначають кордон зліва, справа, зверху і знизу.

Застосовуючи властивість border до селектора TABLE, ми додаємо рамку навколо таблиці в цілому, а до селектора TD або TH - рамку навколо осередків (приклад 2.6).

Приклад 2.6. Додавання подвійний рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі використовується подвійна рамка чорного кольору навколо самої таблиці і суцільна рамка білого кольору навколо кожного осередку. Результат прикладу показаний на рис. 2.7.

Мал. 2.7. Кордон навколо таблиці і осередків

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

. Хоча в коді прикладу цей атрибут ніде не фігурує, браузер використовує його за замовчуванням. якщо задати , То отримаємо не подвійні, а одинарні лінії, але подвоєною товщини. Для зміни зазначеної особливості застосовується стильова властивість border-collapse із значенням collapse, яке додається до селектора TABLE (приклад 2.7).

Приклад 2.7. Створення одинарної рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі створюється суцільна лінія зеленого кольору між осередками і чорна навколо таблиці. Всі кордони всередині таблиці мають однакову товщину. Результат прикладу показаний на рис. 2.8.

Мал. 2.8. Кордон навколо таблиці

Вирівнювання вмісту комірок

За замовчуванням текст в комірці таблиці вирівнюється по лівому краю. Винятком з цього правила є тег , Він визначає заголовок, в якому вирівнювання відбувається по центру. Щоб змінити спосіб вирівнювання застосовується стильова властивість text-align (приклад 2.8).

Приклад 2.8. Вирівнювання вмісту комірок по горизонталі

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тема 1	осередок 1	осередок 2
Тема 2	осередок 3	осередок 4

В даному прикладі вміст тега вирівнюється по лівому краю, а вміст тега - по центру. Результат прикладу показаний нижче (рис. 2.9).

Мал. 2.9. Вирівнювання тексту в осередках

Вирівнювання по вертикалі в осередку завжди відбувається по її центру, якщо це не обумовлено. Це не завжди зручно, особливо для таблиць, у яких вміст комірок розрізняється по висоті. В такому випадку вирівнювання встановлюють по верхньому краю осередки за допомогою властивості vertical-align, як показано в прикладі 2.9.

Приклад 2.9. Вирівнювання вмісту комірок по вертикалі

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тема 1	Тема 2
осередок 1	осередок 2

В даному прикладі встановлюється висота заголовка як 40 пікселів і вирівнювання тексту відбувається по нижньому краю. Результат прикладу показаний на рис. 2.10.

Мал. 2.10. Вирівнювання тексту в осередках

порожні осередки

Браузери інакше відображають осередок, усередині якої нічого немає. «Нічого» в даному випадку означає, що всередину вічка не додали ні малюнок, ні текст, причому пробіл в розрахунок не береться. Природно, вид осередків розрізняється тільки в тому випадку, якщо навколо них встановлена ​​межа. При використанні невидимою рамки, вид осередків, незалежно від того, є в них що-небудь чи ні, збігається.

Старі браузери не відображали колір фону порожніх клітинок вигляду , Тому в тому випадку, коли потрібно залишити осередок без вмісту, але відобразити колір фону, всередину осередку додавали неподілюваний пробіл (). Пробіл не завжди підходить, особливо коли потрібно встановити висоту комірки 1-2 пікселя, через що широке поширення отримав однопіксельний прозорий малюнок. Дійсно, такий малюнок можна масштабувати на свій розсуд, але він на веб-сторінці ніяк не відображається.

На щастя епоха однопіксельні малюнків і всіляких розпірок на їх основі пройшла. Браузери досить коректно працюють з таблицями і без присутності вмісту осередків.

Для управління видом порожніх клітинок використовується властивість 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 дає необмежені можливості для оформлення таблиць. За замовчуванням таблиця і елементи таблиці не мають видимих ​​кордонів і фону, при цьому осередку всередині таблиці не прилягають впритул один до одного.

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

форматування таблиць

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. Як додати таблиці заголовок

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

...

Таблиця № 1

Company	Q1	Q2	Q3	Q4

caption (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;) Мал. 2. Приклад відображення заголовка під таблицею

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

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

синтаксис

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

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

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

синтаксис

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

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

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

Company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table (border: 1px solid # 69c; border-collapse: separate; empty-cells: hide;) th, td (border: 2px solid # 69c;) Мал. 5. Приклад приховування порожній осередки таблиці

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

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

синтаксис

Table (table-layout: fixed;)

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

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

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

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

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. Фон таблиці

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

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); )