Практический веб-дизайн - Введение в таблицы, часть 2

Некоторые отрезвляющие факты:

две трети установленных в мире компьютеров имеют возраст от трех лет
Windows 98 — операционная система, наиболее используемая на ПК в мире.

Это означает, что огромное количество людей просматривает наши веб-страницы с помощью устаревших браузеров, таких как Internet Explorer 4.x или 5.x, или более ранних версий Netscape Navigator. И вы, как и я, знаете, что большинство пользователей не удосуживаются обновлять свои системы или браузеры, как на работе, так и дома. Они придерживаются того, что вышло из коробки. Было бы оптимальным, если бы все использовали современные браузеры, полностью совместимые с CSS и CSS2, но это не так. Фактически, большая часть мира серфинга не использует современные браузеры; поэтому большинство пользователей не могут правильно просматривать ваши прекрасно сконструированные, не содержащие таблиц страницы на основе CSS.

Таким образом, если вы не кодируете веб-страницы для аудитории, которая полностью состоит из передовых пользователей (то есть типичных пользователей SitePoint или Slashdot ), вам придется иметь дело с таблицами. Это просто факт жизни. И если вы начинающий веб-дизайнер, вам нужно узнать о таблицах, даже если они быстро устаревают. Думайте об этом как о том, как научиться водить автомобиль с механической коробкой передач… конечно, вы, вероятно, будете проводить большую часть своего времени за рулем автомобилей с автоматическими коробками передач, но стоит знать, как водить палку. Вы поймете, как работает автомобиль. И будут времена, когда водить палку — это не просто вариант, это необходимость.

В первой части этого учебника, HTML Tables: A Primer, часть I , мы обсудили основы построения таблиц, а также несколько (относительно) расширенных опций. В этой части представлен обзор параметров, предоставляемых для таблиц в HTML 4, а также некоторые другие элементы. Как и в первом столбце, эта статья не будет охватывать ничего нового или отличного для ветеранских веб-дизайнеров. Это строго для менее опытного среди нас.

Лучший способ научиться использовать эти теги — поиграть с ними. Вырежьте и вставьте приведенные ниже примеры кода и поместите их в редактор HTML. Создайте таблицу примеров и вставьте эти команды по одной, чтобы увидеть, что происходит. Используйте их в группах, чтобы увидеть, насколько хорошо они взаимодействуют друг с другом. Веселитесь с ними!

HTML 4 и 4.01

HTML 4.0, впервые выпущенный как рекомендация W3C в декабре 1997 года, дал нам огромное количество «новых» опций для построения таблиц. «Новый» — это относительный термин: многие из этих опций были введены либо Netscape, либо Microsoft и изначально работали только в этих браузерах (некоторые опции все еще зависят от браузера). В декабре 1999 года HTML 4.01 стал стандартом W3C, и все еще остается сегодня, когда мы медленно развиваемся в направлении XML / XHTML. Ниже приведены некоторые параметры для таблиц, которые стали стандартными в HTML 4. Опять же, обратите внимание, что не все браузеры поддерживают строгий HTML 4, и поэтому не все эти команды будут работать во всех браузерах.

Если вы собираетесь использовать много тегов 4.01, вам нужно работать в рамках «строгого» HTML. Это означает использование следующего DOCTYPE:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN  "http://www.w3.org/TR/html4/strict.dtd">

Если вы решите сделать это, будьте готовы к множеству несовместимостей с устаревшими устаревшими командами HTML. Строгий означает только это — строгий. Старые теги не будут работать в строгом формате HTML. Это компромисс: хотите ли вы потерять использование устаревших устаревших тегов (и рискуете потерять тех членов вашей аудитории, которые используют старые браузеры, которые не будут правильно отображать строгий HTML), и использовать новые теги 4.01 (не упомянуть полное использование CSS)? Это то, на что нужно обратить внимание, и на что можно потратить некоторое время, работая. IE 5x и IE 6 предположительно способны обрабатывать ограничения строгого HTML, как и Netscape Navigator 6, Opera 7.02 и Mozilla 1.2. Не стоит делать ставку на то, что более ранние браузеры могли работать со строгим HTML, и не делайте ставки, что даже эти браузеры будут полностью поддерживать строгий HTML 4.01.

Также имейте в виду, что было много проблем с некоторыми версиями Mozilla, корректно обрабатывающими строгий HTML, наряду с браузерами на основе Mozilla, такими как Netscape 6, Netscape 7, Camino, Galeon, недавно выпущенные Phoenix / Firebird и Beonex. , Некоторые браузеры, такие как Mozilla, Mac Safari, Opera 7 и IE 6, имеют два основных режима макета: «Причуды» и «Стандарты». Mozilla и Safari также имеют режим «Почти стандарты», который влияет на макет таблицы. Все это факторы, которые необходимо изучить и проработать, прежде чем принимать какие-либо долгосрочные решения о том, какой DOCTYPE вы будете использовать.

Общее практическое правило: «переходный» DOCTYPE сегодня может работать лучше в общем смысле для кодирования, но мир HTML быстро движется к строгим стандартам и отходит от поддержки «переходных» документов HTML. Хорошей идеей будет привыкнуть работать в атмосфере строгого соответствия. Общий обзор различных видов DOCTYPES см. В моей предыдущей статье « Основы веб-дизайна» .

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

«В определенной степени это цикл обратной связи. Если мы хотим, чтобы люди кодировали HTML 4 — страницы, совместимые с ними, необходимо поддерживать полную спецификацию HTML 4, и открыто». — Джо Кларк

ТАБЛИЦА ДАННЫХ

Что значит? Табличные данные, или <TD> , существуют с самого начала таблиц! Да, правда, но HTML 4 добавляет некоторые новые и захватывающие атрибуты… ну, ладно, не так уж и ново, и «интересный» может быть более подходящим термином, чем «захватывающий». Однако у вас есть несколько новых инструментов в вашем наборе инструментов для старого тэга боевого коня. Давайте посмотрим на несколько:

ABBR: обеспечивает «всплывающую подсказку» при наведении курсора мыши на конкретную ячейку
ОСЬ: дает невизуальным браузерам метку для описания данных в ячейке
CHAR / CHAROFF: при работе с атрибутом ALIGN этот параметр позволяет установить определенный символ текста в качестве точки выравнивания, обычно десятичной; оттуда вы можете сместить текстовый символ в процентах от ширины ячейки (для этого вам понадобятся некоторые эксперименты, чтобы стать полезным)
HEADERS: наиболее полезно для невизуальных браузеров, этот атрибут работает с командой header <TH> для указания заголовка каждой ячейки, например:
<TABLE> <TR> <TH ID="1">SIZES <TH ID="2">WIDTHS </TR> <TD HEADERS="1">99 <TD HEADERS="2">100
Когда мышь проходит, невизуальный браузер выдаст информацию заголовка. См. Ниже для получения дополнительной информации <TH> .
ОБЛАСТЬ ПРИМЕНЕНИЯ: выделяет разделы таблицы, которые будут действовать как TD, обладающий атрибутами. SCOPE имеет четыре собственных значения, которые влияют на его функцию:
- COL устанавливает остальную часть столбца
- COLGROUP устанавливает остальную часть группы столбцов
- ROW устанавливает остаток строки
- ROWGROUP устанавливает остальную часть группы строк

Предупреждение: невизуальные браузеры, такие как Lynx, в лучшем случае поддерживают пятнистые таблицы. Не удивляйтесь, если ваши пользователи Lynx упустят какой-то контент вашей таблицы.

СТОЛ СТОЛ

Как и <TD> выше, тег <TR> имеет некоторые новые атрибуты. Большинство из них идентичны тем, которые связаны с <TD> . Это: ALIGN, CHAR, CHAROFF, BGCOLOR и VALIGN. Первые три объяснены выше. BGCOLOR — это знакомый атрибут, который просто устанавливает цвет фона для строки. VALIGN устанавливает вертикальное выравнивание содержимого строки: сверху, по центру или снизу. Конечно, есть и другие атрибуты, но я позволю вам выяснить их самостоятельно.

СТОЛОВОЙ ГОЛОВКА

Заголовок таблицы, активируемый командой <TH> , принимает те же шесть атрибутов, которые описаны в разделе <TD> выше:

ABBR,
ОСЬ,
CHAR,
CHAROFF,
Заголовки и
СФЕРА,

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

ЦВЕТ ГРАНИЦЫ

Уже обсуждаемый в части 1 этой статьи, BORDERCOLOR — это атрибут, данный нам замечательными людьми из Microsoft, который первоначально использовался только в Internet Explorer. Теперь он работает в IE 3 и выше, а также в Navigator 4 и выше. Все довольно просто:

 <TABLE BORDER="1" BORDERCOLOR="#ff0000">

Это дает нам хорошую красную границу. К сожалению, цвета границ не всегда надежны в том, как они отображаются в разных браузерах. В этом примере, извлеченном из WDVL , показан пример кода, который дает коричневую рамку в Internet Explorer и светло-зеленую рамку в Netscape:

 <TABLE BORDER="20" WIDTH="200" BGCOLOR="#ccff66" BORDERCOLOR="#33cc66" BORDERCOLORLIGHT="#996666" BORDERCOLORDARK="#663300">

В этом примере две команды, BORDERCOLORLIGHT и BORDERCOLORDARK, работают с тегом BGCOLOR: BORDERCOLORLIGHT — это цвет подсветки границы строки, а BORDERCOLORDARK — цвет тени границы строки. Если это не имеет смысла, попробуйте и посмотрите, какая часть границы какая.

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

РАМКА

Это не очень клеветническая команда FRAME, которая делит отображение страниц на отдельные разделы. Скорее, он работает для отображения только той части границы, которую вы хотите видеть. Он работает в команде <TABLE> и имеет следующие значения:

ВЫШЕ: отображает только верхний край
НИЖЕ: отображает только нижний край
ГРАНИЦА: по умолчанию отображаются все четыре ребра (поэтому их использовать не нужно)
BOX: вариант атрибута BORDER, он также отображает все четыре ребра
HSIDES: отображает только верхний и нижний края
LHS: отображает только левый край
RHS: отображает только правую сторону
VOID: не отображает края вообще
VSIDES: отображает левый и правый края

Попытайся. Вот пример кода:

 <TABLE BORDER="1" FRAME="below">

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

ПРАВИЛА

Опять же, не широко поддерживаемый атрибут таблицы. Этот работает как атрибут FRAME, приведенный выше, но работает на внутренних границах (попробуйте — вы поймете, что я имею в виду). Имеет следующие значения:

ALL: отображает все границы
COLS: отображает границы между ячейками
ГРУППЫ: отображает границы между всеми группами ячеек
НЕТ: не отображает границ
ROWS: отображает границы между строками

Код может выглядеть примерно так:

 <TABLE BORDER="1" RULES="all">

РЕЗЮМЕ

Некоторые люди все еще используют текстовые браузеры, такие как Lynx, и некоторые люди все еще используют браузеры, которые слишком стары для поддержки таблиц вообще. Эти парни не смогут видеть вашу таблицу, хотя они могут видеть содержимое. Вы можете использовать тег SUMMARY, чтобы дать текстовое описание вашей таблицы. Думайте об этом как о эквиваленте таблицы тегу ALT для графики:

 <TABLE BORDER="1" SUMMARY="This table is full of  information about the different games we can play with  HTML tables.">

ЗАГОЛОВОК

Этот тег прекрасно работает с тегом SUMMARY, чтобы дать читателям представление о том, что находится в таблице; заголовок можно рассматривать как заголовок таблицы. Только одна подпись к таблице, пожалуйста. Попробуйте это так:

 <TABLE BORDER="1" SUMMARY="This table is full of  information about the different games we can play with  HTML tables.">  <CAPTION="Games Tables Play">

Обработчики событий

Это весело. Если вы не знаете, термин «обработчики событий» буквально обрабатывает событие. Событие — это действие, которое, или, точнее, ваш код заставляет произойти. Обработчик решает, какая команда клавиатуры или мыши активирует действие.

В этом случае вы можете добавить в вашу таблицу всплывающее окно, которое активируется любой из следующих команд: onBlur , onDblClick , onDragStart , onDragStart , onFocus , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp или на onScroll .

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

Вот пример кода (вырежьте его и вставьте в редактор HTML, отобразите в браузере и нажмите на таблицу, чтобы увидеть, что происходит):

 <TABLE BORDER="1" onClick="alert('This is what happens  when you try this command out!')">

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

COLGROUP

Этот тег позволяет установить параметры для целых столбцов данных в таблице. Это работает лучше всего, когда вы устанавливаете ширину, высоту и эффекты таблицы стилей. Как и многие из этих тегов, он имеет свой собственный набор атрибутов. Перед этим тегом вы должны были установить атрибуты для каждого <TD> до конца столбца. Опять же, не все старые браузеры поддерживают этот тег. Он имеет 24 (!) Атрибута, многие из которых относятся к связанным JavaScripts, но сейчас мы ограничимся пятью ниже:

ALIGN: содержимое выравнивается по левому, правому краю, по центру
CHAR / CHAROFF: как указано выше; работая с атрибутом ALIGN, он позволяет вам установить определенный текстовый символ как точку выравнивания, обычно десятичную; оттуда вы можете сместить текстовый символ в процентах в процентах от ширины ячейки (для этого вам понадобятся эксперименты)
SPAN: позволяет тегу COLGROUP «охватывать» более одного столбца
ШИРИНА: устанавливает ширину столбца, в пикселях или процентах
VALIGN: устанавливает содержимое ячейки по вертикали, вверху, в центре или внизу

Вот один пример:

В таблице из 5 столбцов, чтобы дать каждому столбцу ширину 35 пикселей, напишите:

 <COLGROUP SPAN="5" WIDTH="35">  </COLGROUP>

Команда COLGROUP без атрибута SPAN использует значение по умолчанию SPAN, равное 1. Другая полезная функция команды COLGROUP заключается в том, что она сообщает браузеру, сколько столбцов в вашей таблице. Если вы указали общую ширину таблицы, браузер может отображать таблицу постепенно. Таким образом, каждый столбец будет отображаться при загрузке, а не с задержкой до полной загрузки таблицы.

COL

Это выравнивает содержимое в одном или нескольких столбцах таблицы. Как и многие другие, он возник как расширение Microsoft и был позже добавлен в HTML 4. В отличие от команды COLGROUP, она не группирует столбцы структурно, но может группировать атрибуты для нескольких столбцов. Эти атрибуты могут работать с командами COLGROUP или независимо от них. Он имеет 22 отдельных атрибута, но чаще всего используются ALIGN, CHAR, CHAROFF, SPAN, VALIGN и WIDTH.

THEAD, TBODY, TFOOT (рядные группы)

Эти атрибуты, изначально расширения только для Microsoft, которые были включены в HTML 4, мало используются по тем же причинам, по которым мы не можем зависеть от таблиц стилей — несовершенной поддержки браузера. Это очень плохо, потому что они довольно полезны. Используя эти команды, вы можете определить «head», «body» и «footer» для ваших таблиц. Если вы погружены в линейное мышление, вы можете организовать эти команды в порядке их предполагаемого внешнего вида: голова, тело и нижний колонтитул. Не. За <THEAD> следует команда <TFOOT>/#ec# command, which is then followed by the <TBODY> command.

THEAD — интересная команда. Думайте об этом так же, как вы относитесь к своему разделу <HEAD> на своих HTML-страницах — как к способу установки поведения по всей таблице. Вы можете использовать только одну команду THEAD в таблице. Он принимает следующие атрибуты: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN. Вот простой пример использования команды THEAD для установки цвета в таблице:

 <TABLE BORDER="1">  <THEAD>  <THEAD BGCOLOR="#ff0000">  <TR>  <TD>Bleah!</TD>  <TD>Bleah!</TD>  </TR>  <TR>  <TD>Bleah!</TD>  <TD>Bleah!</TD>  </TR>  </THEAD>  <TABLE>

Теперь у нас есть очень красный стол. Но не было ли легко установить цвет? Конечно, лучше делать это строка за строкой или клетка за клеткой.

Команда TFOOT, как и ее родственник THEAD, может использоваться только один раз для каждой таблицы. Это в основном действует как «нижний колонтитул» для головной части таблицы. Как и THEAD, он поддерживает следующие атрибуты: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN.

TBODY действует почти как команда BODY внутри таблицы. Вы можете использовать те же атрибуты, что и другие: ALIGN, BGCOLOR, CHAR, CHAROFF, VALIGN.

Не HTML 4 Теги

Есть еще несколько нестандартных табличных тегов, о которых стоит упомянуть. Используйте их с осторожностью, так как они поддерживаются не всеми браузерами.

DATAPAGESIZE / DATASRC

Это команды только для Internet Explorer, которые работают для отображения информации из базы данных. Атрибут DATAPAGESIZE позволяет указать, сколько столбцов необходимо для таблицы, а атрибут DATASRC обозначает определенный столбец данных из другой базы данных, который должен отображаться в таблице. Это работает в команде <TABLE> . Эти атрибуты могут выглядеть примерно так:

 <TABLE DATAPAGESIZE="5" DATASRC="DB7SR2">

в зависимости от источника ваших данных.

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

Разные советы

Пустые клетки

Будут времена, когда вы захотите оставить камеру намеренно пустой. Если вам нужно сделать это, и это нарушит структуру вашей таблицы, используйте неразрывный пробел (   ) или прозрачный .GIF, чтобы дать ячейке некоторое «невидимое» содержимое. Использование прозрачного .GIF дает вам больше контроля над размером дисплея. Netscape 4 является крупнейшим нарушителем для этой конкретной проблемы, поскольку он отказывается отображать пустой столбец.

Удаление нежелательных разрывов строк

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

 <TD>  Bleah!  </TD>

попробуйте написать:

 <TD>Bleah!</TD>

Проблемы ALIGN

Атрибут ALIGN, рассмотренный в предыдущем столбце, устарел в HTML 4, и некоторые из его поведений не всегда работают правильно. Поскольку браузеры часто отображают таблицы, которые используют атрибут ALIGN в качестве «плавающих» таблиц, они могут выбрать отображение вашего контента в виде потока вокруг вашей таблицы. Используйте команду <BR="clear"> после конца таблицы, чтобы заставить ваш контент вести себя сам.

Когда вы используете атрибут ALIGN для позиционирования контента, помните, что некоторые старые браузеры не поддерживают команду «center». В этом случае используйте команду <DIV ALIGN="center"> для центрирования вашего контента.

Почему бы вам не использовать фоновые изображения в таблицах? В некоторых версиях IE и Netscape возникают проблемы с отображением фоновых изображений внутри ячеек таблицы, поэтому некоторые дизайнеры избегают фоновых изображений в своих таблицах. Если это работает для вас, тем не менее, сделайте это.

Атрибут ALIGN = «right» для таблицы позволяет размещать «висячие» таблицы в правой части страницы. Это не так часто, потому что это немного сложнее, чем обычный левый стол, но это может быть визуально привлекательным. Вот простой пример, содержащийся на большой странице. Вырежьте и вставьте это в HTML-страницу, чтобы увидеть, как это работает:

 <P>More content, drivel, and useless page filler to give us something to work with.  Let's just keep going for a bit longer.  There, that should do it.</P>

 <H4>Looky, there's a table on the right side coming up!</H4>

 <TABLE BORDER="1" WIDTH="150" ALIGN="right" BGCOLOR="#ff0000" CELLPADDING="5">  <TR>  <TD>  <H4>And here's the table content!</H4>  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  Bleah!  </TD>  </TR>  </TABLE>

 <P>The regular content continues along the left side of the page, nicely formatted to include the table on the right side.  Looks nice, doesn't it?  A fellow could get sick of that ubiquitous red color he keeps using for an example.  Maybe he should consider using a different color sometime?</P>

Некоторые браузеры душат ALIGN = «правильный» код, поэтому не удивляйтесь, если все не увидят одинаковые результаты.

Пользователи XHTML

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

Последние мысли

С таблицами не особенно сложно работать, но они сложны. «Кривая обучения» для таблиц круче, чем у более простых HTML-кодов, которые в основном просто добавляют теги к тексту. Умение работать с таблицами — это первый шаг к тому, чтобы стать действительно опытным веб-дизайнером, поскольку теперь вы учитесь на самом деле проектировать веб-страницы, а не просто разбирать текстовые блоки.

Мой совет — медленно перемещаться по кодовым джунглям дизайна стола. Сначала ознакомьтесь с базовым дизайном таблицы, используя теги <TABLE> , <TR> и <TD> . Узнайте, что вы можете и не можете делать с различными способами использования и конфигурациями этих трех тегов. Затем начните добавлять новые теги в базу знаний, по одному за раз.

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