Объединение ячеек | htmlbook.ru
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.
Пример 12.3. Неверное объединение ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Неправильное использование colspan</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<td colspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>Результат данного примера показан на рис.
12.5.
Рис. 12.5. Появление дополнительной ячейки в таблице
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.
Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.
Пример 12.4. Объединение ячеек по вертикали и горизонтали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Объединение ячеек</title>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.
0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 12.6.
Рис. 12.6. Таблица с объединенными ячейками
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
HTML по теме
- Тег <td>
Статьи по теме
- Объединение ячеек
Как создать таблицу в HTML, как объединить ячейки таблицы
Главная > Учебник HTML >
Назначение таблиц
Таблицы в HTML имеют две функции.
Первая — это собственно таблицы, то есть вывод информации в виде
таблицы. А вторая — это вёртска страницы. Отдельные части контента размещаются в разных ячейках
таблицы и таким образом оказываются в нужном месте страницы. Табличная вёрстка устарела и почти
не используется.
Создание таблицы
Рассмотрим, как создать таблицу в HTML. Это делается с помощью тэга <table>. Таблицы состоят из строк, внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг <tr> добавляет в таблицу строку, а тэг <td> добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Вот код такой таблицы:
+
8 | <table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
</tr>
</table> |
Для того, чтобы были видны рамки таблицы, тэгу <table> был задан
атрибут border.
Объединение ячеек таблицы
Есть возможность объединить несколько ячеек в одну. Для этого у тэга <td> есть атрибуты, которые меняют структуру таблицы. Атрибут colspan объединяет ячейки внутри одной строки. А атрибут rowspan, объединяет ячейки из разных строк. Значением этих атрибутов является количество объединяемых ячеек.
Создадим такую таблицу:
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| Объединённая ячейка | |
Код такой таблицы выглядит так:
18 | <table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td colspan="2">Объединённая ячейка</td>
</tr></table> |
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек.
Теперь создадим такую таблицу:
| строка 1 ячейка 1 | Объединённая ячейка |
| строка 2 ячейка 1 |
Код у этой таблицы такой:
27 | <table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td rowspan="2">Объединённая ячейка</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
</tr></table> |
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
<th> — заголовочная ячейка. Обычно находятся в первой строке таблицы.
Используются для создания названия колонки таблицы. От тэга <td> отличается
только жирным шрифтом и выравниванием по центру.
<caption> — находится внутри тэга <table>, добавляет заголовок таблицы.
<thead> — cодержит несколько первых строк таблицы для указания особого стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с самой первой строки.
<tbody> — содержит несколько строк таблицы для указания особого стиля. Таких тегов в таблице может быть несколько.
<tfoot> — содержит строки таблицы, которые отобразятся в самом низу таблицы.
<col> — определяет стиль для одной колонки таблицы, начиная с первой. То есть первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает по-разному в разных браузерах.
Как объединить строки и столбцы в таблице HTML
Задавать вопрос
спросил
Изменено 6 месяцев назад
Просмотрено 2к раз
Как создать эту таблицу в HTML?
Я попробовал этот код, но он не работает должным образом.
..
| А | Б | С | <й>Д||
|---|---|---|---|---|
| А, И, Ж, К | Г,Ч | |||
| К,О,Л,П | ||||
| М, Н | ||||
| А | Б | <тд>С <тд>Д|||
| 2 | А,И,Ж,З | Г,Ч | ||
| К,О,Л,П | ||||
| М,Н | ||||
таблица {
максимальная ширина: 700 пикселей;
высота: авто;
поле: 20px авто;
цвет фона: #edd;
положение: родственник;
}
.стол-голова {
дисплей: гибкий;
высота: 150 пикселей;
}
.table-head-box {
ширина: 25%;
цвет фона: #000;
граница: 1px сплошной красный;
цвет: #fff;
}
.таблица-тело {
дисплей: гибкий;
flex-направление: строка;
высота: 100%;
высота: 600 пикселей;
}
.стол-тело-слева,
.таблица-тело-право {
дисплей: гибкий;
flex-направление: столбец;
высота: 100%;
ширина: 100%;
}
.table-body-left {
ширина: 100%;
высота: 100%;
}
.таблица-тело-право {
ширина: 100%;
высота: 100%;
}
.стол-головной ящик,
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
размер шрифта: 25px;
}
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
граница: 1px сплошной синий;
}
.
table-body-left-top,
.table-body-right-bottom {
высота: 70%;
ширина: 100%;
}
.table-body-right-top,
.table-body-left-bottom{
высота: 30%;
ширина: 100%;
} 
