IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


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

Сколько времени вы убиваете на создание сложной таблицы в 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>


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

Ячейка 1 Ячейка 2
Ячейка 3
Ячейка 4 Ячейка 5
Ячейка 6 Ячейка 7 Ячейка 8


Вот и всё ;)

Автор статьи: Андрей Переводчик
Посетите сайт Phone Server

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.