Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / HTML /
Объединение ячеек в таблицах HTML: Полное руководство для чайников
Таблицы в HTML — это отличный способ структурировать данные. Но просто набор строк и столбцов выглядит скучно и не всегда удобно. Иногда нужно, чтобы заголовок растягивался на несколько колонок, а одна ячейка занимала две строки.
Именно для этого существуют атрибуты colspan (объединение столбцов) и rowspan (объединение строк).
В этой статье на простых примерах мы разберемся, как правильно объединять ячейки, чтобы ваши таблицы были красивыми и понятными.
Что такое объединение ячеек?
Представьте обычную таблицу в Excel. Выделяете несколько ячеек, нажимаете "Объединить" — и получается одна большая ячейка. В HTML происходит то же самое, только команды отдаются с помощью специальных атрибутов.
Основные правила
- Объединение работает только с соседними ячейками.
- Когда вы объединяете ячейки, некоторые теги
<td>или<th>нужно убрать из кода, потому что их место заняла "большая" ячейка. - Атрибуты прописываются внутри открывающего тега ячейки.
Как объединить столбцы (атрибут colspan)
Атрибут colspan (от англ. column span — охват колонок) нужен,
чтобы ячейка растянулась на несколько колонок по горизонтали.
Задача: Сделать шапку для расписания, где общий заголовок "Расписание уроков" занимает сразу три колонки: Время, Предмет, Кабинет.
<table border="1" cellpadding="5">
<tr>
<!-- Эта ячейка растянется на 3 колонки -->
<th colspan="3">Расписание уроков</th>
</tr>
<tr>
<th>Время</th>
<th>Предмет</th>
<th>Кабинет</th>
</tr>
<tr>
<td>8:30</td>
<td>Математика</td>
<td>101</td>
</tr>
</table>
Как это выглядит:
| Расписание уроков | ||
|---|---|---|
| Время | Предмет | Кабинет |
| 8:30 | Математика | 101 |
Как это работает:
Мы сказали первой ячейке colspan="3". Это значит, что она занимает место трех обычных ячеек.
Поэтому в следующей строке мы смело пишем три ячейки
(<th>Время</th>, <th>Предмет</th>, <th>Кабинет</th>), и таблица не ломается.
Как объединить строки (атрибут rowspan)
Атрибут rowspan (от англ. row span — охват строк) нужен для объединения ячеек по вертикали.
Задача: Сделать список сотрудников. У одного человека (Иванова) есть два номера телефона, и фамилия не должна дублироваться.
<table border="1" cellpadding="5">
<tr>
<th>Сотрудник</th>
<th>Телефон</th>
</tr>
<tr>
<!-- Ячейка с фамилией Иванов будет занимать 2 строки -->
<td rowspan="2">Иванов И.И.</td>
<td>+7-901-111-1111</td>
</tr>
<tr>
<!-- Здесь ячейка <td> для фамилии уже НЕ НУЖНА! Она занята сверху -->
<td>+7-902-222-2222</td>
</tr>
<tr>
<td>Петров П.П.</td>
<td>+7-903-333-3333</td>
</tr>
</table>
Как это выглядит:
| Сотрудник | Телефон |
|---|---|
| Иванов И.И. | +7-901-111-1111 |
| +7-902-222-2222 | |
| Петров П.П. | +7-903-333-3333 |
Важный момент:
Обратите внимание: во второй строке (<tr>) у нас только один тег <td>
для телефона. Мы не пишем вторую ячейку для фамилии, потому что её место уже занято ячейкой из первой строки,
у которой стоит rowspan="2".
Сложный пример: объединяем и строки, и столбцы
Чаще всего на практике встречаются комбинированные варианты. Главное правило здесь — не запутаться в подсчете ячеек.
Задача: Сделать прайс-лист на услуги.
<table border="1" cellpadding="8">
<tr>
<th colspan="2">Услуга</th>
<th>Цена</th>
</tr>
<tr>
<td rowspan="2">Ремонт</td>
<td>Мелкий</td>
<td>1000 руб.</td>
</tr>
<tr>
<td>Капитальный</td>
<td>5000 руб.</td>
</tr>
<tr>
<td colspan="2">Консультация</td>
<td>Бесплатно</td>
</tr>
</table>
Как это выглядит:
| Услуга | Цена | |
|---|---|---|
| Ремонт | Мелкий | 1000 руб. |
| Капитальный | 5000 руб. | |
| Консультация | Бесплатно | |
Разбор полетов:
- Строка 1: У нас есть
colspan="2", значит в этой строке по факту две ячейки (первая "Услуга", и вторая — "Цена"). - Строка 2: Обычная строка. Но у первой ячейки стоит
rowspan="2"(будет занимать еще и третью строку). Значит, в этой строке мы пишем две ячейки: "Ремонт" (ушла вниз) и рядом "Мелкий". - Строка 3: Это самая сложная для понимания новичков. Так как ячейка "Ремонт"
из второй строки все еще действует (у нее
rowspan="2"), в третьей строке мы НЕ пишем первую ячейку. Мы сразу начинаем со второй ячейки — "Капитальный", и затем пишем третью — "5000 руб.". - Строка 4: Здесь все просто.
colspan="2"объединяет первые две колонки в одну.
Частые ошибки (чего делать не стоит)
- Разное количество ячеек. Самая популярная ошибка. Если вы объединили ячейки, пересчитайте,
сколько тегов
<td>или<th>должно быть в каждой строке. Суммаcolspanв строке должна быть одинаковой для всех строк таблицы. - Забыли удалить ячейку. Если вы поставили
rowspan="2"в первой строке, не забудьте убрать одну ячейку во второй строке. - Путаница с
thиtd. Атрибутыcolspanиrowspanработают и с заголовками<th>, и с обычными ячейками<td>.
Заключение
Объединение ячеек (colspan и rowspan) — это базовый навык верстальщика. Поначалу может быть непривычно считать ячейки, но с практикой это становится просто.
Главный совет: всегда рисуйте структуру таблицы на бумажке или в уме, прежде чем писать код. Отмечайте, какие ячейки сколько места занимают, и тогда количество тегов в строках никогда не собьется.
На этом всё. Подписывайтесь на новости, чтобы ничего не пропустить (красная кнопка вверху слева или ссылки ниже).