Таблица в таблице. Объединение ячеек

 

Все основные элементы для создания таблиц мы уже знаем. Теперь научимся объединять ячейки и встраивать таблицу в таблицу.

Атрибуты COLSPAN и ROWSPAN

Очень полезные атрибуты. С их помощью можно объединять ячейки по вертикали или по горизонтали. Придаются эти атрибуты тегу <td>.

colspan — определяет количество столбцов которое объединено в одной ячейке. Значение по умолчанию = 1.

rowspan — определяет количество строк которое объединено в одной ячейке. Значение по умолчанию = 1.

Давайте создадим таблицу из трех столбцов и трех строк. Верхние ячейки объединим. Часто верхняя строка является заголовком таблицы. Во второй строке объединим две ячейки и обратите внимание на ширину третьей ячейки (атрибут width).

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr>
<td colspan="3" align="center">Заголовок таблицы</td>
</tr>
<tr align="center">
<td colspan="2">Значения X и Y</td>
<td width="33%">Значения Z</td>
</tr>
<tr align="center">
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>

Результат в браузере:

Заголовок таблицы
Значения X и Y Значения Z
X Y Z

А теперь пример объединения строк:

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr align="center">
<td colspan="3">Заголовок таблицы</td>
</tr>
<tr>
<td rowspan="2">Строка 2 + строка 3.</td>
<td>Строка 2, ячейка 2.</td>
<td>Строка 2, ячейка 3.</td>
</tr>
<tr>
<td>Строка 3, ячейка 2.</td>
<td>Строка 3, ячейка 3.</td>
</tr>
</table>

Результат в браузере:

Заголовок таблицы
Строка 2 + строка 3. Строка 2, ячейка 2. Строка 2, ячейка 3.
Строка 3, ячейка 2. Строка 3, ячейка 3.

Обратите внимание, что в внутри последней пары тегов <tr> отсутствует последняя пара тегов <td>. Попробуйте ее не убирать и посмотрите что получится. Станет намного понятнее.

Не забывайте сохранять документ и обновлять страницу в браузере.

Вставить одну таблицу в другую таблицу

При создании сайта довольно часто нужно одну таблицу поместить в другую. Сделать это довольно просто.

Помещаемая таблица должна распологаться между тегами <td>.

Давайте в нашу вышеприведенную таблицу, в объединенную ячейку, поместим еще одну таблицу. Сделаем цвет рамки красным, чтобы было нагляднее. А объединенной ячеке зададим ширину 50%.

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr align="center">
<td colspan="3">Заголовок таблицы</td>
</tr>
<tr>
<td rowspan="2" width="50%">

<table border="1" bordercolor="red">
<tr>
<td>Первая строка встроенной таблицы.</td>
</tr>
<tr>
<td>Вторая строка встроенной таблицы.</td>
</tr>
</table>

</td>
<td>Строка 2, ячейка 2.</td>
<td>Строка 2, ячейка 3.</td>
</tr>
<tr>
<td>Строка 3, ячейка 2.</td>
<td>Строка 3, ячейка 3.</td>
</tr>
</table>

И вот как это должно выгля деть в браузере:

Заголовок таблицы
Первая строка встроенной таблицы.
Вторая строка встроенной таблицы.
Строка 2, ячейка 2. Строка 2, ячейка 3.
Строка 3, ячейка 2. Строка 3, ячейка 3.

Встраиваемая таблица ничем не отличается. К ней применимы все возможные атрибуты.

Ну вот и все, что я хотел рассказать о языке HTML. Надеюсь все понятно.

Здесь я ничего не рассказываю про формы. Что такое форма можно посмотреть на странице Контакты. Для обработки формы необходим файл-обработчик, написанный на языке PHP.

На странице Скачать бесплатно Вы можете скачать видео-урок по созданию и установке формы обратной связи на свой сайт.

Если Вы решили, что достаточно ознакомились с языком HTML,
переходите к изучению CSS >>

Дорогой посетитель. Сохрани для себя эту статью
и поделись ссылкой с друзьями