Главная

Заказать статью

Связь с автором

Заказать сайт

Статьи

Объединение ячеек таблицы в html

Думаю, что вы имели дело с текстовым редактором microsoft word и наверняка вам приходилось работать с таблицами и объединять несколько ячеек в одну. Так вот, html тоже позволяет объединять ячейки с помощью параметров rowspan и colspan, прописываемых в теге <td> (или <th>). Параметр rowspan объединяет ячейки в одном столбце, расположенные ниже от текущей ячейки, то есть смежные ячейки по вертикали, а параметр colspan объединяет ячейки в одной строке, расположенные справа от текущей ячейки, то есть смежные ячейки по горизонтали. Посмотрим на пример и все станет ясно:

Возьмем простую таблицу, состоящую из трех строк и трех столбцов.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td>Домен</td>
<td>Хостинг</td>
<td>Сайт</td>
</tr>

<tr align="center" bgcolor="#66FFCC">
<td>Уникальный контент</td>
<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr>

<tr align="center" bgcolor="#66FF99">
<td>ТИЦ и PR</td>
<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен	Хостинг	Сайт
Уникальный контент	Яндекс и Google	Раскрутка и продвижение
ТИЦ и PR	Посетители	Заработок

Теперь объединим ячейки с Доменом и Хостингом. Для это прописываем в первой строке в теге <td> параметр colspan="2", тем самым мы сделаем одну ячейку равной двум. Не забудьте удалить лишний столбец в первой строке (ячейку, которую мы присоединили) - Хостинг.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td colspan="2">Домен и хостинг</td>

<td>Сайт</td>
</tr>

<tr align="center" bgcolor="#66FFCC">
<td>Уникальный контент</td>
<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr>

<tr align="center" bgcolor="#66FF99">
<td>ТИЦ и PR</td>
<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен и хостинг		Сайт
Уникальный контент	Яндекс и Google	Раскрутка и продвижение
ТИЦ и PR	Посетители	Заработок

А теперь объединим Домен, Хостинг и Сайт. Для этого достаточно заменить colspan="2" на colspan="3" и удалить присоединенные ячейки хостинг и сайт.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td colspan="3">Домен, хостинг и сайт</td>
</tr>

<tr align="center" bgcolor="#66FFCC">
<td>Уникальный контент</td>
<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr>

<tr align="center" bgcolor="#66FF99">
<td>ТИЦ и PR</td>
<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен, хостинг и сайт
Уникальный контент	Яндекс и Google	Раскрутка и продвижение
ТИЦ и PR	Посетители	Заработок

С этим, думаю, все понятно, теперь перейдем к параметру rowspan, чтобы объединить ячейки по вертикали. В данном случае объединим Домен и уникальный контент. Для этого в первой строке прописываем параметр rowspan="2" в теге <td> и удаляем присоединенную ячейку Уникальный контент.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td rowspan="2">Домен и уникальный контент</td>
<td>Хостинг</td>
<td>Сайт</td>
</tr>

<tr align="center" bgcolor="#66FFCC">

<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr>

<tr align="center" bgcolor="#66FF99">
<td>ТИЦ и PR</td>
<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен и уникальный контент	Хостинг	Сайт
Домен и уникальный контент	Яндекс и Google	Раскрутка и продвижение
ТИЦ и PR	Посетители	Заработок

Теперь объединим Домен, Уникальный контент и ТИЦ и PR. Для этого достаточно заменить rowspan="2" на rowspan="3" и удалить присоединенные ячейки уникальный контент и ТИЦ и PR.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td rowspan="3">Домен, уникальный контент и ТИЦ и PR</td>
<td>Хостинг</td>
<td>Сайт</td>
</tr>

<tr align="center" bgcolor="#66FFCC">

<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr>

<tr align="center" bgcolor="#66FF99">

<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен, уникальный контент и ТИЦ и PR	Хостинг	Сайт
	Яндекс и Google	Раскрутка и продвижение
	Посетители	Заработок

Пиломатериалы от 2999 р/м3: брус.

И на закрепление материала объединим ячейки Уникальный контент и ТИЦ и PR. Для этого пропишем во второй строке rowspan="2" в теге <td> и удалим присоединяемую ячейку ТИЦ и PR.

<table width="600" height="100" border="2" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#66FFFF">
<td>Домен</td>
<td>Хостинг</td>
<td>Сайт</td>
</tr><tr align="center" bgcolor="#66FFCC">
<td rowspan="2">Уникальный контент и ТИЦ и PR</td>
<td>Яндекс и Google</td>
<td>Раскрутка и продвижение</td>
</tr><tr align="center" bgcolor="#66FF99">

<td>Посетители</td>
<td>Заработок</td>
</tr>
</table>

Домен	Хостинг	Сайт
Уникальный контент и ТИЦ и PR	Яндекс и Google	Раскрутка и продвижение
Уникальный контент и ТИЦ и PR	Посетители	Заработок