таблицьнайкраще розглянути з прикладу простої таблиці, HTML-код якої наведено у лістингу 5.10.

Це звичайна таблиця, комірки якої пронумеровані – так нам буде простіше надалі. На рис. 5.2 показаний її вигляд у вікні Web-браузера.

А тепер розглянемо таблицю на рис. 5.3.

Тут виконано об'єднання деяких осередків. Видно, що об'єднані осередки немов злилися в одну. Як це зробити?

Спеціально для цього теги та підтримують два дуже примітні необов'язкові атрибути. Перший - COLSPAN - об'єднує осередкипо горизонталі, другий-ROWSPAN-по вертикалі.

Щоб поєднати кілька осередків по горизонталі в одну, потрібно виконати такі кроки.

1. Знайти в коді HTML тег ( ), що відповідає першому з комбінованих осередків (якщо вважати осередки зліва направо).

2. Вписати в нього атрибут COLSPAN і привласнити йому кількість комірок, що об'єднуються, вважаючи і найпершу з них.

3. Видалити теги ( ), створюють інші об'єднуються осередки цього рядка.

Давайте об'єднаємо комірки 2 та 3 таблиці (див. листинг 5.10). Виправлений фрагмент коду, який створює перший рядок цієї таблиці, наведено у лістингу 5.11.

Так само створимо об'єднані осередки 4 + 5 і 12 + 13 + 14 + 15.

Об'єднати осередки по вертикалі трохи складніше. Ось кроки, які потрібно для цього виконати.

1. Знайти в коді HTML рядок (тег ), в якому знаходиться перший з комірок, що об'єднуються (якщо вважати рядки зверху вниз).

2. Знайти в коді цього рядка тег ( ), що відповідає першому з об'єднаних осередків.

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

4. Переглянути наступні рядки та видалити з них теги ( ), що створюють інші комірки, що об'єднуються.

Нам залишилось об'єднати комірки 1 та 6 нашої таблиці. Лістинг 5.12 містить виправлений фрагмент її HTML-коду (виправлення торкнуться першого і другого рядка).

Звернемо увагу, що ми видалили з другого рядка тег, що створює шостий осередок, оскільки він об'єднався з першим осередком.

Нині застосовується не дуже часто. Однак раніше, у період розквіту табличного Web-дизайну, важко було зустріти таблицю без об'єднаних осередків. Так чи інакше, знати про нього не завадить.

Урок 11.

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

У цьому уроці продовжуємо вивчати таблиці, а саме ми розглянемо ще два атрибути для тега <td>, які відповідають за об'єднання осередків Подивившись на малюнок нижче, Ви зрозумієте про яке об'єднання йтиметься.

Таблиця зображена ліворуч, має нормальну структуру. У правій таблиці в першому рядку два осередки об'єднані між собою, утворюючи одну велику комірку.

Застосування цих атрибутів трохи важче, ніж застосування інших. Саме тому їм відведено окремий урок.

Атрибут colspan.

Атрибут colspanвикористовується для об'єднання осередків по горизонталі. У значенні атрибута вказується кількість осередків, що об'єднуються в одну.

Увага! Дуже важливо, щоб загальна кількість об'єднаних і звичайних осередків одного рядка дорівнювала загальній кількості осередків іншого рядка. Розглянемо як приклад праву таблицю першого малюнка. Верхній рядок містить у собі лише одну велику комірку, що складається з двох звичайних, а нижній рядок містить у собі два звичайні комірки.
Нижче наведено варіант правильно написаного коду:

Пояснення до коду:
Верхній рядок <tr>має один осередок <td>, для якої прописаний атрибут colspanзі значенням 2 . Це означає, що даний осередок поєднує в собі 2 осередки, відповідно цей осередок замінює 2 осередки. Другий рядок <tr>має 2 звичайні осередки <td>.
Виходить, що у верхньому рядку у нас два об'єднані між собою осередки, а в нижньому рядку два звичайні осередки. Кількість дорівнює, отже код написаний правильно.

Тепер приклад коду з поширеною помилкою:

Пояснення до коду:
Помилка в тому, що перший рядок <tr>містить не два осередки <td>, а три, в той час як другий рядок <tr>містить два осередки <td>.
Дивлячись на код, візуально здається, що кількість осередків у рядках однакова, оскільки кількість тегів <td>однакове. Але один із тегів <td>має атрибут colspanзі значенням 2 Це означає, що цей один осередок займає місце двох.

Атрибут rowspan.

Атрибут rowspanвикористовується для поєднання осередків по вертикалі. Принцип дії такий самий як і в атрибуту colspan.

Пояснення до коду:
Верхній рядок <tr>має три осередки <td>для однієї з них прописаний атрибут rowspanзі значенням 3 . Це означає, що цей осередок поєднує в собі 3 осередки (який заданий атрибут + 2 нижніх осередки по вертикалі). Як я вже сказав, перший рядок має 3 осередки, це означає, що і нижні два рядки повинні мати теж по три осередки. Дивлячись на код, ми бачимо, що нижні два рядки <tr>мають лише по два осередки <td>, але не варто забувати, що перший осередок верхнього рядка зайняв своє місце + ще місце двох осередків що знаходяться під нею. Це означає, що загальна кількість осередків у кожному з окремого рядка дорівнює трьом.

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

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

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

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

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

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