використовувати атрибут 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"> ...
Другий і більш зручний спосіб. У тезі
Домашнє завдання.
У цьому уроці я теж не буду все докладно описувати - тільки загальні моменти. Для повноти картини подивіться результат прикладу.
- Створіть три таблиці, кожна повинні складатися з одного рядка і трьох стовпців (колонок).
- У першій таблиці розмістіть Header або «шапку» сторінки (не плутати з «шапкою» HTML-документа), у другій - ліве і праве меню, а також основний вміст (контент), в третій - Footer або «підвал» сторінки.
- Нехай ширина першого і останнього стовпця кожної таблиці буде фіксована.
- Важливо. використовуйте тег
![]()
тільки для створення чотирьох кнопок горизонтального меню в «шапці» сторінки. В інших випадках нехай зображення йдуть фоном, а по-друге осередках таблиць взагалі використовуються тільки кольору, причому в першій і останній таблиці це # 99FF99.
- Нехай текст контенту сторінки буде вирівняний по обидва боки елементи таблиці, а заголовок розташовується по центру.
- Що стосується відстаней між осередками таблиць, а також відступів осередків, то думайте самі, де їх треба зовсім прибрати, а де - збільшити.
Отже, ми вивчили з вами найбільш прості дії, які можна здійснювати з межами таблиць. І тепер таблиця виглядає куди більш естетично. Однак, наповнення осередків прямо таки впирається в межі. Це легко можна виправити, достатньо лише зробити відступи в осередках в таблиці 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;)
Результат в браузері:
Відступи між осередками
Як правило, завдання, пов'язані зі створенням таблиць, можна вирішити, використовуючи для цього теги, атрибути і властивості, які дозволяють створювати рамки, відступи в осередках, а також задати колірний фон самих осередків.
Відступи в таблицях бувають не тільки всередині осередків. Вони можуть також бути присутнім і між самими осередками.
Існує дві можливості зробити відступи між осередками:
- з використанням атрибута 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. Важливо розуміти, що дане значення є значенням за замовчуванням. І застосовується воно тільки для того, щоб наочно показати, як вирішується це завдання. Якщо ми видалимо цей рядок, то результат у вигляді окремо розташованих один від одного осередків буде збережений.
Задає відстань між кордонами осередків в таблиці. Атрибут border-spacing не працює в разі, коли для таблиці встановлено параметр border-collapse із значенням collapse.
синтаксис
border-spacing: значення [значення]
аргументи
Одне значення встановлює одночасно відстань по вертикалі і горизонталі між кордонами осередків. Якщо аргументів два, то перше визначає горизонтальну відстань, а друге - вертикальне.
border-spacing
Результат даного прикладу показаний ні рис. 1.
Мал. 1. Застосування параметра border-spacing
Примітка
Якщо до тегу
доданий параметр cellspacing, то при використанні стильового атрибуту border-spacing він не береться до уваги і значення cellspacing ігнорується. Винятком з цього правила є браузер Internet Explorer, який взагалі не розуміє властивість border-spacing.
таблиці
- border-collapse встановлює, як відображати межі навколо осередків таблиці. Цей параметр відіграє роль, коли для осередків встановлена рамка, тоді в місці стику осередків вийде лінія подвійної товщини. Додавання значення collapse змушує браузер аналізувати подібні місця в таблиці і прибирати в ній подвійні лінії.
- table-layout визначає, як браузер повинен обчислювати висоту і ширину осередків таблиці, грунтуючись на її вміст.
- border-spacing задає відстань між кордонами осередків в таблиці. Атрибут border-spacing не працює в разі, коли для таблиці встановлено параметр border-collapse із значенням collapse.
Ми з Вами розглянули безліч методів стилізації таких елементів на сторінці як текстова інформація, посилання, зображення, заголовки, але всього цього поки недостатньо. У своїх статтях я часто застосовую такі елементи HTML як таблиці, тому що вони в більшості випадків допомагають систематизувати важливу інформацію і зробити її подачу простіший.
У цій статті я познайомлю Вас з тонкощами стилізації HTML таблиць, і ви дізнаєтеся нові властивості CSS, призначені для досягнення цих цілей.
Мова гіпертекстової розмітки HTML надав нам велику кількість можливостей, щоб здійснити прив'язку CSS стилів до десяти унікальним тегам, призначених для роботи з таблицями, пропоную їх повторити перед подальшим вивченням:
| тег | опис |
|---|
| Визначає вміст таблиці. |
|
| Визначає найменування таблиці. |
|
| Визначає заголовну елемент таблиці. |
|---|
|
| Визначає рядок таблиці. |
|
| Визначає осередок даних таблиці. |
| Використовується для утримання заголовка групи в таблиці (шапка таблиці). |
| |
Використовується для утримання "тіла" таблиці. |
|
Використовується для утримання "підвалу" таблиці (футер). |
|
| Визначає задані властивості стовпців для кожного стовпця в межах тега .
|
|
| Визначає групу стовпців в таблиці. |
Робота з відступами в таблиці
Використання внутрішніх відступів в таблиці
Відступи в таблиці
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
В даному прикладі ми:
- Розмістили таблицю по центру, використовуючи прийом центрування по горізоніталі зовнішніми відступами (margin: 0 auto).
- Для найменування таблиці (тег ) Ми встановили внутрішній відступ знизу рівний 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.
Давайте розглянемо приклад використання цієї властивості:
Приклад використання властивості caption-side
Тема над таблицею
| Найменування | Ціна |
| риба | 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
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 (непарний), Або по елементарної математичній формулі.
Давайте повторимо раніше розглянуті методи і познайомимося з новими способами стилізації рядків і стовпців в таблицях. Перейдемо до прикладів.
Приклад використання псевдокласу: nth-child з таблицями
|
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.
- Встановили для елемента ( «Підвал» таблиці) колір заднього фону - coral, Для елемента ( «Шапка» таблиці) встановили колір заднього фону silver.
- для елементів
, Які знаходяться всередині елемента (Тіло таблиці) встановили зміна кольору заднього фону при наведенні (псевдоклас: hover) c білогона колір khaki(Підсвічується вся рядок).
Результат нашого прикладу: Мал. 153 Приклад стилізації рядків в таблицях Наступний приклад розглядає застосування заокруглення кутів до осередків таблиці (властивість).
Приклад заокруглення кутів осередки
У цьому прикладі ми:
- Відцентрувати таблицю зовнішніми відступами, задали для заголовків осередків ширину і висоту 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
Самі по собі таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Разом з тим ці недоліки легко виправити скориставшись міццю стилів. При цьому вельми розширюються кошти з оформлення таблиць, що дозволяє вдало вписати таблиці в дизайн сайту і наочніше уявити табличні дані.
Колір фону осередків
Колір фону одночасно всіх елементів таблиці встановлюється через властивість 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
заміна cellspacing
| Леонардо | 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
Використання empty-cells
| Леонардо | 5 | 8 |
| Рафаель | | 11 |
| Мікеланджело | 24 | |
| Донателло | | 13 |
Вид таблиці в браузері Safari показаний на рис. 2.11а. Та ж таблиця в браузері IE7 продемонстрована на рис. 2.11б.
а. У браузері Safari, Firefox, Opera, IE8, IE9
б. У браузері IE7
Мал. 2.11. Вид таблиці з порожніми осередками
| |
|
