Відступи у таблиці css. Поля всередині осередків

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

У цій статті я познайомлю Вас із тонкощами стилізації HTML таблиць, і ви дізнаєтеся про нові властивості CSS, призначені для досягнення цих цілей.

Мова гіпертекстова розмітки HTMLнадав нам велику кількість можливостей, щоб здійснити прив'язку CSS стилів до десяти унікальних тегів, призначених для роботи з таблицями, пропоную їх повторити перед подальшим вивченням:

(«підвал» таблиці) колір заднього фону – coral, для елемента («шапка» таблиці) встановили колір заднього фону silver.

Для елементів

, які знаходяться всередині елемента (тіло таблиці) встановили зміну кольору заднього фону при наведенні (псевдоклас :hover) c білогона колір khaki(підсвічується весь рядок).

Результат нашого прикладу:

Мал. 153 Приклад стилізації рядків у таблицях

Наступний приклад розглядає застосування заокруглення кутів до осередків таблиці (властивість).

) ми встановили внутрішній відступ знизу рівний 19 пікселів. Сподіваюся, Вас не бентежать нерівні числа:)

Результат нашого прикладу:

Проміжок між осередками

Після розглянутого вище прикладу ви могли помітити, що у нас залишився проміжок між усіма осередками таблиці. Давайте розглянемо, як усунути проміжок між осередками таблиці, або його збільшити.

Щоб задати відстань між межами сусідніх осередків, необхідно використовувати властивість CSS - border-spacing.

border-spacing: 30px 10px;

1	2	3
2
3

border-spacing: 0;

1	2	3
2
3

border-spacing:0.2em;

1	2	3
2
3

У цьому прикладі ми:

• float: left). Якщо ви пропустили тему плаваючих елементів, то ви завжди можете до неї повернутись у цьому підручнику - « ».
• Крім того, встановили для таблиць зовнішній відступ справа рівний 30px і встановили вертикальне вирівнювання таблиць (верх елемента вирівнюється по верху найвищого елемента). Ми ще повернемося до детального розгляду цієї якості у цій статті.

) – жирне зображення.

Для осередків таблиці (заголовні та осередки даних) ми встановили суцільну межу розміром 1 піксель шістнадцятковим кольором #F50 і встановили внутрішні відступи розміром 19 пікселів для всіх сторін.

Для першої таблиці із класом .firstми встановили проміжок між осередками таблиці (властивість border-spacing) рівний 30px 10px для другої таблиці з класом .secondрівний нулю, для третьої таблиці з класом .thirdрівний 0.2em.

Звертаю Вашу увагу, що якщо у властивості border-spacing вказано лише одне значення довжини, воно вказує інтервали, як по горизонталі, так і вертикалі, а якщо вказано два значення довжини, то перше визначає горизонтальну відстань, а другу вертикальну. Відстань між межами сусідніх осередків допускається вказувати в одиницях виміру CSS (px, cm, em та ін). Негативні значення не допускаються.

Результат нашого прикладу:

Відображення меж навколо осередків таблиці

Ви можете сказати: - так, ми прибрали проміжок між осередками, використовуючи властивість border-spacing зі значенням 0 , але чому у нас тепер межі у осередків перетинаються?

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

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

Розглянемо порівняння поведінки кордонів під час використання властивості border-spacing зі значенням 0 і властивості border-collapse зі значенням collapse :

border-spacing: 0;

1	2	3
2
3

border-collapse: collapse;

1	2	3
2
3

У цьому прикладі ми:

• Зробили наші таблиці плаваючими і змістили по лівому краю (float : left ), встановили їм зовнішній відступ справа рівний 30px .
• Встановили найменування таблиці (тег

) – жирне зображення.

Для осередків таблиці (заголовні та осередки даних) ми встановили суцільну межу розміром 5 пікселів шістнадцятковим кольором #F50 і встановили фіксовану ширину 50px та висоту 75 пікселів.

Для першої таблиці із класом .firstми встановили проміжок між осередками таблиці рівний нулю (border-spacing : 0 ;), а другої таблиці з класом .secondвстановили властивість border-collapse зі значенням collapse , яке поєднує межі осередків в одну, коли це можливо.

Результат нашого прикладу:

Поведінка порожніх осередків

Силами CSS можна встановити, чи слід відображати межі та фон порожніх осередків у таблиці чи ні. За цю поведінку відповідає властивість empty-cells, яка за умовчанням, як ви могли помітити з попередніх прикладів, відображає порожні комірки.

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

empty-cells: show;

1	2	3
2		☺
3	☺

empty-cells: hide;

1	2	3
2		☺
3	☺

Зрозуміти, як діє властивість empty-cells з цього прикладу дуже просто, якщо для нього встановлено значення hide , то порожні комірки і фон у них будуть приховані, якщо встановлено значення show (за замовчуванням), вони відображатимуться.

Розташування заголовка таблиці

Давайте розглянемо ще одне просте властивість для стилізації таблиць - caption-side , яке встановлює розташування заголовка таблиці (над чи під таблицею). За замовчуванням властивість caption-side має значення top , яке містить заголовок над таблицею. Щоб помістити заголовок під таблицю необхідний використовувати властивість зі значення bottom .

Давайте розглянемо приклад використання цієї властивості:

Заголовок над таблицею

Найменування	Ціна
Риба	350 рублів
М'ясо	250 рублів

Заголовок під таблицею

Найменування	Ціна
Риба	350 рублів
М'ясо	250 рублів

У цьому прикладі ми створили два класи, які керують розташуванням заголовка таблиці Перший клас ( .topCaption) поміщає заголовок таблиці над нею, ми застосували його до першої таблиці, а другий клас ( .bottomCaption) поміщає заголовок таблиці під нею, ми застосували його до другої таблиці. Клас .topCaptionмає значення властивості caption-side за замовчуванням та створено для демонстрації.

Результат нашого прикладу:

Горизонтальне та вертикальне вирівнювання

У більшості випадків при роботі з таблицями вам доведеться налаштовувати вирівнювання вмісту всередині заголовків і осередків даних. Властивість text-align застосовується для горизонтального вирівнювання за аналогією з будь-якою текстовою інформацією. Застосування цієї якості тексту ми розглядали раніше у статті « ».

Щоб встановити вирівнювання вмісту в осередках, необхідно використовувати спеціальні ключові слова з властивістю text-align . Розглянемо застосування ключових слівцієї властивості на прикладі.

Значення	Опис
left	Вирівнює текст осередку вліво. Це значення за промовчанням (якщо напрямок тексту зліва направо).
right	Вирівнює текст комірки праворуч. Це значення за промовчанням (якщо напрямок тексту праворуч наліво).
center	Вирівнює текст осередку по центру.
justify	Розтягує лінії так, що кожна лінія має однакову ширину (розтягує текст осередку по ширині).

У цьому прикладі ми створили чотири класи, які задають різне горизонтальне вирівнювання в комірках та застосували їх по порядку до рядків таблиці. Значення у комірці відповідає значенню властивості text-align

Результат нашого прикладу:

Крім горизонтального вирівнювання, ви також можете визначити і вертикальне вирівнювання в осередках таблиці за допомогою властивості vertical-align .

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

* - Значення sub , super , text-top , text-bottom , length і % , застосовані до комірки таблиці будуть поводитися як із використанні значення baseline .

Розглянемо приклад використання:

Значення	Опис
baseline	Вирівнює базову лінію осередку базової лінії батька. Це значення за промовчанням.
top	Вирівнює вміст осередку вертикально по верхньому краю.
middle	Вирівнює вміст комірки вертикально посередині.
bottom	Вирівнює вміст осередку вертикально по нижньому краю.

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

Алгоритм розміщення макету таблиці браузером

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

Щоб змінити тип розміщення макета таблиці браузером з автоматичногона фіксований, необхідно використовувати CSS властивість table-layout зі значенням fixed.

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

Давайте розглянемо застосування цієї властивості на наступному прикладі:

table-layout: auto;

Найменування	2009	2010	2011	2012	2013	2014	2015	2016
Пшениця	125	215	2540	33287	695878	1222222	125840000	125

table-layout: fixed;

Найменування	2009	2010	2011	2012	2013	2014	2015	2016
Пшениця	125	215	2540	33287	695878	1222222	125840000	125

У цьому прикладі ми:

Стилізація рядків та стовпців таблиці

Ми з Вами частково вже торкалися методів стилізації рядків та стовпців таблиці у статті «». У цій статті ми розглядали застосування групового псевдокласу, що дозволяє чергувати стилі рядків у таблицях з використанням значень. even (парний) та odd (непарний), або за елементарною математичної формули.

Давайте повторимо раніше розглянуті методи та познайомимося з новими способами стилізації рядків та стовпців у таблицях. Перейдемо до прикладів.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

У цьому прикладі ми:

Результат нашого прикладу:

Перейдемо до прикладу, у якому розглянемо варіанти стилізації рядків таблиці.

Послуга	Вартість
Сума	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

У цьому прикладі ми:

• Встановили ширину таблиці в 100% від ширини батьківського елемента, для заголовків і осередків даних встановили суцільну межу шириною 1px.
• Встановили для елемента

Тег	Опис
. Визначає вміст таблиці. Визначає найменування таблиці. Визначає заголовну комірку таблиці. Визначає рядок таблиці. Визначає комірку даних таблиці. Використовується для заголовка групи в таблиці (шапка таблиці). Використовується для змісту "тіла" таблиці. Використовується утримання " підвалу " таблиці (футер). Визначає задані властивості стовпців для кожного стовпця в межах тега Визначає групу стовпців у таблиці. Робота з відступами у таблиці Відступи у таблиці 1 2 3 4 2 3 4 У цьому прикладі ми: Розмістили таблицю по центру, використовуючи прийом центрування по горизонталі зовнішніми відступами(margin: 0 auto). Для найменування таблиці (тег

1	2	3	4	5

У цьому прикладі ми:

• Відцентрували таблицю зовнішніми відступами, задали для заголовних осередків ширину та висоту 50px, вказали прозорукордон 5 пікселів.
• Встановили, що при наведенні (псевдоклас :hover) на заголовний осередок вона отримує заднє тло синьогокольори, помаранчевийколір тексту, кордон помаранчевогокольору 5 пікселів та радіус округлення 100%.
• Прозорий кордоннеобхідна для того, щоб зарезервувати місце під кордон, який буде відображений при наведенні, якщо цього не зробити таблиця «стрибати».

Результат нашого прикладу:

Наступний приклад торкається використання HTMLелементів і та їх стилізації.

№ заявки	Послуга	Ціна, руб.	Разом
1	Спів	6 000	6 000
2	Миття	2 000	2 000
3	Прибирання	1 000	1 000
4	Ниття	1 500	1 500
5	Читання	3 000	3 000

У цьому прикладі ми:

Результат нашого прикладу:

Ну і заключний приклад, який досить складний для розуміння і вимагає просунутих знань у CSS, оскільки стосується майбутніх тем, які плануються докладно вивчити в рамках цього курсу.

У попередньому прикладі ми зрозуміли, що до HTML елементу можна застосувати тільки одну CSS властивість - колір заднього фону (background-color), але при цьому встановити колір заднього фону при наведенні (псевдоклас :hover) на цей елемент безпосередньо не можна. У цьому прикладі ми розглянемо, як підсвітити стовпець таблиці, використовуючи лише CSS.

№ заявки	Послуга	Ціна, руб.	Разом
1	Спів	6 000	6 000
2	Миття	2 000	2 000
3	Прибирання	1 000	1 000
4	Ниття	1 500	1 500
5	Читання	3 000	3 000

У цьому прикладі ми:

• Встановлюємо, що наша таблиця займає 100% батьківського елемента, комірки таблиці займають 25% батьківського елемента і мають суцільний кордон 1 піксель зеленого кольору, висота заголовних і комірок даних становить 45px . Проміжок між осередками ми прибрали, використовуючи властивість border-collapse зі значенням .
• І так, використовуючи псевдоелемент :: after додаємо вміст після кожного елемента при наведенні. Псевдоелемент ::after обов'язково використовується разом із властивістю content , завдяки якому ми вставляємо блоковий елемент, який має заднє тло кольору. forestgreenі має абсолютне позиціонування.
• Абсолютне позиціонування тут необхідне для зміщення елемента щодо заданого краю його предка, при цьому предок повинен мати значення position відмінне від встановленого за замовчуванням - static , інакше відлік буде вестися щодо зазначеного краю вікна браузера, тому ми встановили для таблиці відносне позиціонування(Relative).
• Встановили для нашого згенерованого блоку властивість top , яка вказує напрямок зміщення позиціонованого елемента від верхнього краю та властивість bottom , яке вказує напрямок зсуву позиціонованого елемента від нижнього краю. Для обох властивостей вказали значення 0 , таким чином, блок повністю займатиме елемент від низу і верху таблиці, ширину цього блоку задали 25% це значення відповідає значенню ширини самої комірки.
• І заключна властивість, яку ми встановили для цього блоку: z-index зі значенням "-1" воно визначає порядок розташування позиціонованих елементів осі Z. Ця властивість необхідно, щоб текст знаходився попереду цього блоку, а не за ним, якщо не задати значення менше нуля, то блок закриватиме текст.

Результат нашого прикладу:

Якщо Вам на цьому етапі вивчення не зрозумілий процес позиціонування елементів, то не турбуйтеся це складна для розуміння тема, яку ми до того ж не розглядали, але обов'язково розглянемо в наступній статті підручника "Позиціонування елементів у CSS".

Запитання та завдання на тему

Перед тим як перейти до вивчення наступної теми, пройдіть практичне завдання:

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

2016-2020 Денис Большаков, зауваження та пропозиції щодо роботи сайту Ви можете надіслати на адресу сайт@gmail.com

Ми вже з'ясували з вами, що HTML-таблиці мають рамкихоча за замовчуванням їх браузери і не показують. Але це ще не все, у кожного осередку таблиці теж є рамка, яка називається кордон осередку. Але це ще не все, використовуючи спеціальні атрибути тега

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

Рамка HTML-таблиці, межі осередків, відстані між ними та внутрішні відступи.

Отже, для створення рамки HTML-таблиці та меж її осередківвикористовується лише один атрибут тега

- Border . Значенням атрибуту є цілі невід'ємні числа (нуль за замовчуванням), які означають розмір пікселів. Але, увага, розмір змінюється тільки біля рамки таблиці, біля осередків він завжди незмінний.

...

Для зміни відстані між осередками(їх межами) та від осередків до рамкитаблиці у тезі

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

...

Щоб встановити внутрішні відступи від кордонів осередків до їхнього вмістунеобхідно в тезі

використовувати атрибут cellpadding. І його значення це числа, що означають піксельні розміри.

...

Зверніть увагу, що браузери за замовчуванням встановлюють невеликі (в два пікселі) значення cellspacing і cellpadding , тому щоб прибрати відстані зовсім - встановіть атрибути значення нуль (0).

Приклад меж, рамок та відступів HTML-таблиць

Осередок 1.1	Осередок 1.2	Осередок 1.3
Осередок 2.1	Осередок 2.2	Осередок 2.3
Осередок 3.1	Осередок 3.2	Осередок 3.3

Таблиця тільки з встановленими рамкою та межами осередків:

Осередок 1.1	Осередок 1.2	Осередок 1.3
Осередок 2.1	Осередок 2.2	Осередок 2.3
Осередок 3.1	Осередок 3.2	Осередок 3.3

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

Таблиця зі зміненими відступами та відстанями:

Природно не обов'язково малювати у таблиці рамку та межі осередків, щоб змінювати внутрішні відступи та відстані між осередками.

Згідно синтаксису 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" >...

Другий і більше зручний спосіб. У тезі

Домашнє завдання.

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

1. Створіть три таблиці, кожна має складатися з одного рядка і трьох стовпців (колонок).
2. У першій таблиці розмістіть Header або «шапку» сторінки (не плутати з «шапкою» HTML-документа), у другій – ліве та праве меню, а також основний вміст (контент), у третій - Footer або «підвал» сторінки.
3. Нехай ширина першого та останнього стовпця кожної таблиці буде фіксована.
4. Важливо. Використовуйте тег тільки для створення чотирьох кнопок горизонтального менюу «шапці» сторінки. В інших випадках нехай зображення йдуть тлом, а у других осередках таблиць взагалі використовуються тільки кольори, причому в першій та останній таблиці це #99FF99.
5. Нехай текст контенту сторінки буде вирівняний по обидва боки осередку таблиці, а заголовок розташовується по центру.
6. Що стосується відстаней між осередками таблиць, а також відступів осередків, то думайте самі, де їх треба зовсім прибрати, а де збільшити.

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

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

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

1. Межі таблиці.

Таблиця та комірки всередині неї за замовчуванням відображаються у браузері без видимих ​​меж. Межі таблицізадаються властивістю:

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;

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

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

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;

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

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

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

Колір фону одночасно всіх осередків таблиці встановлюється через властивість 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 обнулюється.

Межі та рамки

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

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

Використання атрибуту 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. Вигляд таблиці з порожніми осередками