Пакет Adobe GoLive
Таблицы
Таблицы
Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам.
Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселов, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселов, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселов. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселов, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность.
Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.
Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <table> и его закрывающим близнецом </table>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <col> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов.
Сам тег <table> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.
Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселов, или воспользоваться процентным соотношением.
Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселах. Если мы установим нулевое значение этогс параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.
Параметр cellspacing позволяет устанавливать размер в пикселах между отдельными ячейками страницы. А похожий параметр cellpadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a cellpadding — внутри ячейки.
А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.
В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <table>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах" (Рисунок 1.24).
