Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Объединение ячеек таблицы в 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 Раскрутка и продвижение
Посетители Заработок

return_links(1); ?>

И на закрепление материала объединим ячейки Уникальный контент и ТИЦ и 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 Раскрутка и продвижение
Посетители Заработок

Создание сайта с помощью html
Как задать цвет фона в html
Добавление картинки на сайт
Изменение размера шрифта в html
Выравнивание сайта по центру
Как сделать активную ссылку
Создание таблиц в html
Объединение ячеек таблицы в html

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!