Название "Ещё о таблицах" может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.
Что же ещё?
При создании таблиц используются два атрибута:
colspan и rowspan.Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:
Пример 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | ||
| Cell 2 | Cell 3 | Cell 4 |
Установка
colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.
Пример 2:
<table border="1">
<tr>
<td colspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 | |
| Cell 3 | Cell 4 | Cell 5 |
А как насчёт rowspan?
Как вы уже могли догадаться,
rowspan специфицирует, сколько рядов охватывает данная ячейка:
Пример 3:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 |
| Cell 3 | |
| Cell 4 |
В этом примере
rowspan имеет значение "3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.
Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.
Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием
colspan и rowspan.
Друзья сайта
Комментариев нет:
Отправить комментарий