Объединение ячеек.

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

На самом деле слово " объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку " объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не " объединить" а " растянуть".

Эту задачу решают атрибуты colspan и rowspan

· colspan - определяет какое количество столбцов будет занимать данная ячейка

· rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо " объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

< html>
< head>
< title> Таблица< /title>
< /head>
< body>
< table border=" 1" >
< tr>
< td> строка1 ячейка1< /td>
< td> строка1 ячейка2< /td>
< td> строка1 ячейка3< /td>
< /tr>
< tr>
< td> строка2 ячейка1< /td>
< td> строка2 ячейка2< /td>
< td> строка2 ячейка3< /td>
< /tr>
< tr>
< td> строка3 ячейка1< /td>
< td colspan=" 2" > строка3 ячейка2< /td>
< td> строка3 ячейка3< /td>
< /tr>
< /table>
< /body>
< /html>

Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.

Исправленный пример:

< html>
< head>
< title> Таблица< /title>
< /head>
< body>
< table border=" 1" >
< tr>
< td> строка1 ячейка1< /td>
< td> строка1 ячейка2< /td>
< td> строка1 ячейка3< /td>
< /tr>
< tr>
< td> строка2 ячейка1< /td>
< td> строка2 ячейка2< /td>
< td> строка2 ячейка3< /td>
< /tr>
< tr>
< td> строка3 ячейка1< /td>
< td colspan=" 2" > строка3 ячейка2< /td>
< /tr>
< /table>
< /body>
< /html>

Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.

< html>
< head>
< title> Таблица< /title>
< /head>
< body>
< table border=" 1" >
< tr>
< td rowspan=" 3" > строка1 ячейка1< /td>
< td> строка1 ячейка2< /td>
< td> строка1 ячейка3< /td>
< /tr>
< tr>
< td> строка2 ячейка2< /td>
< td> строка2 ячейка3< /td>
< /tr>
< tr>
< td colspan=" 2" > строка3 ячейка2< /td>
< /tr>
< /table>
< /body>
< /html>

Всё просто.. главное быть внимательным!