Урок по html. Об`єднання осередків
Відео: 8 Об`єднання осередків в таблицях HTML
Таблиці в HTML - вельми зручний елемент. З ними можна робити що завгодно. Зрозуміло, основне призначення - розміщення інформації у вигляді таблиці. Але розробники сайтів пішли далі. У свій час дуже популярно було використовувати таблиці для створення каркаса сайту. Зараз професіонали намагаються так не робити.
Таблиці знайшли своє широке застосування через велику кількість атрибутів. Наприклад, дуже корисним виявилося властивість об`єднання рядків або стовпців.
Введення в теорію
В HTML об`єднання осередків відбувається за допомогою двох атрибутів: colspan і rowspan. Вони вказуються для тега td.
Давайте для початку розберемо структуру будь-якої таблиці, перш ніж будемо заглиблюватися в тему. У будь-якій таблиці є рядок, а в ній - осередки. Запам`ятайте, що спочатку все таблиці повинні містити однакову кількість осередків.
На малюнку вище зазначено два рядки, і в кожній по три осередки. Це є звичайною таблицею. Якщо ви в якому-небудь рядку вкажіть меншу кількість осередків, то таблиця "з`їде", Все буде відображатися некоректно.
HTML-таблиця: об`єднання осередків по вертикалі і горизонталі
Вказувати меншу кількість осередків або рядків можна тільки в тому випадку, якщо ви щось поєднуєте. Але замість вилученого елемента в найближчому сусідньому до початку потрібно вказати додатковий атрибут. Якщо поєднуєте стовпці, то colspan, якщо рядки, то rowspan. У значенні атрибута вказується кількість елементів, які потрібно об`єднати.
Відео: HTML для початківців: Робота з таблицями, злиття осередків (rowspan, colspan). Урок 10!
Зверніть увагу, що вказувати потрібно саме в найближчому елементі до початку. Наприклад, на малюнку вище, якби ви хотіли об`єднати осередок 1 і 2, слід звернути увагу на осередку 1 атрибут colspan зі значенням два. І видалити осередок номер 2 або 3, вже не важливо.
Суть полягає в тому, що ви вказуєте осередку, скільки простору вона займе. За замовчуванням значення становить 1.
Об`єднання осередків по вертикалі HTML-таблиці відбувається за таким же принципом. Просто займане простір буде вважатися по вертикалі. Дивимося малюнок нижче.
Тут осередок з цифрою 43 займає два рядки. Для цього вказали атрибут rowspan. Запам`ятовується просто:
- Row - рядок.
- Col - колонка / стовпець.
- Span - об`єднання.
Творці мови намагалися максимально наблизити його до людського, щоб, навіть не знаючи його, можна було хоч якось розбиратися.
В HTML об`єднання осередків можна робити відразу в двох напрямках: по вертикалі і горизонталі. Для цього вказуємо одночасно обидва атрибути.
Відео: Dreamweaver. Об`єднання комірок таблиць. Нестандартне використання таблиць. урок 32
На малюнку вище якраз це і зазначено, що можна робити об`єднання: рядків, стовпців і одночасно стовпців і рядків.
HTML: об`єднання осередків. приклади
Розглянемо більш складні поетапні приклади в великих таблицях. Нижче на малюнку зліва вказаний вихідний варіант звичайної таблиці. А справа - варіант з об`єднанням двох осередків у другому рядку. Так наочніше і простіше порівнювати HTML-код.
Відео: Введення в HTML. Урок 8 Створення HTML таблиці
Так само можна об`єднати три осередки в центрі. У першому випадку атрибут colspan вказували в осередку №1. Тут перша буде без змін, а в другій
Якщо ж ви хочете об`єднати всі осередку в рядку до єдиної, то видаляємо чотири td і в першій вказуємо colspan = `5`.
Як бачите, на ділі все це просто. Складного нічого немає. Головне, уважно, з першого разу, розібратися у всіх підводних каменях таблиць, і потім ніяких проблем виникати не повинно.
Таблиці як каркас сайту
В HTML об`єднання осередків не завжди використовується для звичайних таблиць з інформацією (як в Word або Excel). Розробники сайтів часто, а раніше поголовно використовували їх для верстки сайтів.
Наприклад, можна розглянути цей макет сайту. Даний дизайн - дуже простий і примітивний. Але тут можна показати використання об`єднання явно.
Тут спочатку була таблиця з трьох рядків, по два осередки в кожній. Потім, щоб розмістити логотип сайту, два осередки в першому рядку були об`єднані. У нижньому рядку зробили те ж саме, щоб розмістити "підвал".
Завдяки цьому можна розміщувати елементи дизайну на своїх місцях, і ніщо нікуди не поїде за свої межі. Це дуже зручно і просто. Тому і було настільки популярно. Зараз же рекомендується для створення блоків тег div.
висновок
І пам`ятайте, що в HTML table об`єднання осередків можна робити як завгодно. Все залежить від того, що вам треба, і як ви хочете це оформити. Головне, не заплутатися. Якщо хочете створити велику таблицю з великою кількістю об`єднань, то рекомендується попередньо намалювати все це на листочку чи в Paint. Початківцям верстальщикам так буде простіше.
Коли наберетеся досвіду, такі операції ви зможете без праці виробляти в своїй голові.
