Loading

HTML для начинающих:Объединение ячеек таблицы.Комбинированные таблицы

Уроки HTML для начинающих.
Таблица HTML (урокN3)


И так в этом уроке (N3) мы с Вами научимся делать комбинированные таблицы.А точнее разберём ещё 2 атрибута таблицы ROSPAN и COLSPAN

кол-во строк <rowspan="#"> Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)
кол-во столбцов <colspan="#"> Указывает кол-во столбцов, которое объединено в одной ячейке. (по умолчанию=1)
И так,давайте запомним: если нам нужно объединить вертикальные столбцы, берем атрибут COLSPAN,
а если нам нужно объединить в одной ячейке несколько рядов,то берем ROWSPAN
Поехали!))

ячейка 1 ячейка 2 ячейка 3
ячейка 4, занимающая три столбца
Верхний ряд ячеек надеюсь Вы не забыли,мы делали в первом нашем уроке здесь.

<tr> 
<td>ячейка 1</td> 
<td>ячейка 2</td> 
<td>ячейка 3</td> 
</tr> 

Рассмотрим теперь нижнюю строчку.Я уже говорила,что атрибут COLSPAN занимает столько же места, сколько и верхние ячейки.(в нашем примере)

<tr> 
<td colspan=3> 4 ячейка, занимающая три столбца </td> 
</tr>

Обратите внимания как просто,у нас в верхнем ряду 3 ячейки,значит и COLSPAN=3.А теперь части таблицы совместим.
Я всегда в уроках добавляю border=5,чтобы Вам было лучше видно)).

<table border=5>
<tr> 
<td>ячейка 1</td> 
<td>ячейка 2</td> 
<td>ячейка 3</td> 
</tr>
<tr> 
<td colspan=3> 4 ячейка, занимающая три столбца </td> 
</tr>
</table>

И вот итог:
ячейка 1 ячейка 2 ячейка 3
4 ячейка, занимающая три столбца

Ещё пример(посложнее-проверка на понимания урока)):
Я ещё и добавила тег style="text-align:center это мы с Вами проходили во втором уроке здесь

<table border="5" style="text-align:center">
<tr>
<td colspan="3"> ячейка 1</td>
</tr>
<tr>
<td> ячейка 2</td>
<td> ячейка 3</td>
<td> ячейка 4</td>
</tr>
<tr>
<td colspan="3"> ячейка 5</td>
</tr>
</table>

И вот что у нас получилось:
ячейка 1
ячейка 2 ячейка 3 ячейка 4
ячейка 5

А сейчас расмотрим атрибут ROWSPAN,я уже говорила,что он обьединяет в одной ячейке несколько рядов.

<tr> 
<td rowspan=3> ячейка 1, занимающая три ячейки</td> 
</tr> 


а это наши три ячейки (обратите внимания:3 ряда)

<tr> 
<td>ячейка 1</td> 
</tr>
<tr> 
<td>ячейка 2</td> 
</tr>
<tr> 
<td>ячейка 3</td> 
</tr> 

теперь части таблицы совместим.

<table border="5" style="text-align:center">
<tr> 
<td rowspan=3> ячейка 1, занимающая три ячейки</td> 
<td>ячейка 2</td> 
</tr>
<tr> 
<td>ячейка 3</td> 
</tr>
<tr> 
<td>ячейка 4</td> 
</tr>
</table>

И вот что у нас получилось:
ячейка 1, занимающая три ячейки ячейка 2
ячейка 3
ячейка 4
Ещё пример(посложнее-проверка на понимания урока)):

<table border="5">
<tr>
<td> ячейка1</td>
<td> ячейка2</td>
<td> ячейка3</td>
</tr>
<tr>
<td> ячейка4</td>
<td> ячейка5</td>
<td> ячейка6</td>
</tr>
<tr>
<td> ячейка7</td>
<td> ячейка8</td>
<td> ячейка9</td>
</tr>
</table>

вот так это выглядет:
ячейка1 ячейка2 ячейка3
ячейка4 ячейка5 ячейка6
ячейка7 ячейка8 ячейка9
Теперь объединим в таблице размером 3x3 второй столбец.
Для этого в первой строке в ячейке 2 пропишем rowspan=”3”, а во второй и третьей строках удалим ячейки 5 и 8.

<table border="5" style="text-align:center">
<tr>
<td> ячейка1</td>
<td rowspan="3"> ячейка 2</td>
<td> ячейка3</td>
</tr>
<tr>
<td> ячейка4</td>
<td> ячейка6</td>
</tr>
<tr>
<td> ячейка7</td>
<td> ячейка9</td>
</tr>
</table>

И вот что получаем:
ячейка1 ячейка 2 ячейка3
ячейка4 ячейка6
ячейка7 ячейка9

На этом урок заканчивается))Что не понятно пишите,будем разбераться вместе.

Атрибуты таблицы. ЗДЕСЬ.
Все цвета интернета ЗДЕСЬ
Подобрать HTML код в ручную ЗДЕСЬ




Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

Комментариев нет:

Отправить комментарий

Подпишитесь на инфо-БУМ по е-мейл здесь