Отправляет 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
31
Автор
Vladimir N Abramov

Статистика

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

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


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

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

В начальных версиях спецификации языка HTML не существовало инструментов (тегов) для прямого создания таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE>), в котором таблица обрисовывалась символами АSСII, как в текстовом терминале. Иллюстрацией такого подхода к построению таблиц может служить некогда очень популярный менеджер файлов Norton Commander, панели которого были визуально оформлены именно таким способом. Но такая форма представления таблиц в HTML была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у веб-мастеров появился удобный инструмент для размещения текстовых и числовых данных, и мощное средство дизайна для точного размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML

Для описания таблиц используется пара тегов <ТАВLЕ>...</ТАВLЕ>. Эти теги автоматически переводит строку перед и после таблицы.

Создание строки таблицы — тег <ТR>...</ТR>

Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.

Определение ячеек таблицы - тег <ТD>...</ТD>

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек. Например:

Если в таблице два тега TR то в ней две строки.
Если в строке три тега TD то в ней три столбца.

Исходный код примера (немного упроценный) выглядит так:

<TABLE>
 <TR>
  <TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
 </TR><TR>
  <TD>Если в строке три тега TD,</TD>
  <TD>то в ней</TD>
  <TD>три столбца.</TD>
 </TR>
</TABLE>

Заголовки столбцов таблицы — тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD> и ставятся на их место в строке заголовка (обычно - первой строке таблицы). Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически отображается в броузере полужирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом АLIGN="center", то текст тоже будет выглядеть как заголовок.

<TABLE>
<TR>
<TH>Заголовок центрирован по умолчанию</TH>
<TH COLSPAN=2>Заголовок может объединять столбцы</TH>
</TR>
<TR>
<TH>Заголовок может быть расположен перед столбцами</TH>
  <TD>Текст или данные</TD>
  <TD>Текст или данные</TD>
</TR>
<TR>
<TH ROWSPAN=3>Заголовок может объединять строки</TH>
  <TD>Текст или данные</TD>
  <TD>Текст или данные</TD>
</TR>
<TR>
  <TD>Текст или данные</TD>
  <TD>Текст или данные</TD>
</TR>
<TR>
  <TD>Текст или данные</TD>
  <TD>Текст или данные</TD>
</TR>
</TABLE>

Использование заголовков таблицы — тег <САРТIОN>

Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст заголовка/подписи будет автоматически отформатирован броузером по ширине таблицы. Иногда тег <САРТION> используют для подписи под рисунками. Для этого используют таблицу из одной единственной ячейки и без границ ( c атрибутом border = 0 ).

<TABLE>
<CAPTION ALIGN=top>Заголовок над таблицей</CAPTION>
<TR>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
 <TD>Текст или данные</TD>
</TR>
</TABLE>

Атрибут NOWRAP

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку по шире равную двум или большему количеству ячеек, то можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее на любое количество столбцов.

<TABLE>
<TR>
 <TD>Если вы хотите сделать какую-нибудь ячейку шире, чем другие,</TD>
 <TD>можно воспользоваться атрибутом СОLSPAN=, </TD>
</TR>
<TR>
 <TD COLSPAN=2>тут - "двойная" ячейка по ширине</TD>
</TR>
</TABLE>

Атрибут ROWSPAN

Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то в HTML коде под "растягиваемой" ячейкой должно находиться соответствующее количество строк. Иначе таблица просто будет отображена не так, как вы хотели-бы. Естественно, внизу таблицы такую ячейку помещать нельзя.

Атрибут WIDТН

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы задать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, то ваша страница может не поместиться на экране. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы могут оказаться полезными:

<TABLE WIDTH=100%>
<TR>
<TD ALIGN=center>таблица на 100% ширины независимо от режима экрана пользователя</TD>
</TR>
</TABLE>

или

<TABLE WIDTH=50%>
<TR>
<TD ALIGN=center>Текст или данные шириной 50%</TD>
</TR>
</TABLE>

или

<TABLE WIDTH=200>
<TR>
<TD ALIGN=center>данные фиксированной ширины = 200 пикселей</TD>
</TR>
</TABLE>

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

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

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

В избранное