Размещено на http://www.allbest.ru/

• ОГЛАВЛЕНИЕ
• 1. Создание таблиц средствами html и их использование на web-страница
• 2. Основные принципы табличной разметки
• 3. Создание простейших HTML-таблиц

1. Создание таблиц средствами html и их использование на web-страницах

Работа с таблицами на Web-страницах не отличается от работы с таблицами в документах Word. Для создания таблицы можно использовать два способа: вставить таблицу, воспользовавшись командой Добавить таблицу из меню Таблица (для этого случая необходимо задать размеры создаваемой таблицы) или путем преобразования существующего текста с разделителями (символ абзаца, символ табуляции, точка с запятой или иной символ) в таблицу (пункт Преобразовать в таблицу из меню Таблица). Для редактирования структуры таблицы используется команда. Нарисовать таблицу. При этом возникнет панель инструментов Таблицы и границы, содержащая кнопки для изменения параметров таблицы.

Например, если добавить таблицу размером 4x2, то Word создаст следующий код:

<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=V WIDTH=638>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>

</TR>

</TABLE>

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

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

Читатели, имеющие опыт работы с таблицами в документах Word, сразу же смогут создавать таблицы и для HTML-документов. При отсутствии такого опыта можно научиться создавать таблицы по любой книге, посвященной работе с Microsoft Word, или воспользоваться справкой. Поэтому мы не будет здесь более подробно освещать вопросы создания таблиц, а отметим лишь некоторые особенности.

Поскольку возможности форматирования HTML-документов уступают аналогичным возможностям документов Word, то часто при преобразовании в HTML-документ некоторые элементы форматирования могут быть потеряны или изменены. Более того, даже при работе в режиме создания HTML-документа можно сконструировать на экране такую таблицу, которая не может быть в точно таком же виде отображена браузерами.

2. Основные принципы табличной разметки

таблица интернет web страница

Таблицы и соответствующие им теги - это инструменты HTML, которые используются для представления информации в табличной форме, например в виде крупноформатных таблиц, расписаний и отчетов.

Для полного описания информации, содержащейся в таблице, тег <TABLE> снабжен соответствующими элементами и атрибутами, в том числе элементом <ТН> для обозначения заголовков столбцов и строк, элементом <CAPTION>, представляющим заголовок, и атрибутом SUMMARY, обеспечивающим сжатое описание назначения и структуры таблицы.

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

При установке нулевого значения границ таблицы (<table border="0">) получаются «невидимые» таблицы, которые можно использовать для оформления различных элементов разметки, например для создания столбцов и отступов, установки интервалов и ограничения длины.

Разметка с помощью таблиц очень широко распространена, и большинство сетевых авторских инструментов используют таблицы в качестве основы макета страниц.

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

Теги представления, например <FONT>, <В> и <I>, стали вчерашним днем, когда появилась возможность использовать стили для оформления Web-документов.

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

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

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

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

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

В то же время пользователи с ограничениями зрения могут испытывать затруднения при работе с таблицами разметки. Программное обеспечение не всегда отличает таблицы разметки от таблиц данных.

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

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

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

До появления CSS (каскадных таблиц стилей) единственным средством, которым располагали дизайнеры для разработки макета страницы, были таблицы. Лишь простейшие варианты дизайна могли быть созданы без таблиц.

При этом единственным вариантом расположения элементов на странице было их отображение в виде вертикальной последовательности. О размещении элементов в разных областях страницы оставалось только мечтать.

Пытаясь найти решение этой задачи, дизайнеры обнаружили, что для оформления вывода можно использовать структурный элемент <TABLE>, если установить значение его атрибута BORDER равным нулю (<table border="0">), и, следовательно, сделать таблицу невидимой.

Размещая содержание страницы в разных ячейках таблицы, можно оформить разделы так, чтобы элементы находились в разных областях страницы. Применение таблиц для оформления привело к изменению основных характеристик Сети.

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

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

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

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

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

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

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

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

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

Более ранние версии браузеров недостаточно эффективно поддерживают CSS (каскадные таблицы стилей) и не способны обеспечить точное отображение форм вывода на основе таблиц стилей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы - структурные элементы, поэтому должны быть учтены в числе других элементов страницы. Разметка таблицы важна при работе с информацией в форме таблицы, особенно для пользователей с ограничениями зрения.

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

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

В связи с необыкновенно широким распространением таблиц разметки некоторые производители программ - синтезаторов речи разрабатывают программы, которые различают таблицы разметки и таблицы данных.

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

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

В таблицах разметки должны использоваться только основные элементы разметки строк и ячеек (<TR> и <TD>).

Заголовки столбцов, заголовки таблицы, сводки - все элементы, которые дают сведения о таблице, - не имеют значения в контексте таблиц разметки. таблица интернет страница тэг

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

Программы - синтезаторы речи не в состоянии отличить «настоящие» таблицы от таблиц, используемых для оформления макета страницы, в связи с чем пользователи с ограничениями зрения вынуждены знакомиться с разметкой таблицы. Таблицы разметки должны быть как можно более ненавязчивыми, используйте только основные теги таблицы, такие как <TR> и <TD>.

Пользователи с ограничениями зрения осуществляют доступ посредством дополнительного кода, поэтому их опыт работы с Web-страницами во многом зависит от порядка, в котором элементы расположены в коде.

Программное обеспечение, считывающее Web-страницы, линеаризирует таблицы - начинает с первой строки первого столбца и далее последовательно продвигается по таблице.

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

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

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

Web-страницы читают не только пользователи с нормальным зрением, но и пользователи с ограничениями зрения, поэтому необходимо разрабатывать как визуальное отображение, так и код.

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

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

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

Размер шрифта - характеристика гибкая: пользователи могут выбрать удобный им размер текста. Цвета также могут быть легко изменены: пользователи могут выбрать цвета с учетом своих потребностей и предпочтений.

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

На практике многие из этих потенциально гибких элементов жестко фиксируются с помощью различных способов кодирования. Один из них заключается в использовании постоянных величин для определения размеров форм вывода.

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

К сожалению, постоянные формы вывода снижают возможности Сети, ибо документы, созданные с их помощью, предусматривают только один вариант просмотра.

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

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

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

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

Читая напечатанные страницы, мы не можем изменить ширину столбцов, поэтому перед дизайнером стоит задача обеспечить размер шрифта и текста, подходящий для «среднего» читателя (оптимальными считаются строки, состоящие из 45-75 знаков).

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

Правила, принятые в печатном деле, в Сети могут стать помехой. При постоянной ширине столбцов длина строки из 60 знаков может уменьшиться до 20, если пользователь увеличит текст. Более того, страницы с постоянной шириной плохо приспосабливаются к изменениям условий.

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

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

Не ограничивайте присущую Web-страницам гибкость с помощью постоянных форм вывода. Для создания страниц используйте гибкие формы вывода, которые могут адаптироваться к различным условиям просмотра.

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

Устанавливайте ширину ячеек с помощью CSS (каскадных таблиц стилей), а не HTML. Такой метод не только помогает отделить содержание от его представления, - определение свойств таблицы посредством таблицы стилей подготавливает почву для последующей замены табличных форм вывода формами, созданными с использованием каскадных таблиц стилей.

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

Другая проблема, связанная с применением таблиц, -- громоздкий код HTML, особенно при использовании нескольких вложенных таблиц. Но это не является особой проблемой, ведь у нас в резерве всегда есть стили (CSS), а с ними код упрощается неимоверно.

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

С учетом механизма работы браузеров, выделилось несколько методов, позволяющих ускорить появление таблицы на веб-странице. Я буду использовать метод разбиение одной таблицы на несколько.

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

Вначале создаем таблицу с двумя колонками шириной 25% и 75%. Для выравнивания содержимого ячеек по верхнему краю добавлен параметр valign со значением равным top.

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

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

Ширину внутренних таблиц надо задать 100%, чтобы они заполняли всю ячейку целиком, а значение отступов через параметры cellspacing и cellpadding устанавливаем по желанию.

Несмотря на громоздкость кода, скорость загрузки текста будет несколько быстрее, чем при использовании одной таблицы. Хотя при столь малом объеме информации это не сильно заметно.

(рис. 1) Это пожалуй, самый распространенные макет в Сети

(рис. 2) Этот макет пользуется не меньшей популярностью, чем предыдущий

3. Создание простейших HTML-таблиц

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

Описание таблиц должно распологаться внутри раздела документа <BODY> . Документ может содержать произвольное число таблиц, причём допускается и вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE> . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом </TR> . Отдельная ячейка в строке обрамляется парой тэгов <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется обычно для ячеек-заголовков таблицы, а <TD> - для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячейки типа <TH> отображается полужирном шрифтом (Bold) шрифтом и располагается по центру. Ячейки, определённые тэгом <TD> по умолчанию отображают данные, выровненные влево и посередине в вертикальном направлении.

Тэги <TH> и <TD> не могут появляться вне описания строки таблицы <TR> . Завершающие коды </TR> , </TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы </TABLE> не может быть опущен.

Количество строк в таблице определяется числом открывающих тэгов <TR> , а количество столбцов - максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тэгов <TD> </TD> . Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержит данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.

Таблица может иметь заголовок, который заключается в пару тэгов <CAPTION> и </CAPTION> . Описание заголовка таблицы должно располагаться внутри тэгов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тэгов <TR> , <TD> или <TH> . Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тэга <TABLE> и до первого <TR> .

По умолчанию текст заголовка таблицы располагается над ней (align="top") и центрируется в горизонтальном направлении.

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

Этих сведений вполне достаточно для построения элементарных таблиц.

Приведём пример простейшей таблицы состоящий из двух строк и двух столбцов :

<html>

<head>

<title>Пример простейшей таблицы</title>

</head>

<BODY> <TABLE border>

<TR>

<TD>Ячейка 1 строки 1

<TD>Ячейка 2 строки 1

<TR>

<TD>Ячейка 1 строки 2

<TD>Ячейка 2 строки 2

</TABLE>

</body>

</html>

В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц, задания взаимного расположения элементов страницы. При просмотре такого документа сразу не видно, что для его построения используется таблица, так как рамки вокруг её ячеек не прорисовываются.

Размещено на Allbest.ru