| Визначає вміст таблиці. |
|
| Визначає найменування таблиці. |
|
| Визначає заголовну елемент таблиці. |
|---|
|
| Визначає рядок таблиці. |
|
| Визначає осередок даних таблиці. |
| Використовується для утримання заголовка групи в таблиці (шапка таблиці). |
| |
Використовується для утримання "тіла" таблиці. |
|
Використовується для утримання "підвалу" таблиці (футер). |
|
| Визначає задані властивості стовпців для кожного стовпця в межах тега .
|
|
| Визначає групу стовпців в таблиці. |
Робота з відступами в таблиці
Використання внутрішніх відступів в таблиці
Відступи в таблиці
|
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
табличні дані - інформація, яку можна відобразити у вигляді таблиці і логічно розділити по стовпцях і рядках. Для відображення табличних даних на веб-сторінках використовується HTML тег , Що вдає із себе контейнер з вмістом таблиці. Контент HTML таблиці описується через підрядник, кожен рядок починається з відкриваючого тега і закінчується закриває тегом .
усередині тега розташовуються елементи таблиці, представлені тегами | або | . Саме осередки містять весь контент таблиці, що відображається на веб-сторінці.
рамка таблиці
За замовчуванням HTML таблиця на веб-сторінці відображається без рамки, для додавання рамки до таблиці, як і до всіх інших елементів, використовується CSS властивість border. Але варто звернути увагу на те, що якщо додати рамку тільки до елементу , То вона відобразитися навколо всієї таблиці. Для того, щоб елементи таблиці теж мали рамку, треба буде встановити властивість border і для елементів | і | . Table, th, td (border: 1px solid black;) Спробувати » Тепер і таблиця і осередки мають рамки, при цьому і кожна ланка й таблиця мають свої власні рамки. В результаті між рамками з'явилося порожній простір, управляти розміром цього простору дозволяє властивість border-spacing, яке задається для всієї таблиці цілком. Іншими словами, не можна керувати проміжками між різними осередками індивідуально.
Навіть якщо прибрати проміжки між осередками за допомогою значення 0 властивості border-spacing, то рамки осередків будуть стикатися один з одним, подвоюючи. Для об'єднання рамок осередків використовується властивість border-collapse. Воно може приймати два значення:
- separate: є значенням за замовчуванням. Осередки відображаються на невеликій відстані один від одного, кожен осередок має свою власну рамку.
- collapse: з'єднує сусідні рамки в одну, все проміжки між осередками, а також між осередками і рамкою таблиці ігноруються.
Назва документу
| ім'я | Прізвище |
|---|
| Гомер | Сімпсон |
| Мардж | Сімпсон |
| ім'я | Прізвище |
|---|
| Гомер | Сімпсон |
| Мардж | Сімпсон |
спробувати зараз » Розмір таблиці
Після додавання рамок до осередків таблиці стало помітно, що вміст комірок занадто близько розташоване до країв. Для додавання вільного простору між краями осередків і їх вмістом можна скористатися властивістю padding: Th, td (padding: 7px;) Спробувати » Розмір таблиці залежить від її вмісту, але часто виникають ситуації, коли таблиця виявляється занадто вузькою і з'являється необхідність її розтягнути. Ширину і висоту таблиці можна змінювати за допомогою властивостей width і height, задаючи потрібні розміри або самої таблиці або осередкам: Table (width: 70%;) th (height: 50px;) Спробувати » вирівнювання тексту
За замовчуванням текст в заголовних осередках таблиці вирівнюється по центру, а в звичайних осередках текст вирівняний по лівому краю, використовуючи властивість text-align можна управляти вирівнюванням тексту по горизонталі.
CSS властивість vertical-align дозволяє управляти вирівнюванням текстового вмісту по вертикалі. За замовчуванням текст вирівняний вертикально по центру осередків. Вертикальне вирівнювання можна перевизначити за допомогою одного з значень властивості vertical-align:
- top: текст вирівнюється по верхній межі осередку
- middle: вирівнює текст по центру (значення за замовчуванням)
- bottom: текст вирівнюється по нижній межі комірки
Назва документу
| ім'я | Прізвище |
|---|
| Гомер | Сімпсон |
| Мардж | Сімпсон |
спробувати зараз » Чергування фонового кольору рядків таблиці
При перегляді великих таблиць, що містять багато рядків з великою кількістю інформації, буває важко відстежити, які дані відносяться до конкретної рядку. Щоб допомогти користувачам зорієнтуватися, можна використовувати два різних фонових кольору по черзі. Для створення описаного ефекту можна використовувати селектор class, додаючи його до кожної другому рядку таблиці:
Назва документу
| ім'я | Прізвище | положення |
|---|
| Гомер | Сімпсон | батько |
| Мардж | Сімпсон | матір |
| Барт | Сімпсон | син |
| Ліза | Сімпсон | дочка |
спробувати зараз »Додавати атрибут class до кожної другому рядку досить обтяжлива заняття. В CSS3 був доданий псевдо-клас: nth-child, що дозволяє вирішити цю проблему альтернативним шляхом. Тепер ефекту чергування можна досягти виключно засобами CSS, не вдаючись до зміни HTML-розмітки документа. За допомогою псевдо-класу: nth-child можна вибрати всі парні або непарні рядки таблиці, використовуючи одне з ключових слів: even (парні) чи odd (непарні): Tr: nth-child (odd) (background-color: # EAF2D3;) Спробувати » Зміна фону рядка при наведенні курсору
Ще одним способом підвищення зручності читання табличних даних є зміна фонового кольору рядка при наведенні на неї курсора миші. Це допоможе виділити потрібний вміст таблиці і підвищить візуальне сприйняття даних.
Реалізувати такий ефект дуже просто, для цього потрібно додати псевдо-клас: hover до селектору рядки таблиці і задати потрібний колір фону: Tr: hover (background-color: # E0E0FF;) Спробувати » Вирівнювання таблиці по центру
вирівнювання HTML таблиці по центру можливо тільки в тому випадку, якщо ширина таблиці менше, ніж ширина її батьківського елемента. Щоб вирівняти таблицю по центру, треба скористатися властивістю margin, задавши йому мінімум два значення: перше значення буде відповідати за зовнішній відступ таблиці зверху і знизу, а друге - за автоматичне вирівнювання по центру: Table (margin: 10px auto;) Спробувати » Якщо вам потрібні різні відступи зверху і знизу таблиці, то можна задати властивості margin три значення: перше відповідатиме за відступ зверху, друге за вирівнювання по горизонталі, а третє за відступ знизу: Table (margin: 10px auto 30px;) інформує браузер про завершення таблиці.
Будь-яка таблиця складається з стовпців і рядків.
тег | створює рядок, а тег | осередок в рядку. Відповідно скільки осередків включено в рядок, стільки буде й стовпців в таблиці.
тег | також створює осередок. Його відмінність від тега | в тому, що осередок створена тегом | є осередком - заголовком: її вміст розташовується по центру, а якщо це текст, то браузер відображає його жирним шрифтом.
Вміст комірки, створеної тегом | за замовчуванням розташовується в її лівій Чаcть.
тег створює заголовок таблиці, він розташовується всередині тега - відразу після відкриваючого тега. Тема за замовчуванням розташовується над таблицею і вирівнюється по її центру.
заголовок таблиці
1-а група 1-го рядка |
2-а група 1-ої рядка |
1-а група 2-ий рядки |
2-а група 2-го рядка |
|
|
Вирівнювання таблиці. Вирівнювання вмісту комірок
Для вирівнювання таблиці використовується атрибут align тега
.
За допомогою атрибут align Ви можете розмістити таблицю в лівій або правій (align \u003d "left" і align \u003d "right") частини вікна браузера ( батьківського елемента) Або по його центру (align \u003d "center").
Вирівнювання вмісту рядків ( тег
) І осередків ( тег |
) По горизонталі також здійснюється за допомогою атрибута align, а по вертикалі за допомогою атрибута valign:
Атрибут align приймає значення left, right, center і justify, які задають вирівнювання вмісту рядків і осередків по їх лівому, правому краю, по центру і по ширині відповідно;
Атрибут valign, який приймає значення top, bottom і middle, задає вирівнювання вмісту рядків і осередків по їх верхньому, нижньому краю і по середині відповідно.
Атрибут align служить також для вирівнювання заголовка ( тег
) По горизонталі і визначення його розташування - над таблицею або під нею.
За умовчанням вміст осередків розташоване по лівому краю по горизонталі, і вирівняні по середині в вертикальній площині.
Висота і ширина таблиці і осередків
За замовчуванням розміри ( висота і ширина) І таблиці, і осередків змінюються в залежності від розмірів їх вмісту.
Але висоту і ширину як таблиці, так і окремих її осередків можна задати явно - за допомогою атрибутів hieght і width відповідно.
тег | , Що створює рядок таблиці не має атрибутів hieght і width. Висота рядка відповідає висоті осередків, розташованих в ній. А ширина рядка дорівнює ширині таблиці.
Значення висоти і ширини задаються в пікселях або у відсотках щодо вільного простору. Для завдання значень:
Вказується ціле позитивне число. У цьому випадку розмір буде поставлено в пікселях;
Вказується ціле позитивне число з символом%.
Якщо вміст таблиці або комірки перевищує задані розміри - вони будуть проігноровані браузером, а нові розміри автоматично підібрані відповідно до розмірів вмісту.
Як видно з прикладу: вказуючи ширину однієї з комірок стовпчика, Ви тим самим задаєте ширину всього стовпчика; і, вказуючи висоту однієї з осередків рядка, Ви задаєте висоту всього рядка.
Межі таблиці і осередків
Таблиця і кожна її осередок мають свої власні кордони, які за умовчанням не видно.
Атрибут border тега дозволяє зробити кордону видимими і задати їх товщину. При цьому будуть відображені кордону і навколо таблиці і навколо кожного осередку.
Товщина кордону ( або рамки) Задається в пікселях. Як значення атрибута border вказується ціле позитивне число. Якщо атрибут border вказано без значення, товщина рамки складе 1 піксель.
Товщина кордону задається тільки для таблиці. Товщина рамки навколо осередків завжди становить 1 піксель ( або відсутній).
За замовчуванням межа відображається з ефектом тривимірності і має чорний колір.
Атрибут bordercolor задає колір кордону і усуває ефект тривимірності. Атрибут може використовуватися для завдання кольору кордону таблиці ( тег
), Рядки ( тег
) Або осередки ( тег |
).
Атрибут bordercolor підтримується не всіма браузерами і тому не рекомендується його використовувати. Для завдання кольору кордону краще скористатися стилями ( це вже в CSS).
Атрибут border не вказано. |
Тому кордони відсутні. |
|
|
Товщина кордону таблиці становить 3 пікселя. |
Осередки мають кордону товщиною 1 піксель! |
|
|
Часткове відображення кордонів
Кордон таблиці і рамка навколо осередків можуть бути відображені частково.
Атрибут frame тега вказує, де малювати кордон таблиці. Атрибут rules вказує, як відобразити межі комірок.
"500px" frame \u003d"Hsides" rules \u003d "cols"\u003e
встановлено |
горизонтальні |
межі таблиці |
І |
відображені кордону |
між колонками |
Відступи всередині і зовні осередків
При форматуванні таблиць в HTML, для наочного уявлення деякою інформацією і зручного її сприйняття, може виявитися корисним використання відступів всередині і зовні осередків.
Внутрішні відступи - від кордонів осередків до їх вмісту, задаються атрибутом cellpadding тега
.
Зовнішні відступи - відстань між кордонами сусідніх комірок і відстань від кордонів осередків до кордону таблиці, задаються атрибутом cellspacing тега
.
Як значення атрибутів вказуються цілі позитивні числа, які задають відстань в пікселях.
Відстань від вмісту комірок |
до їх кордонів становить 10 пікселів |
Відстань між осередками і від осередків |
до кордону таблиці становить 25 пікселів |
об'єднання осередків
При оформленні та форматуванні таблиць в HTML нерідко потрібно об'єднати поруч розташовані осередки. І якщо така необхідність виникла, то Вам слід використати атрибути colspan і rowspan тега
.
Атрибут colspan вказує кількість осередків, які будуть об'єднані по горизонталі, а атрибут rowspan встановлює кількість осередків, що об'єднуються по вертикалі.
Обидва атрибута мають сенс, якщо таблиця складається з декількох рядків.
Фон таблиці. Фон елементів таблиці
У HTML є можливість задати загальний фон як для всієї таблиці, так і фон для окремо виділеної комірки.
Атрибут background тега задає зображення, яке буде фоновим малюнком таблиці. Як значення атрибута вказується адреса файлу із зображенням - абсолютний або відносний шлях до файлу ().
Атрибут bgcolor тега задає колір фону таблиці. Колір можна задати двома способами ()
За допомогою цих же атрибутів задають фоновий малюнок і колір фону для будь-якого елементу таблиці ( тег
).
|
Темно-рожевий - колір фону таблиці. |
Фоновий малюнок окремого осередку - небо! |
|
Нагадаємо також про існування атрибута cols тега , Який вказує браузеру кількість стовпців в таблиці.
Використання атрибута cols дозволяє браузеру швидше відобразити вміст таблиці.
редагування таблиці
В цьому розділі, розглянемо теги, які застосовують при редагуванні відразу декількох елементів таблиці. Ці теги можна розділити на дві групи.
До першої групи належать теги і . Вони практично ідентичні і служать для завдання деяких властивостей і зміни характеристик однієї або декількох колонок таблиці.
Один з цих тегів у своєму розпорядженні відразу після тега . Припустимо це тег
.
За допомогою атрибута span тега вказують кількість колонок, до яких будуть застосовані атрибути align, valign або width ( вирівнювання вмісту комірок колонок по горизонталі, вертикалі або завдання ширини колонок).
Якщо атрибут span в тезі відсутня, то будуть змінені характеристики однієї - першої колонки таблиці. При другому використанні тега задаються властивості для наступних ( наступного - якщо атрибут span відсутня) Колонок таблиці і т.д.
"2" width \u003d"70px"\u003e
1
|
2
|
3
|
4
|
5
|
До другої групи тегів відносяться також практично ідентичні між собою теги
, і
.
Будь-який з них можна застосувати для зміни деяких властивостей однієї або декількох рядків таблиці: це знову ж вирівнювання вмісту осередків у рядках по горизонталі і по вертикалі - за допомогою атрибутів align і valign відповідно; і завдання фонового кольору осередків за допомогою атрибута bgcolor.
При використанні цих тегів слід знати кілька нюансів, які як раз і визначають відмінності між ними.
Теги і повинні бути розташовані перед тегом , Відразу після відкриває таблицю тега . Рядки, поміщені в тег представлені у верхній частині сторінки, а рядки укладені в тег будуть розташовані внизу таблиці. Обидва тега можуть бути застосовані тільки один раз в межах однієї таблиці.
тег допускається використовувати кілька разів всередині тега
.
|
1
|
2
|
|
3
|
4
|
|
5
|
6
|
|
7
|
8
|
"Right" bgcolor \u003d "# 00FF33"\u003e
|
9
|
10
|
Якщо розміри таблиць не вказані вебмастером, то вони визначаються вмістом осередків. Чим об'ємніше це вміст, тим більше розміри осередків і таблиці в цілому. Тобто, якщо ви напишете в осередку одну букву, то розміри осередку підлаштуються під цю букву. Якщо ви тепер допишете другу букву, то горизонтальний розмір осередку збільшиться. Вертикальні розміри осередку визначаються розмірами текстових рядків. Чим більше рядків, і чим вище сама рядок - тим більше і розміри осередку. Якщо в осередку знаходиться зображення, то її розміри опредялются розмірами цієї картинки. Тепер поговоримо про те, як поставити цілком конкретні числові розміри осередку. Для цього є дві властивості - ширина і висота; і два відповідних цим властивостям параметра - width і height. width - параметр тегів , , , Що дозволяє регулювати ширину рядка, осередки або таблиці відповідно.height - параметр тегів , , , Що дозволяє регулювати висоту рядка, осередки або таблиці відповідно.Тут я відразу обмовлюся, що раджу застосовувати ці параметри лише до тегів і . Що стосується тега , То немає необхідності регулювати його параметри безпосередньо, так як те ж саме можна зробити побічно - через теги і . Наприклад, якщо вам потрібно задати висоту рядка таблиці, просто задайте висоту однією з осередків, що входять в цей рядок. Якщо ж вам потрібно встановити значення ширини рядка, то потрібно задати ширину кожної з осередків, які входять до цього рядка. А є спосіб ще простіше: задайте ширину таблиці - і отримаєте ширину рядка. Вобщем, використовуйте параметри width і height тільки для осередків і самих таблиць. Це допоможе вам писати більш простий код і уникати заплутаних ситуацій. І ще одна порада - перш ніж створювати таблиці на html-сторінці, малюйте їх від руки, на паперових аркушах, бажано з майбутніми розмірами.параметри width і height мають числове значення. Як правило - це пікселі або відсотки. У першому випадку розміри стають абсолютними, а в другому - відносними. Абсолютні розміри таблиць
Спочатку поговоримо про абсолютні розміри. Найбільш поширена одиниця виміру абсолютних розмірів в HTML - пікселі. Один піксель дорівнює за розмірами світиться точці вашого монітора, з яких складається весь дисплей. В HTML для пікселів застосовується скорочення - px. Наприклад, запис 100px в html-коді, перекладається на російську як 100 пікселів. А тепер невеликий питання: 100 пікселів - це багато чи мало? Для відповіді на такі питання я раджу завантажити електронну лінійку, яка дозволить виміряти будь-який об'єкт на екрані, а також візуально оцінити величину будь-якого розміру. Вона дуже проста у використанні, так що ви без праці з нею розберетеся. Тепер я наведу приклад завдання осередки з абсолютними розмірами. Припустимо у вас є осередок і ви хочете, щоб її розміри становили ні багато ні мало, а 300х100 (в таких записах спочатку пишеться ширина, а потім висота). Щоб здійснити задумане, потрібно написати такий код: А можна і так: | Тут, як і в усьому мовою HTML, Не має значення порядок появи параметрів тега, тому можливі обидва варіанти запису. Тепер створимо таблицю шириною в 360 пікселів і висотою в 80 пікселів. Таблиця буде складатися з двох рядків і двох стовпців (тобто буде включати в себе 4 осередки). Рядки матимуть рівну висоту, а осередки - рівну ширину. Порахуйте самостійно розміри окремо взятої осередку, а потім намалюйте і образмерьте майбутню таблицю. Пишемо код, поки не ставлячи конкретних розмірів:
перша осередок |
друга осередок |
третя осередок |
четверта осередок |
До слова, подібний код ви вже бачили. Він був приведений в якості прикладу на попередній сторінці, тільки там було три рядки і три стовпці, а тут по 2 тих і інших. Зараз ви доповніть цей нескладний код розмірними параметрами. Спочатку спробуйте зробити це самостійно, а вже потім дивіться на готовий код, наведений нижче:
перша осередок |
друга осередок |
третя осередок |
четверта осередок |
В результаті приміщення цього коду в браузер, ви побачите подібну картинку. | перша осередок | друга осередок |
| третя осередок | четверта осередок |
Відносні розміри таблиць
Тепер перейдемо до відносної одиниці виміру - відсоткам. Система відносних розмірів є більш гнучкою. Тому що в цьому випадку розміри осередку, або таблиці підлаштовуються під розміри того елемента, в якому ця комірка або таблиця знаходиться. Такий зовнішній елемент, що містить в собі розглянуту осередок або таблицю, називають ще батьківським елементом. Для осередку батьківським елементом завжди є таблиця, що включає в себе цей осередок. Для таблиці, розташованої в осередку "cell" іншої таблиці, батьківським елементом буде осередок "cell". Для таблиці, що знаходиться безпосередньо в контейнері тега батьківським елементом буде тіло сторінки. Отже, якщо для осередку / таблиці заданий розмір у відсотках, браузер вважатиме ці відсотки від розміру батьківського елемента. Якщо ви поки не зрозуміли, про що йде мова - не страшно: приклади допоможуть вловити суть.Приклад перший. Припустимо, таблиця знаходиться безпосередньо в тілі сторінки. І параметр ширини таблиці наступний: width \u003d "50%". У такій ситуації ширина таблиці завжди буде дорівнює половині ширини сторінки. На якому б моніторі ця сторінка не була відкрита. І як би не змінювалися розміри вікна браузера. Приклад другий. Припустимо задана таблиця в 500 пікселів шириною. А ширина будь-якої комірки задана так: width \u003d "10%". У цьому випадку ширина осередку складе 10% від ширини таблиці, тобто ширина осередку буде дорівнює 50 пікселів. Але ось ви вирішили змінити ширину таблиці на 700 пікселів. Як тільки ви це зробите, ширина осередки автоматично зміниться на 70 пікселів. Приклад третій. Ширина таблиці складає 70% від ширини сторінки. А розмір осередку width \u003d "10%". У цьому випадку ширина таблиці підлаштується під ширину вікна браузера, як в першому прикладі. А ширина осередку підлаштується під ширину таблиці. Тобто при розтягуванні / стисненні вікна браузера по ширині, автоматично змінюється не тільки ширина таблиці, але і ширина осередку. А тепер створимо ту ж саму таблицю, що була наведена трохи вище, але розміри осередків зробимо відносними.
перша осередок |
друга осередок |
третя осередок |
четверта осередок |
Зауважте, що таблиця вийшла зовсім ідентичною тій, що була задана абсолютними розмірами. Так склалося внаслідок того, що розміри самої таблиці залишилися абсолютними. Якби і вони були відносними, таблиця змінювала б свої розміри у міру розтягування або стиснення вікна браузера. Спробуйте в попередньому коді задати відносні розміри для тега , А потім поекспериментуйте з розмірами вікна вашого браузера. Якщо ви бачите результат, то думаю, що ви вловили різницю між абсолютними і відносними розмірами для таблиць і їх осередків. До речі, такі ж системи завдання розмірів діють і для інших елементів HTML. Наприклад, для зображень. Робота з розмірами - це, мабуть, найскладніше при створенні таблиць в HTML. Тут потрібна уважність і безпомилковість. Саме тому я раджу спочатку промальовувати ваші таблиці на аркуші паперу. Так ви скоротите ймовірність помилки в кілька разів. Не полінуйтеся і приділіть час самостійним експериментів з таблицями і їх розмірами, адже реальні знання утворюються тільки в процесі практики. Після цього приступайте до вивчення властивостей таблиць, про які я розповім на наступній сторінці.
1. Що таке HTML таблиці і навіщо вони потрібні? html таблиці - це один із самих основних складових кожної html сторінки і відповідно кожного сайту. Наприклад, сайт сайт весь складається з таблиць: картинки, тексти, посилання, форми реєстрації - все розміщено відносно один одного за допомогою таблиць html (власне, весь сайт також розташований в одній великій таблиці).
2. Які теги у html таблиць?
Теги, Що задають таблицю html пишуться так:
Але так як ми знаємо, все таблиці складаються з рядків і стовпців (осередків), тому необхідно задати теги і для них:
|
- рядок html таблиці
| - стовпець (осередок) html таблиці.
А тепер давайте спробуємо об'єднати всі теги в одну таблицю. Для цього ми створимо html таблицю, яка складається з двох рядків і трьох стовпців:
Робиться така html таблиця дуже легко. Для початку поставимо теги самої таблиці, всередину яких поміщаємо необхідну кількість рядків (в нашому прикладі 2 рядки):
Потім кожен рядок розбиваємо на осередки за допомогою тегів стовпців:
|
- осередок 1.1
|
- осередок 1.2
|
- осередок 1.3
|
- осередок 2.1
|
- осередок 2.2
|
- осередок 2.3
Насправді, перша цифра в написах - це номер ряду, а друга номер комірки (1х2 - перший ряд, друга ланка й т.д.).
3. Як задати фоновий колір html таблиць?
А зараз давайте розберемося, як же задається фон таблиці або кожного осередку окремо.
Отже, для завдання фону використовується атрибут bgcolor \u003d "цвет_фона".
Наприклад, якщо нам необхідно задати один колір для всієї таблички, то робиться це так:
bgcolor \u003d "цвет_фона">
|
- осередок 1.1
|
- осередок 1.2
|
- осередок 1.3
|
- осередок 2.1
|
- осередок 2.2
|
- осередок 2.3
Наприклад, якщо необхідно зробити табличку жовтого кольору, то ми пишемо:
Якщо потрібно задати фоновий колір ряду html таблиці, то тоді атрибут bgcolor \u003d "цвет_фона" застосовуємо до тегу :bgcolor \u003d "# FFFF00">
bgcolor \u003d "# 0000FF">
1.1 |
1.2 |
1.3 |
2.1 |
2.2 |
2.3 |
|
В цьому випадку, атрибут номер комірки
задає білий колір тексту, розташованих у межах тега.
Точно так же задається і колір кожного осередку окремо. Наприклад, якщо потрібно змінити колір осередки 1.2 на синій, то всередині відкриваючого тега атрибут bgcolor \u003d "цвет_фона":
4. Як встановити розмір ширини і висоти осередків html таблиці?
Отже, для того, що б вручну встановити ширину і висоту осередків, використовують атрибути height і width. Їх можна задати для всієї таблиці, для одного ряду, для комірки (стовпчик). Висота і ширина можуть задаватися як в пікселях, так і відсотках. У нашому випадку ми поставимо ширину і висоту в пікселях для стовпців (осередків).
height - атрибут, який встановлює висоту комірки
width - атрибут, що задає ширину осередку
А тепер на прикладі:
Тепер поясню, чому ми задали висоту осередків тільки один раз в кожному рядку.
Якщо в ряду Ви задаєте для будь-якої комірки висоту більшу, ніж для інших то, не дивлячись на це, все осередки (стовпці) вашого ряду стануть по висоті рівні найбільшою. А ширину кожного ряду найкраще ставити окремо!
Ви можете задати висоту і ширину для всієї таблиці. В цьому випадку всі осередки (стовпці) і ряди поділять дане їм простір порівну, якщо не ставити їм дані параметри персонально (у відсотках від загальної ширини (висоти) таблиці або пікселях).
Так само, дуже часто доводиться ставити висоту height і ширину width у відсотках:
| вміст комірки |
Якщо ми ставимо для осередку ширину в 40 відсотків, як в нашому прикладі, то це означає, що на інші осередки у нас залишилося ще 60 відсотків, тобто сума їх ширин не повинна перевищувати 60 відсотків. Все дуже просто: в сумі ми маємо всього 100%. Рахуємо: 100 - 40 \u003d 60.
5. Як вирівняти текст всередині html таблиці?
А тепер давайте розберемося, як вирівняти текст в нашій html таблиці по лівому краю, по правому краю і по центру.
Робиться це за допомогою атрибута:
align \u003d "left" - вирівнює текст всередині html таблиці по лівому краю
align \u003d "center" - вирівнює текст html таблиці по центру
align \u003d "right" - вирівнює текст всередині html таблиці по правому краю
Відповідно, атрибут align може приймати ще значення right і left. Значення justify при вживанні з тегом атрибут align приймати не може.
Наприклад, код html таблиці, текст якої вирівняний по центру, виглядає так:
align \u003d "center">
align \u003d "left"\u003e 1x1 |
align \u003d "center">1.2 |
align \u003d "right"\u003e 1x3 |
align \u003d "left">2.1 |
align \u003d "center"\u003e 2x2 |
align \u003d "right">2.3 |
|
прописавши атрибут align \u003d "center" у відкритті , Ми вирівняли html таблицю по центру сторінки браузера.
Ось такий результат Ви отримаєте в браузері:
А тепер розглянемо на прикладі, як вирівняти текст всередині html таблиці по верхньому або по нижньому краю, тобто, як можна зробити так, щоб вміст комірки не тільки розташовувалося рівно посередині її (як за замовчуванням), а ще вгорі або внизу.
Вертикальне вирівнювання задається атрибутом:
valign \u003d "top" - зміст буде розташовуватися вгорі осередку
valign \u003d "middle" - зміст буде розташовуватися по центру осередки
valign \u003d "bottom" - зміст буде розташовуватися внизу комірки
Давайте розглянемо дані атрибути на нашому прикладі:
valign \u003d "top"\u003e 1x1 |
1.2 |
valign \u003d "top"\u003e 1x3 |
valign \u003d "bottom">2.1 |
2x2 |
valign \u003d "bottom">2.3 |
|
Ось що ми отримаємо, якщо подивимося в браузері результат роботи атрибутів align і valign:
6. Як об'єднати комірки і стовпці html таблиці?
У цій частині нашої статті ми поговоримо про атрибути colspan і rowspan.
colspan - визначає кількість стовпців, на які поширюється ця група
rowspan - визначає кількість рядів на які поширюється ця група
значення colspan і rowspan можуть приймати значення від 2 і більше, тобто осередок може розтягуватися на два і більше шпальти (ряду).
Отже, зараз на прикладі ми растянем осередок 1х1 на два стовпці (осередки). Для цього ми будемо використовувати атрибут colspan \u003d "2", прописавши його для осередку 1х1. Код буде виглядати так:
Як бачимо, осередок 1х1 поширюється на довжину двох осередків. Відповідно, її довжина дорівнює суммированной довжині цих двох осередків (160 пікселів). Ми не прописали атрибут width для осередку 1x1, але якби ми вирішили це зробити, то width ми задали б рівним 160 пікселям. І ще, зверніть увагу, що в нашому прикладі немає осередку 1х3, тобто в першому ряду всього лише два осередки, чому - ми вже це обговорили - осередок 1х1 дорівнює двом осередкам, завдяки атрибуту colspan.
З атрибутами colspan і rowspan необхідно звертатися дуже акуратно. Помилка може привести до того, що ваш сайт «поїде».
А тепер, коли ми розібралися з параметром colspan, Давайте розберемося з параметром rowspan. Принцип дії тут той же:
colspan \u003d "2"> 1.1 |
1.2 |
2.1 |
2.2 |
|
Таким чином, ми навчилися об'єднувати осередки в рядках і стовпцях html таблиць.
7. Як прибрати, додати або змінити відступи і як задати рамку html таблиці?
Отже, раніше ми створили html таблицю, між осередками якої чітко видно відступи. Щоб їх стало видно ще краще, давайте додамо рамку для нашої таблиці. Робиться це за допомогою атрибутів:
border \u003d "ширина рамки в пікселях" - встановлює ширину рамки
bordercolor \u003d "колір рамки"- встановлює колір рамки
Давайте, наприклад, зробимо нашій html таблиці рамку чорного кольору шириною 1 піксель.
Для цього тегу додаємо атрибути:
Тепер ми чітко бачимо відступи між осередками html таблиці і відступи від внутрішніх країв осередків до тексту. Отже, без проблем можемо управляти цими відступами. Для цього призначені атрибути:
cellspacing \u003d "ширина відступу в пікселях" - відступ між осередками
cellpadding \u003d "ширина відступу в пікселях" - відступ всередині осередку (від краю осередку до тексту, зображення, посилання ...)
Наприклад, давайте зробимо відступ між осередками 10 пікселів, а відступ від краю осередку до тексту збільшимо до 20 пікселів. Робиться це так:
cellpadding \u003d "20" cellspacing \u003d "10">
1.1 |
1.2 |
2.1 |
2.2 |
|
Якщо подивитися на результат в браузері, то ми чітко бачимо, що відстань між осередками ( cellspacing) Нашої html таблиці збільшилася до 10 пікселів, а відстань між текстом і внутрішнім краєм осередку збільшилася на 20 пікселів.
Якщо ж необхідно взагалі прибрати відступи, то просто напросто поставте cellpadding \u003d "0"і cellspacing \u003d "0".
8. Як одну html таблицю вставити всередину іншої?
Ми підходимо до завершального етапу по вивченню html таблиць. Зараз ми навчимося вставляти одну таблицю всередину іншої.
На прикладі, всередину осередку 1.2 ми вставимо нову таблицю, що складається з одного ряду і двох стовпців. Внутрішньої html таблиці ми встановимо червону рамку шириною 2 пікселя і відстань між осередками 0 пікселів. Також, внутрішню таблицю ми розмістимо вгорі осередку.
Робиться це дуже просто:
Ось що вийшло в результаті нових перетворень нашої таблиці (червоні осередки - внутрішня таблиця, яка перебуває всередині великої таблиці):
На цьому етапі дану статтю ми закінчимо. Думаю вона вийшла вдалою і не складною для розуміння, і сподіваюся, більше з таблицями у Вас проблем не буде.
Оцінка статті:
 Завантаження ...
| | | | | |
| | | | | | |
|
