snd.com.ua

Как просто создавать сложные таблицы

Сколько времени вы убиваете на создание сложной таблицы в html? Порой структура бывает такой сложной, что приходится прибегать к помощи wysiwyg редакторов. Но что делать если под рукой один только notepad?

Я хотел бы поделится с вами своей методикой. Думаю, она многим пригодится.

Для начала изобразим таблицу на бумаге. Берем карандашик и вперед. Получится что-то вроде этого:



А теперь берем и другим цветом (или пунктиром) продливаем все линии этой таблицы до её краёв. Вот так:



Теперь можно начинать писать код. Для начала откроем таблицу:

<table border=1>

Каждая горизонтальная черта разделяет строки таблицы. Ячейка, обведенная черным цветом это одна пара <td></td>. Колличество столбцов в "черной" ячейке записываем в colspan, а колличество строк — в rowspan. Если верхний левый угол ячейки не находится в нашей строке — мы эту ячейку игнорируем.

Давайте теперь попроуем на примере. У нас всего тут четыре строки. Открываем первую:

<tr>

Первая ячейка розовыми полосами не делится ни на столбцы, ни на строки. Значит так и запишем:

<td>Ячейка 1</td>

Вторая же ячейка делится аж на 4 столбца и 2 строки. Помним, что столбцы идут в colspan, а строки — в rowspan. Пишем:

<td colspan=4 rowspan=2>Ячейка 2</td>
</tr>

Строку я закрыл, т.к. в ней ячейки закончились. Переходим к следующей строке. Первая её ячейка делится на три строки. Вторую мы уже записали, так что её мы игнорируем (её верхний левый угол находится в предидущей строке). Пишем код:

<tr>
<td rowspan=3>Ячейка 3</td>
</tr>

Третяя строка: первую ячейку игнорируем, вторая и третяя делятся на две колонки. Пишем.

<tr>
<td colspan=2>Ячейка 4</td>
<td colspan=2>Ячейка 5</td>
</tr>

Четвертая: первую ячейку игнорируем, вторая не делится, третья делится на две колонки, четвертая не делится. Пишем:

<tr>
<td>Ячейка 6</td>
<td colspan=2>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>

Готово. Что же у нас получилось?

<table border=1>
 <tr>
  <td>Ячейка 1</td>
  <td colspan=4 rowspan=2>Ячейка 2</td>
 </tr>
 <tr>
  <td rowspan=3>Ячейка 3</td>
 </tr>
 <tr>
  <td colspan=2>Ячейка 4</td>
  <td colspan=2>Ячейка 5</td>
 </tr>
 <tr>
  <td>Ячейка 6</td>
  <td colspan=2>Ячейка 7</td>
  <td>Ячейка 8</td>
 </tr>
</table>

Что равняется:

Вот и всё ;)