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

, и
. Далее перечислены некоторые атрибуты тега , которые применяются наиболее часто.

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right , текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

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

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

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

cols

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

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols ), строками (rows ) или группами (groups ), которые определяются наличием тегов

, , , или . Толщина границы указывается с помощью атрибута border .

width

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

Форматирование текста с помощью таблиц. Использование бегущей строки

Таблицы.

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

Контейнеров в настоящее время множество это.DIV, LAER, FRAME, IFRAME, DL, MAP, списки. Информация внутри этих тегов реагирует на форматирование и выравнивание присущее только используемым тегам и не реагирует на внешнее форматирование. Внешнее воздействие минимально. Поэтому считают что свободное размещение информации менее корректно чем в контейнере.

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

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

Пример 1

Таблица

цвет объект
красный клубника
оранжевый апельсин
зеленый трава

Атрибуты таблиц.

Атрибут BORDER устанавливает ширину рамки в пикселях. (0 – отсутствие рамки).

Атрибут Cellpadding – задает в таблице расстояние между рамкой и текстом.

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

В таблице данные форматируются атрибутом Align, который, в зависимости от того, с каким тегом используется, форматирует либо таблицу целиком с тегом

, либо строку целиком с тегом , либо работает с конкретной ячейкой с тегом - строки, в и в горизонтальном виде: между ними должны размещаться все данные, которые требуется поместить в одну строку. Внутри строки таблицы обычно размещаются ячейки с данными . Для определения ячейки таблицы используется элемент TD . Число элементов ТD в строке определяет число ячеек. Ячеек может быть произвольное количество, однако таблица должна содержать хотя бы одну ячейку.

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

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

.

LEFT, RIGHT, CENTER – выравнивают информацию. По умолчанию – LEFT для текста и CENTER для заголовков.

Атрибут VALIGN может принимать значения Top, Bottom, Middle, Baseline, по умолчанию Middle. Он регулирует положение данных относительно верхней и нижней границ ячеек.

Заголовок таблицы форматируется тегом

и атрибутом Align, который принимает значения Top, Middle, Bottom.

WIDTH (ширина) и HEIGHT (высота) задаются либо жестко в пикселях, либо в процентах от размера изображения.

BGCOLOR – задает цвет. В

- ячейки, в - всей таблицы.

BORDER COLOR – задает цвет рамок в Internet Explorer.

BASELINE – осуществляет выравнивание всех ячеек в строке или в таблице по базовой линии.

В ячейках используется NOWRAP=”YES/NO” – переносить или запретить перенос в одной ячейке слова по строке. По умолчанию – NO.

COLSPAN – объединяет количество колонок.

ROWSPAN – объединяет количество строк.

Создание более сложных таблиц возможно через объединение нескольких строк или столбцов. Перед началом работы целесообразно нарисовать схему будущей таблицы.



Пример 2

Таблица 2

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

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

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

оранжевый апельсин
допустимо использовать такие элементы HTML , как CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TH, TD и TR .

Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов TR и TD соответственно.

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

Поисковая система Декабрь 2009 г. Ноябрь 2009 г.
Яндекс 48.0% 47.9%
Google 34.9% 34.7%
Search.Mail.ru 8.6% 8.6%

Созданная таблица представлена на рисунке 9.1 .


Рис. 9.1.

Заголовок таблицы

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

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

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

Добавление некоторых свойств

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

Описание таблицы: атрибут summary

Пользователи с нормальным зрением могут сами для себя решить, стоит им изучать таблицу или нет. Быстрый взгляд на нее и на ее заголовок позволит сказать, велика ли таблица и что она содержит. Пользователи с программами для чтения с экрана не смогут этого сделать, пока разработчик не добавит к элементу TABLE атрибут summary . Этот атрибут позволяет написать более развернутое описание, чем то, которое подходит для элемента CAPTION . Содержание атрибута summary не будет отражено визуальными браузерами, поэтому можно сделать описание достаточно длинным для того, чтобы те, кто его услышат, смогли понять, что именно представлено в таблице. Данный атрибут рекомендуется использовать только в случае необходимости, например, для больших и сложных таблиц. Для созданной выше таблицы можно добавить описание следующим образом:

...

Толщина рамки таблицы: атрибут border

Атрибут устанавливает толщину рамки в пикселах, т.е. использует в качестве значения любое положительное число. По умолчанию, рамка изображается трехмерной, однако вид рамки меняется в зависимости от браузера. При использовании атрибута border без аргументов, браузер отображает рамку толщиной один пиксел. Толщину рамки возможно также установить с помощью одноименного свойства CSS. Следующий фрагмент кода добавляет к таблице рамку толщиной 2 пиксела:

...

Ширина таблицы: атрибут width

Ширину таблицы можно задать с помощью атрибута width . Ширину можно задавать в пикселах или процентах от доступного пространства. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться форматировать текст, чтобы подогнать его к заданным размерам. Если это невозможно, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Если ширина явно не указана, то она также будет вычисляться на основе содержимого таблицы. Аналогом данного атрибута является одноименное свойство CSS. В следующем примере ширина таблицы устанавливается равной 75% от ширины окна браузера:

...

Расстояние между ячейками таблицы: атрибут cellspacing

Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border , то толщина границы принимается в расчет и входит в общее значение. Значением атрибута может быть любое целое положительное число. По умолчанию, атрибут cellspacing принимает значения 0 или 2, в зависимости от того, установлен атрибут border или нет. Следующий фрагмент кода устанавливает расстояние между ячейками 2 пиксела:

...

Атрибуты тегов таблиц

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

WIDTH - управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки – относительно ширины таблицы) или в пикселях.

HEIGHT – то же самое, но для управления высотой таблицы.

ALIGN и VALIGN служат для управления размещением таблицы на Web-странице и для форматирования данных внутри таблицы.

ALIGN может иметь значения LEFT, RIGHT и CENTER.

VALIGN может принимать значения TOP, MIDDLE и BOTTOM.

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

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

Атрибут VALIGN применяется только внутри тегов

и выравнивание задается сразу для всех ячеек, содержащихся в этой строке.

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

и
. При употреблении атрибутов ALIGN и VALIGN внутри тега
. Значение толщины рамки задается в пикселях. Чтобы у таблицы сделать невидимые границы, нужно задать значение параметра BORDER, равное нулю: BORDER="0".

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

. Значения этих атрибутов задаются в пикселях.

Для создания “невидимой” таблицы необходимо установить параметры BORDER=0 CELLSPACING=0 CELLPADDING=0

BGCOLOR предназначен для окрашивания фона ячеек таблицы.

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

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

COLSPAN. При создании таблицы первая строка является определяющей, т. е. все последующие строки будут иметь такую же ширину колонок, как и первая строка. Для изменения этого положения служит параметр COLSPAN. Изменение значения СOLSPAN приводит к увеличению ширины ячейки на указанное вами количество ранее определенных столбцов, т. е. при указании параметра COLSPAN=2 ячейка займет пространство, отведенное для следующей (справа) ячейки.

ROWSPAN действует абсолютно так же, но по вертикали. Например, при указании значения ROWSPAN=2 ячейка займет пространство, отведенное для ячейки, находящейся под ней, в следующей строке таблицы.

Рассмотрим примеры таблиц.

Пример 10. Простейшие таблицы

Оформление таблиц

ТАБЛИЦА №1

Таблица из одной строки из трех столбцов без указания размеров ячеек

Этот файл создает в броузере две таблицы, содержащие одну строку и три столбца. Для первой таблицы размеры не определены. Она занимает всю ширину окна броузера. Для второй – ширина столбцов задана 50, 100 и 150 пикселей. Кроме того, у второй таблицы задана толщина рамки – 3 пикселя. Вид этих таблиц в броузере показан на рис. 8.9.

Рис. 8.9. Вид таблиц (пример 8) в броузере

Пример 11. Таблица, содержащая объединенные ячейки

Оформление таблиц

ТАБЛИЦА №2

ширина ячейки 50 пикселей

ширина ячейки 100 пикселей

ширина ячейки 150 пикселей

HEIGHT=100 ALIGN=CENTER BGCOLOR=YELLOW>

ТАБЛИЦА №3 Ширина ячеек задана в % от ширины таблицы

Ширина ячейки 20% Ширина ячейки 50% Ширина ячейки 30% Объединенная ячейка (COLSPAN=3)

Для этой таблицы заданы размеры: ширина (WIDTH) – 500 пикселей, высота (HEIGHT) – 100 пикселей, толщина рамки таблицы – 7 пикселей; выравнивание таблицы по центру страницы (см. рис. 8.10).

Рис. 8.10. Таблица с объединенными ячейками

Фон таблицы задан желтого цвета. Ширина ячеек задается в процентах от ширины таблицы. Таблица содержит две строки. В первой строке три столбца. Вторая строка имеет объединенные ячейки, т.е. все три столбца объединены в один.

Имя поля определяет, как следует обращаться к данным этого поля при автоматических операциях с базой (по умолчанию имена полей используются в качестве заголовков столбцов таблиц) и в пределах одной таблицы должно быть уникальным. Имя поля может содержать до 64 символов. Рекомендуется использовать короткие содержательные имена. В именах полей допустимы пробелы, однако если создаваемые в Access БД предполагается экспортировать в другие СУБД, то в именах полей их использовать не рекомендуется.

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

Таблица 2.2. Типы данных MS Access

Тип данных

Использование

Текстовый

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

Поле Мемо

Рекомендуется применять для включения в таблицу длинных описаний (до 65535 символов), например, примечаний. Физически текст не хранится в поле, а хранится в другом месте БД. В поле хранится лишь указатель на него.

Числовой

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

Дата/время

Для хранения календарной даты и текущего времени.

Денежный

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

Счетчик

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

Логический

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

Поле объекта OLE

Для хранения текста, электронных таблиц, рисунков, звуков и других данных, которые были созданы не в Access, а в Word, Excel или других приложениях. Реально, такие объекты в таблице не хранятся, а хранятся в другом месте внутренней структуры файла БД; в таблице хранятся только указатели на них.

Для хранения гипертекстовых ссылок (адресов URL Web-объектов Интернета). При щелчке на ссылке автоматически происходит запуск броузера и воспроизведение объекта в его окне.

Мастер подстановок

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

Поля БД не просто определяют структуру базы - они еще определяют групповые свойства данных, записываемых в ячейки, принадлежащие каждому из полей. Свойства полей перечислены в табл. 2.3, а форматы данных – в табл. 2.4.

Таблица 2.3. Свойства полей данных MS Access

Свойство поля

Описание

Размер поля

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

Формат поля

Определяет способ форматирования данных в ячейке. В табл. 2.4 перечислены допустимые форматы

Число десятичных знаков

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

Значение по умолчанию

Определяет некоторое значение, которое будет автоматически вводиться в данном поле в каждой новой записи. Данное свойство следует использовать для величины (слова, сокращения или числа), которая наиболее часто встречается в этом поле БД. Автоматически введенное значение по умолчанию можно в любой момент удалить или изменить

Пустые строки

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

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

Подпись

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

Индексированное поле

Указывает, что данное поле будет проиндексировано. Использование индексов позволяет значительно ускорить поиск и сортировку. Это свойство обладает тремя значениями:

    Нет - индекс не создается (по умолчанию);

    Да (Допускаются совпадения) - в индексе допускаются повторяющиеся значения;

    Да (Совпадения не допускаются) - повторяющиеся значения в индексе не допускаются.

Маска ввода

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

Новые значения

Для данных типа Счетчик задается способ генерации уникальных значений: последовательно - значение Последовательные ; по умолчанию; беспорядочно - значение Случайные

Обязательное поле

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

Условие на значение

Определяет правила, согласно которым в поле должны вводиться данные. Например, при вводе дат может потребоваться ограничить их некоторым промежутком времени, либо для ввода числовых или денежных значений ограничить их максимальным или минимальным значением. Для создания условия на значение в строке этого свойства нужно ввести специальное выражение. Например, выражение Between #1/1/40# And #12/31/58#; допускает ввод только тех дат, которые попадают в промежуток времени между 1 января 1940 года и 31 декабря 1958 года. В подобных выражениях даты должны быть окружены символами # .

Сообщение об ошибке

Задается сообщение, которое будет появляться в специальном диалоговом окне при совершении ошибки ввода данных

Сжатие Юникод

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

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

Таблица 2.4. Форматы данных типа Дата/время, Числовой, Денежный и Логический

Формат

Пример

Дата/время

Полный формат даты

19.06.1994 17:34:23

Длинный формат даты

Средний формат даты

Краткий формат даты

Длинный формат времени

Средний формат времени

Краткий формат времени

Денежный

Основной

Денежный

3456,79 грн.

Фиксированный

С разделителями разрядов

Процентный

Экспоненциальный

Числовой

Длинное целое

Одинарное с плавающей точкой

Двойное с плавающей точкой

Код репликации

Действительное

Логический

Истина/Ложь

Для указания типа отдельных символов в полях с данными типа Текстовый и Поле Мемо в строке свойства Формат поля можно использовать один из специальных символов перечисленных в табл. 2.5.

Таблица 2.5. Специальные символы, используемые в полях с данными типа Текстовый и Поле Мемо

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



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