GVMproject.info-бесплатные программы, скрипты, шаблоны
Руководство по html

Таблицы

Долго ли, коротко ли, но мы добрались до таблиц. Я полагаю, что мой спутник работал в Word и сталкивался с таблицами уже. Если так, то вы должны уже знать, что таблицы нужны для форматирования текста, а порой и не заменимы.

Таблица задается тэгом:

< table > < /table >

Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.

< tr > < /tr > - строчка таблицы
< td > < /td > - столбец (ячейка) таблицы



Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:


< table >
< tr > < /tr >
< tr > < /tr >
< /table >


Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

< table >
< tr >
< td > < /td >
< td > < /td >
< td > < /td >
< /tr >
< tr >
< td > < /td >
< td > < /td >
< td > < /td >
< /tr >
< /table >


Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.

Итак, теперь нам надо заполнить получившийся каркас:


< table >
< tr >
< td > 1x1 < /td >
< td > 1x2 < /td >
< td > 1x3 < /td >
< /tr >
< tr >
< td > 2x1 < /td >
< td > 2x2 < /td >
< td > 2x3 < /td >
< /tr >
< /table >


Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:

1x1 1x2 1x3
2x1 2x2 2x3

Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.


< table >
< tr >
< td bgcolor="#FFCC33" > 1x1 < /td >
< td bgcolor="#336699" > 1x2 < /td >
< td bgcolor="#FFCC33" > 1x3 < /td >
< /tr >
< tr >
< td bgcolor="#336699" > 2x1 < /td >
< td bgcolor="#FFCC33" > 2x2 < /td >
< td bgcolor="#336699" > 2x3 < /td >
< /tr >
< /table >


Вот, что у нас получилось:



Итак, как помнится мы решили с вами создать вот такую таблицу:


А получилось у нас еще только вот такая таблица:

В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

< table >
< tr >
< td height="35" width="50" bgcolor="#FFCC33" > 1x1 < /td >
< td width="50" bgcolor="#336699" > 1x2 < /td >
< td width="50" bgcolor="#FFCC33" > 1x3 < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" > 2x1 < /td >
< td width="50" bgcolor="#FFCC33" > 2x2 < /td >
< td width="50" bgcolor="#336699" > 2x3 < /td >
< /tr >
< /table >

Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).

Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).

Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)



Теперь нам осталось лишь выровнять содержимое внутри таблицы:

< table >
< tr >
< td height="35" width="50" bgcolor="#FFCC33" > < center > 1x1 < /center > < /td >
< td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
< td width="50" bgcolor="#FFCC33" > < center > 1x3 < /center > < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
< td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
< td width="50" bgcolor="#336699" > < center > 2x3 < /center > < /td >
< /tr >
< /table >

И... готово!:)



В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же.

Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.

В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).

Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):



Вот вам и наглядный пример, а теперь как это пишется:

< table >
< tr >
< td height="35" width="50" bgcolor="#FFCC33" valign="top" > < center > 1x1 < /center > < /td >
< td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
< td width="50" bgcolor="#FFCC33" valign="bottom" > < center > 1x3 < /center > < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" valign="bottom" > < center > 2x1 < /center > < /td >
< td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
< td width="50" bgcolor="#336699" valign="top" > < center > 2x3 < /center > < /td >
< /tr >
< /table >

Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).

Теперь мы поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь чтобы было все понятно обратимся к примерам.



В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:

< table >
< tr >
< td height="35" bgcolor="#FFCC33" colspan="2" > < center > 1x1 < /center > < /td >
< td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
< td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
< td width="50" bgcolor="#336699" > < center > 2x3 < /center > < /td >
< /tr >
< /table >

Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длинее других в два раза.

И второе на что прошу вас обратить внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длинне (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда:



Теперь, когда мы разбрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:



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

Итак, мы остановились на такой таблице:



Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы:



Такая красота достигается с помощью атрибута cellspacing, равного нулю:

< table cellspacing=0 >
< tr >
< td height="35" bgcolor="#FFCC33" colspan="2" > < center > 1x1 < /center > < /td >
< td width="50" bgcolor="#336699" rowspan="2" > < center > 1x2 < /center > < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
< td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
< /tr >
< /table >

Можно наооборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:



Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотриться не стандартно.

Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign:



Теперь зададим атрибут cellpadding=5:



Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing.

Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):

< table cellpadding=5 >
< tr >
< td height="35" bgcolor="#FFCC33" colspan="2" valign="top" > < center > 1x1 < /center > < /td >
< td width="50" bgcolor="#336699" rowspan="2" valign="top" > < center > 1x2 < /center > < /td >
< /tr >
< tr >
< td height="35" width="50" bgcolor="#336699" valign="bottom" > < center > 2x1 < /center > < /td >
< td width="50" bgcolor="#FFCC33" valign="bottom" > < center > 2x2 < /center > < /td >
< /tr >
< /table >
-----------------------------------


Страниц : # « 9 10 11 12 13 14 15 16 17 » #
TEXT +   TEXT -   Печать Опубликовано : 20.12.09 | Просмотров : 49954 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Дорвеи и поисковые системы.
- Клоакинг
 
Реклама

##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2