Урок з HTML. Об'єднання осередків

HTML-таблицівпорядковують та виводять на екран дані за допомогою рядків або стовпців. Таблиці складаються з осередків, що утворюються при перетині рядків та стовпців. Осередки таблицьможуть містити будь-які HTML-елементи, такі як заголовки, списки, текст, зображення, елементи форм та інші таблиці. Кожній таблиці можна додати пов'язаний із нею заголовок, розташувавши його перед таблицею чи після неї.

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

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

Створення таблиць у HTML

• Зміст:

1. Як створити таблицю

Таблиця створюється за допомогою парного тега

Рис.1. Зовнішній вигляд таблиці без форматування css-властивостей

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

/* зовнішні межі таблиці сірого кольору завтовшки 1px */ table (border: 1px solid grey;) /* межі осередків першого ряду таблиці */ th (border: 1px solid grey;) /* межі осередків тіла таблиці */ td (border: 1px solid grey;)

Проміжки між осередками таблицізабираються за допомогою властивості table (border-collapse: collapse;).

Ширинатаблиці за замовчуванням дорівнює ширині її внутрішнього вмісту. Щоб встановити ширину, потрібно задати значення властивості width:

/* зробить ширину таблиці, що дорівнює ширині блоку контейнера, в якому вона знаходиться */ table (width: 100%;) /* задасть фіксовану ширину для таблиці */ table (width: 600px;)

Якщо для осередків таблиці задані внутрішні відступи і межі, то ширина таблиці міститиме наступні значення:
padding-left і padding-right, ширина border-left плюс ширина border-right останнього осередку в ряду. Якщо задані ширина і межі осередків, то ширина таблиці складатиметься із ширини осередків плюс ширина border-left і ширина border-right останнього осередку в ряду.

2. Як створити рядки (ряди) таблиці

Рядки або ряди таблиці створюються за допомогою тега

. Кількість горизонтальних рядків таблиці визначається кількістю парних тегів .

3. Як зробити комірку заголовка стовпця таблиці

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

4. Як зробити комірку тіла таблиці

створює осередки таблиці, всередину яких містяться дані таблиці. Парні теги , розташовані в одному ряду, визначають кількість осередків у рядку таблиці. Кількість пар осередків повинно дорівнювати кількості пар осередків. Для елемента доступні атрибути colspan, rowspan, headers.

5. Як додати підпис (заголовок) до таблиці

Створює підпис таблиці. Додається безпосередньо після тега

6. Групування рядків та стовпців таблиці

Створює структурну групу стовпців, виділяючи логічно однорідні осередки. Групує один або більше стовпців для єдиного форматування, дозволяючи застосувати стилі до стовпців замість того, щоб повторювати стилі для кожної комірки та кожного рядка. Додається безпосередньо після тегів Мал. 2. Виділення стовпців таблиці іншим кольором з використанням тегів та

7. Угруповання розділів таблиці

Елемент створює групу заголовків для рядків таблиці з метою єдиного оформлення. Використовується у поєднанні з елементами

ідля вказівки кожної частини таблиці.

Елемент має бути використаний у такому порядку: як дочірній елемент

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

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

і .

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

8. Як об'єднати осередки таблиці

Атрибути colspan і rowspan поєднують комірки таблиці. Атрибут colspan визначає кількість осередків, об'єднаних по горизонталі, а rowspan - по вертикалі.


Мал. 3. Приклад об'єднання осередків таблиці по горизонталі за допомогою атрибуту colspan

9. Атрибути елементів таблиці

Таблиця 1. Атрибути елементів таблиці

Значення, що приймаються: список імен осередків, розділених пробілами; ці імена повинні бути присвоєні осередкам через їх атрибут id.
Значення, що приймаються: будь-яке ціле позитивне число.

Атрибут	Опис, прийняте значення
colspan	Кількість осередків у рядку для об'єднання по горизонталі.
headers	Задає список осередків заголовка, що містять інформацію про заголовок поточного осередку даних. Призначений для мовних браузерів.	...	...
rowspan	Кількість осередків у стовпці для об'єднання по вертикалі.	Можливі значення: кількість від 1 до 999.
span	Кількість колонок, що об'єднуються завдання єдиного стилю, за умовчанням дорівнює 1.

10. Приклад створення таблиці


Мал. 4. Створення меню ресторану за допомогою HTML таблиці

Меню ресторану "Ромашка"

Кухня	Холодні страви		Гарячі страви		Десерти
	Салати	Закуски	Перші страви	Другі страви
Російська	Вінегрет	Мова з хроном	Щи з квашеною капустою	Вареники з картоплею	Печені яблука з медом
	Олів'є	Студень яловичий	Розсольник домашній	Карасі запечені у сметані	Блинчастий пиріг
	Оселедець під шубою"	Судак заливний	М'ясна солянка	Котлети "Пожарські"	Тістечко "Картопля"
Іспанська	Севиче з гребінців	Емпанадас	Хлібний суп із часником	Паелья з морепродуктами	Чуррос
	Тімбал з авокадо та тунця	Ахотомате	Астурійська фабада	Свиняче раксо	Альмойшавена
	Квасоля з шинкою	Чанфайна	Рибний суп з манними галушками	Тортілья картопляна	Бунуелос
Французька	Вогезький салат	Рієт з курки	Баклажанний крем-суп "Ренуар"	Картопля огороджена	Бріоші
	Салат "Панзанелла"	Деліез з сиру	Французький гарбузовий суп	Гратин із птиці	Лігурійський лимонний пиріг
	Тар-тар	Маринований лосось	Суп "Конті"	Тартіфлетт	Саварен "Тріумф"

body ( margin: 0; background: #F4F1F8; ) ​​table ( border-collapse: collapse; line-height: 1.1; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: radial-gradient (farthest-corner at 50% 50%, білий, #DCECF8); color: #0C213B; #F3CD26; text-shadow: 1px 1px 0 rgba(0,0,0,.3); ) caption:before, caption:after ( content: "\274B"; color: #A9E2CC; ( padding: 10px; border: 1px solid #A9E2CC; ) td ( font-size: 0.8em; padding: 5px 7px; border: 1px solid #A9E2CC; ) .first ( font-size: 1em; font-weight: bold; text-align: center;

3.8. Об'єднання осередків таблиці

На практиці зустрічається велика кількість таблиць, в яких один осередок поєднує в собі кілька осередків за висотою та шириною (див. рис. 3.2). У HTML комірки об'єднують за допомогою атрибутів colspan та rowspan. Атрибут colspan визначає кількість осередків, на які простягається цей осередок по горизонталі, а rowspan - по вертикалі.

На рис. 3.12 зображено таблицю з об'єднаними осередками. Заголовок таблиці знаходиться в комірці, що поєднує всі три комірки рядка. Таблиця містить ще два осередки, кожна з яких об'єднує два осередки по вертикалі. Код такої таблиці наведено у лістингу 3.7.

Мал. 3.12.Таблиця з об'єднаними осередками

Лістинг 3.7.Приклад використання атрибутів об'єднання осередків

Виділення осередків Щоб змінити параметри форматування одразу кількох осередків, їх потрібно виділити, використовуючи один із таких прийомів.? Для виділення окремого осередку підведіть покажчик миші до її лівої межі і, коли він набуде форми чорної похилої стрілки,