1. Главная страница » Уроки HTML » Объединяем ячейки таблицы

Объединяем ячейки таблицы

Автор: | 14.05.2013

Здесь мы поговорим об атрибутах «colspan» и «rowspan». Colspan — определяет количество столбцов, на которые простирается данная ячейка, а rowspan — количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца или ряда). Итак, попробуем растянуть ячейку а-1 на два столбца (ячейки). Для этого мы используем атрибут colspan=»2″, прописав его для ячейки а-1. Код будет выглядеть следующим образом:

<table>
<tr>
<td height=»50″ bgcolor=»red» colspan=»2″>а-1</td>
<td width=»100″ bgcolor=»green»>а-2</td>
<td width=»100″ bgcolor=»red»>а-3</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green»>б-1</td>
<td width=»100″ bgcolor=»red»>б-2</td>
<td width=»100″ bgcolor=»green»>б-3</td>
</tr>
</table>

При просмотре в браузере:

а-1 а-2 а-3
б-1 б-2 б-3

Как вы видите, наша ячейка растянулась на две ячейки, тем самым вытеснив ячейку «а-3» за пределы нашей таблице. Для того чтобы ячейка «а-3» нам не мешала мы ее попросту удаляем:

<table>
<tr>
<td height=»50″ bgcolor=»red» colspan=»2″>а-1</td>
<td width=»100″ bgcolor=»green»>а-2</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green»>б-1</td>
<td width=»100″ bgcolor=»red»>б-2</td>
<td width=»100″ bgcolor=»green»>б-3</td>
</tr>
</table>

При просмотре в браузере:

а-1 а-2
б-1 б-2 б-3

Параметр «rowspan» работает по такому же принципу: прописываем атрибут «rowspan=»количество ячеек, которые хотим объединить»» для желаемой ячейки, удаляем лишние ячейки из таблицы, которые должна заменить наша удлиняемая ячейка (обязательно):

<table>
<tr>
<td height=»50″ bgcolor=»red» colspan=»2″>а-1</td>
<td width=»100″ bgcolor=»green» rowspan=»2″>а-2</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green»>б-1</td>
<td width=»100″ bgcolor=»red»>б-2</td>
</tr>
</table>

При просмотре в браузере:

а-1 а-2
б-1 б-2

Рассмотрим еще три атрибута для нашей таблице:

<table cellpadding=»10″> — задает размер отступа содержимого ячейки от края ячейки.

<table cellspacing=»10″> — задает толщину пространства между ячейками таблицы в пикселях.

<table border=»10″> — задает толщину рамки в пикселях.

<table cellpadding=»10″ cellspacing=»10″ border=»10″>
<tr>
<td height=»50″ bgcolor=»red» colspan=»2″>а-1</td>
<td width=»100″ bgcolor=»green» rowspan=»2″>а-2</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green»>б-1</td>
<td width=»100″ bgcolor=»red»>б-2</td>
</tr>
</table>

При просмотре в браузере:

а-1 а-2
б-1 б-2

Поэкспериментируйте с этими атрибутами для лучшего освоения материала.

На этом мы закончим наше знакомство с HTML. В принципе этих знаний достаточно для того чтобы создавать несложные сайты (сайты одностраничники) но если вы хотите изучить данный язык более детально, то можете скачать учебник html из раздела «Учебники»

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code