• Авторизация
Дневник LoRaLaRa Лента друзей - Дневник - Полная версия


HTML для начинающих: Объединение ячеек таблицы. Комбинированные таблицы 27-09-2024 19:16 к комментариям - к полной версии - понравилось!

Это цитата сообщения БЕЛОЯР_2 Оригинальное сообщение

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

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


кол-во строк Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)
кол-во столбцов Указывает кол-во столбцов, которое объединено в одной ячейке. (по умолчанию=1)

И так, давайте запомним: если нам нужно объединить вертикальные столбцы, берём атрибут COLSPAN,
а если нам нужно объединить в одной ячейке несколько рядов, то берём ROWSPAN
Поехали!

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

Верхний ряд ячеек надеюсь Вы не забыли, мы делали в первом нашем уроке
<tr> <br />
<td>ячейка 1</td> <br />
<td>ячейка 2</td> <br />
<td>ячейка 3</td> <br />
</tr>

Рассмотрим теперь нижнюю строчку. Я уже говорил,что атрибут COLSPAN занимает столько же места, сколько и верхние ячейки.(в нашем примере)
<tr> <br />
<td colspan="3"> 4 ячейка, занимающая три столбца </td> <br />
</tr>

Обратите внимания как просто, у нас в верхнем ряду 3 ячейки, значит и COLSPAN=3.А теперь части таблицы совместим.
Я всегда в уроках добавляю border=5, чтобы Вам было лучше видно.
<table border="5"><br />
<tr> <br />
<td>ячейка 1</td> <br />
<td>ячейка 2</td> <br />
<td>ячейка 3</td> <br />
</tr><br />
<tr> <br />
<td colspan="3"> 4 ячейка, занимающая три столбца </td> <br />
</tr><br />
</table>

И вот итог:

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

Ещё пример (посложнее-проверка на понимания урока:
Я ещё и добавил тег style="text-align:center это мы с Вами проходили во втором уроке
<table border="5" style="text-align:center"><br />
<tr><br />
<td colspan="3"> ячейка 1</td><br />
</tr><br />
<tr><br />
<td> ячейка 2</td><br />
<td> ячейка 3</td><br />
<td> ячейка 4</td><br />
</tr><br />
<tr><br />
<td colspan="3"> ячейка 5</td><br />
</tr><br />
</table>

И вот что у нас получилось:

ячейк1
ячейка 2 ячейка 3 ячейка 4
ячейка 5


А сейчас рассмотрим атрибут ROWSPAN, я уже говорил,что он объединяет в одной ячейке несколько рядов.
<tr> <br />
<td rowspan="3"> ячейка 1, занимающая три ячейки</td> <br />
</tr>

а это наши три ячейки (обратите внимания: 3 ряда)
<tr> <br />
<td>ячейка 1</td> <br />
</tr><br />
<tr> <br />
<td>ячейка 2</td> <br />
</tr><br />
<tr> <br />
<td>ячейка 3</td> <br />
</tr>

теперь части таблицы совместим.
<table border="5" style="text-align:center"><br />
<tr> <br />
<td rowspan="3"> ячейка 1, занимающая три ячейки</td> <br />
<td>ячейка 2</td> <br />
</tr><br />
<tr> <br />
<td>ячейка 3</td> <br />
</tr><br />
<tr> <br />
<td>ячейка 4</td> <br />
</tr><br />
</table>

И вот что у нас получилось:

ячейка 1, занимающая три ячейки ячейка 2
ячейка 3
ячейка 4

Ещё пример (посложнее-проверка на понимания урока)
<table border="5"><br />
<tr><br />
<td> ячейка1</td><br />
<td> ячейка2</td><br />
<td> ячейка3</td><br />
</tr><br />
<tr><br />
<td> ячейка4</td><br />
<td> ячейка5</td><br />
<td> ячейка6</td><br />
</tr><br />
<tr><br />
<td> ячейка7</td><br />
<td> ячейка8</td><br />
<td> ячейка9</td><br />
</tr><br />
</table>

вот так это выглядит:
ячейка1 ячейка2 ячейка3
ячейка4 ячейка5 ячейка6tr>
ячейка7 ячейка8 ячейка9

Теперь объединим в таблице размером 3x3 второй столбец.
Для этого в первой строке в ячейке 2 пропишем rowspan=”3”, а во второй и третьей строках удалим ячейки 5 и 8.
<table border="5" style="text-align:center"><br />
<tr><br />
<td> ячейка1</td><br />
<td rowspan="3"> ячейка 2</td><br />
<td> ячейка3</td><br />
</tr><br />
<tr><br />
<td> ячейка4</td><br />
<td> ячейка6</td><br />
</tr><br />
<tr><br />
<td> ячейка7</td><br />
<td> ячейка9</td><br />
</tr><br />
</table>

И вот что получаем:

ячейка1 ячейка 2 ячейка3
ячейка4 ячейка6
ячейка7 ячейка9


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник HTML для начинающих: Объединение ячеек таблицы. Комбинированные таблицы | LoRaLaRa - Дневник LoRaLaRa | Лента друзей LoRaLaRa / Полная версия Добавить в друзья Страницы: раньше»