РАЗДЕЛ I. Создание таблицы.
Шаг 1. Обозначение таблицы.
Первым делом пишем теги, обозначающие начало и конец таблицы:
<table>
</table>
Шаг 2. Строки.
Любую таблицу начинают писать со строк, поэтому подумайте и решите, сколько строк вам необходимо.
Тег начала и конца строчек таблицы выглядит вот так:
<tr></tr>
Теги строк нужно располагать внутри тегов, обозначающих начало и конец таблицы.
Например, необходимо 4 строки - код будет выглядеть вот так:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Шаг 3. Ячейки.
Тег, обозначающий ячейку таблицы выглядит вот так:
<td></td>
Код ячейки вписывается внутри кода строки.
Для примера напишем таблицу, в которой находятся по 3 ячейки в каждой строке:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Шаг 4. Заполнение таблиц текстом.
Все содержимое ячеек таблицы вписывается между тегов ячейки, например вот так:
<td>ТЕКСТ</td>
Внутрь тегов ячеек можно вставлять любые html-элементы: текст в html-форматировании, картинки, ссылки, видео, бегущие строки и т.п.
Для примера заполню нашу таблицу:
<table>
<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>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
Шаг 5. Объединение ячеек.
Для объединения ячеек существуют теги форматирования таблиц colspan и rowspan
colspan используется для объединения ячеек по горизонтали.
rowspan используется для объединения ячеек по вертикали.
Вписываются они в тег ячейки следующим образом:
<td colspan="2"> ТЕКСТ</td>
красное - это, как вы видите - тег, обозначающий ячейку.
синее - это атрибут colspan, который позволит растянуть ячейку.
зеленое - это количество объединяемых ячеек.
оно может принимать значение только целых чисел, начиная с 2. НЕЛЬЗЯ ОБЪЕДИНИТЬ 1,5 или 2,5 ячеек.
ВАЖНО! На самом деле мы не объединяем ячейки, а растягиваем одну, например, на две позиции, поэтому после применения тегов colspan или rowspan НЕОБХОДИМО УДАЛИТЬ ЛИШНИЕ ТЕГИ ЯЧЕЕК!
Пример 1: colspan.
Допустим необходимо объединить ячейки 1, 2 и 3 в одну строчку.
Делается это следующим образом:
<table>
<tr>
<td colspan="3">ячейка 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>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
синее - тег, позволяющий нам объединить ячейки.
Мы вписали число 3, потому что объединяем 3 ячейки в одну.
красное необходимо удалить.
Финальный код будет выглядеть вот так:
<table>
<tr>
<td colspan="3">ячейка 1-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>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
Пример 2: rowspan.
Как говорилось ранее, тег rowspan объединяет ячейки по вертикали, поэтому для удобства я расположила код нашей таблицы таким образом:
<table>
<tr> <td colspan="3">ячейка 1-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>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Объединим ячейку 4 с ячейкой 7, а ячейку 5 с ячейкой 8.
Для этого вписываем тег rowspan в тег <td> (обозначающий начало ячейки) у ячейки 4 и ячейки 5.
Мы в обоих случаях объединяем 2 ячейки (4-ую с 7-ой, а 5-ую с 8-ой), поэтому вписывать надо: rowspan="2"
(Если бы мы объединяли, например, 4-ую, 7-ую и 10-ую ячейки, то вписывать нужно было бы rowspan="3", т.к. в таком случае, получалось бы объединение 3-х ячеек)
Получаем вот такой результат:
<table>
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4</td> <td rowspan="2">ячейка 5</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 7</td> <td>ячейка 8</td> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Теперь нужно удалить ячейки 7 и 8, отмеченные темно-синим цветом, т.к. мы уже обозначили тегом rowspan то, что ячейки 5 и 4 состоят из 2-х ячеек, нужно освободить им для этого место.
Итоговый код:
<table>
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Выводы из примеров: ПРАВИЛА ОБЪЕДИНЕНИЯ ЯЧЕЕК ТАБЛИЦ В HTML.
1. Объединение ячейки - это растягивание оной на определенное количество позиций, поэтому ячейки, которые раньше занимали это место НЕОБХОДИМО УДАЛЯТЬ.
2. colspan - для горизонтального объединения, rowspan - для вертикального объединения.
Иными словами можно сказать: сolspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов. (с)
3. Для того, чтобы легче ориентироваться, вписывайте тег colspan в самую левую ячейку из тех, которые объядиняете, а тег rowspan - в самую верхнюю из тех, которые объединяете. Потом будет проще вычислить лишние ячейки первоначального кода, которые необходимо удалить.
