|
||||||||||||||
|
||||||||||||||
Как просто создавать сложные таблицы |
||||||||||||||
Сколько времени вы убиваете на
создание сложной таблицы в 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> Четвертая: первую ячейку игнорируем, вторая не делится, третья делится на две колонки, четвертая не делится. Пишем: <tr> Готово. Что же у нас получилось? <table border=1> Что равняется:
Вот и всё ;) Автор статьи: Андрей
Переводчик
|
||||||||||||||
|
||||||||||||||
Copyright © "Internet Zone", info@izcity.com | ||||||||||||||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |