Отправляет email-рассылки с помощью сервиса Sendsay

Технологии эффективного Интернета

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как сделать популярный сайт." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Vladimir N Abramov

Статистика

3.524 подписчиков
0 за неделю
←   Все выпуски   →

Основы web-технологий


Рассылка: Основы web-технологий :: N 11
Раздел: Введение в HTML-разметку
Тема: Таблицы в HTML. Часть N 2.
Раздел посвящен изучению языка гипертекстовой разметки HTML. Рассматриваются основные конструкции языка, приемы разметки и связь с различными программами работающими в Сети.
Основные понятия: таблица, графика, координаты, взаимное расположение, элементы разметки.
Информация о выпуске: рассмотрим подробно принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

Применение пустых ячеек

Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>, но чаще для этого используют картинку в виде прозрачной точки формата .GIF размером 1х1 пикселя. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство применяется при размещении на странице текста и особенно графики.

Атрибут СЕLLРАDDING

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

...
<TABLE BORDER CELLPADDING=20>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
</TABLE>
...

Атрибуты АLIGN и VALIGN

Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

АLIGN=сеnter располагает содержимое ячейки по центру.

АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

<HTML>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
 <TD ALIGN=left>Текст или данные</TD>
 <TD ALIGN=center>Текст или данные</TD>
 <TD ALIGN=right>Текст или данные</TD>
</TR>
<TR>
 <TD ALIGN=right>Текст или данные</TD>
 <TD ALIGN=center>Текст или данные</TD>
 <TD ALIGN=left>Текст или данные</TD>
</TR>
<TR>
 <TD ALIGN=right>Текст или данные</TD>
 <TD ALIGN=right>Текст или данные</TD>
 <TD ALIGN=right>Текст или данные</TD>
</TR>
<TR>
 <TD ALIGN=center>Текст или данные</TD>
 <TD ALIGN=center>Текст или данные</TD>
 <TD ALIGN=center>Текст или данные</TD>
</TR>
<TR>
 <TD ALIGN=left>Текст или данные</TD>
 <TD ALIGN=left>Текст или данные</TD>
 <TD ALIGN=left>Текст или данные</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIMG=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

<HTML>
<BODY>
<CENTER>
<TABLE BORDER WIDTH=90%>
<TR>
 <TD WIDTH=100>Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали.</TD>
 <TD VALIGN=top>верх,</TD>
 <TD VALIGN=middle>середина,</TD>
 <TD VALIGN=bottom>низ.</TD>
</TR>
<TR VALIGN=top>
 <TD> VALIGN=top Выравнивает содержимое ячейки по ее верхней границе.</TD>
 <TD>верх,</TD>
 <TD>верх,</TD>
 <TD>верх.</TD>
</TR>
<TR VALIGN=middle>
 <TD>VALIGN=middle Центрирует содержимое ячейки по вертикали.</TD>
 <TD>середина,</TD>
 <TD>середина,</TD>
 <TD>середина.</TD>
</TR>
<TR VALIGN=bottom>
 <TD>VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе.</TD>
 <TD>низ,</TD>
 <TD>низ,</TD>
 <TD>низ.</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Атрибут BORDER

В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=О>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Атрибут CELLSPACING

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPASING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

<HTML>
<BODY>
<CENTER>
<TABLE BORDER CELLSPACING=20>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE CELLSPACING=20>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE CELLSPACING=0>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
<TR>
 <TD>Текст или данные</TD>
 <TD></TD>
 <TD>Текст или данные</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Атрибут BGCOLOR

Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

<HTML>
<BODY>
<CENTER>
<TABLE BORDER BGCOLOR=yellow>
<TR BGCOLOR=blue>
 <TD>Текст или данные</TD>
 <TD BGCOLOR=red>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
<TR BGCOLOR=green>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD BGCOLOR=lime>Текст или данные</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Атрибут BACKGROUND

Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута мы рассмотрим позже.

Использование таблиц в дизайне страницы

Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Тег <ТАВLЕ> предоставляет мощные средства форматирования в HTML. Дизайнеры Web-страниц благодаря ему обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы помогают легко отойти от иерархического размещения текста на Web-страницах.

Если браузер поддерживает таблицы, он обычно правильно отображает различные интересные эффекты, полученные с их помощью, например:

...
<TABLE CELLPADDING="10" CELLSPACING="0" BORDER="16">
<TR>
<TD ALIGN="center">
<H2>Хостинговая компания AHO-hosting</H2>
<H3>Добро пожаловать!</H3>
<TABLE BORDER WIDTH="100%">
<TR>
<TD ALIGN="center"><I>Доступный, качественный хостинг для всех.</I></TD>
</TR>
</TABLE>
...

Вот, как это выглядит:

Хостинговая компания AHO-hosting

Добро пожаловать!

Доступный, качественный хостинг для всех.

Создание разноцветных таблиц

Современные браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу. В основном для этого используются таблицы стилей, которые мы рассмотрим позже.

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

<BODY ВАСКGROUND="image.gif" ВGCOLOR="#FF0000">

Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

Спасибо за внимание, встретимся через неделю.

cайт рассылки: web.aho.ru

Мои закладки: лучший хостинг - трафик без ограничений, от $0.8 в месяц, все включено, домен бесплатно, кредит, скидки, ответственная и доброжелательная тех-поддержка. Замечательная компания - присоединяйся!

В избранное