Відстань між колонками таблиці HTML. Використання атрибуту cellspacing

Ми вже з'ясували з вами, що 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;

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

Всім привіт! Отже, тепер ви вмієте створювати елементарні таблиці, що складаються з такої кількості рядків та стовпців, яка потрібна. Не погано, не погано. А тепер поговоримо про оформлення цих таблиць.

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

атрибут border, Надавши йому значення відмінне від нуля.

Отже, зробіть межі для таблиці. Наприклад, для вже наявної у нас:

Верхній лівий осередок	Верхній правий осередок
Нижній лівий осередок	Нижній правий осередок

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

Як прибрати межі таблиці

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

Атрибут дозволяє створити, але не керувати кордонами. Він дозволяє лише змінювати їхню товщину.

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

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

Верхній лівий осередок	Верхній правий осередок
Нижній лівий осередок	Нижній правий осередок

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

Тепер давайте додамо кордону і для кожного осередку. Для цього просто доповнимо стилі:

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

Як прибрати відступи між осередками в таблиці HTML

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

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

Table ( border: solid 1px blue; border-collapse: collapse; ) ...

Як результат - забирається відстань між осередками:

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

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