Атрибуты тега TABLE, бордюры, размеры и другие. Атрибуты тега TABLE, бордюры, размеры и другие Html тег table атрибуты
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега .
Пример HTML таблицы с заголовком th
Volkswagen AG | Daimler AG | BMW Group |
---|---|---|
Audi | Mercedes-Benz | BMW |
Skoda | Mercedes-AMG | Mini |
Lamborghini | Smart | Rolls-Royce |
Исходный код таблицы HTML с заголовками th
Volkswagen AG | Daimler AG | BMW Group |
---|---|---|
Audi | Mercedes-Benz | BMW |
Skoda | Mercedes-AMG | Mini |
Lamborghini | Smart | Rolls-Royce |
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan="х " , у ячейки или , где x
Чтобы объединить ячейки по вертикали используйте атрибут rowspan="х " , у ячейки или , где x - количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2" .
Пример HTML таблицы с объединением ячеек
Исходный код таблицы HTML с объединенными ячейками
Nissan | ||
---|---|---|
Модель | Комплектация | Наличие |
Nissan Qashqai | VISIA | + |
TEKNA | + | |
Nissan X-Trail | ACENTA | + |
CONNECTA | - |
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, - область нижнего колонтитулы, - основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Пример HTML таблицы с колонтитулами и подписью
Исходный код таблицы с колонтитулами и подписью
Характеристика | SUTA 09H 6R | SUTA 09HR6R | SUTA 15H 5R |
---|---|---|---|
Наличие | + | + | + |
Мощность двигателя | 0,9 (90 л.с.) | 0,9 (90 л.с.) | 1,5 (90 л.с.) |
Топливо | бензин | бензин | дизель |
Норма токсичности | Евро-6 | Евро-6 | Евро-5 |
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги и ставятся внутри тега перед тегами , АКП6 (EDC)
Исходный код таблицы HTML c и
ZEN 2E2C AL A | ZEN 2E2C J5 A | INTENSE 2E3C AL A | Характеристика |
---|---|---|---|
1.5 (90 л.с.) | 1.2 (115 л.с.) | 1.5 (90 л.с.) | Мощность двигателя |
дизель | бензин | дизель | Топливо |
АКП6 (EDC) | АКП6 (EDC) | АКП6 (EDC) | Трансмиссия |
Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега | использовать тег | . Текст в ячейке, оформленной с помощью тега | , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги | и |
нет.
Пример 12.1. Создание таблицы
Порядок расположения ячеек и их вид показан на рис. 12.1. Таблица c рамками
РЕЗУЛЬТАТ: Таблица без рамокТаблица c рамкамиАтрибуты тегов Пример
РЕЗУЛЬТАТ:
По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border , cellspacing , cellpadding и др. больше не поддерживаются и их использование валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц . Например, вместо атрибута cellspacing для изменения расстояния между ячейками таблицы используется свойство border-spacing , а для выравнивания содержимого в ячейках таблицы – свойства text-align и vertical-aling . CSS-стили для оформления таблиц Теги группирования строк html таблицыДля создания более сложных таблиц можно использовать теги: Пример
РЕЗУЛЬТАТ: Теги группирования столбцов html таблицыАтрибут тегов
| могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тег таблицы
---|
Проще всего понять, как можно использовать группировку строк и столбцов на примере таблицы Судоку .
Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:
Пример
желтый | красный | ||
---|---|---|---|
РЕЗУЛЬТАТ:
Не пытайтесь установить стиль text-align для тегов
Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n) , где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .
Пример
Наименование | Цена (руб.) |
---|---|
Поминутная оплата солярия (от 4 минут) | 15 |
50 минут солярия (14 руб/мин, 1 мес.) | 700 |
100 минут солярия (13 руб/мин, 2 мес.) | 1300 |
200 минут солярия (12 руб/мин, 3 мес.) | 2400 |
РЕЗУЛЬТАТ:
Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>. Число тегов <ТD>ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН>ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD>ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
---|---|---|
Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
Заголовок может объединять строки | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | |
Текст или данные | Текст или данные |
Использование заголовков таблицы - тег <САРТIОN>
Тег
Текст или данные | Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
чтобы растянуть ее над любым количеством обычных ячеек. |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Текст или данные - ширина 100% |
Текст или данные - ширина 50% |
Текст или данные - ширина 200 пикселов |
Текст или данные - ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. | верх, | середина, | низ. |
VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. | верх, | верх, | верх. |
VALIGN=middle Центрирует содержимое ячейки по вертикали. | середина, | середина, | середина. |
VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. | низ, | низ, | низ. |
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университетДобро пожаловать!
|
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
Глава 4
Таблицы в HTML
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц. Приведем примеры реально существующих документов, в которых табличное представление является удобным способом построения документа. На рис. 4.1 показан типичный пример использования таблиц для представления числовых данных, разбитых по строкам и столбцам. На рис. 4.2 использование таблицы служит лишь целям форматирования документа, задания взаимного расположения элементов страницы. При просмотре такого документа сразу не видно, что для его построения используется таблица, так как рамки вокруг ее ячеек не прорисовываются.
Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием преформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тегов
Ивыводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.
Специальные средства для создания таблиц, впрочем, не отменяют возможности использования преформатированного текста. Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т. д. Правилам создания таблиц и примерам их использования посвящена данная глава.
Рис. 4.1. Типичный пример HTML-таблицы
Рис. 4.2. Пример таблицы без рамок
Создание простейших HTML-таблиц
Рассмотрим сначала минимальный набор тегов и их параметров, необходимый и достаточный для создания несложных таблиц, а затем перейдем к их детальному описанию.
Описание таблиц должно располагаться внутри раздела документа
. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгомКаждая строка начинается тэгом
Тэги
Количество строк в таблице определяется числом открывающих тегов
Таблица может иметь заголовок, который заключается в пару тегов
Ячейка 1 строки 1 | Ячейка 2 строки 1 |
Ячейка 1 строки 2 | Ячейка 2 строки 2 |
Рис. 4.З. Пример простейшей таблицы
Представление таблиц на странице
Рассмотрим назначение различных параметров, которые могут использоваться в тэгах, описывающих таблицы.
Заголовок таблицы
Тэг заголовка таблицы
Если данное описание заголовка добавить к приведенному выше примеру, то таблица будет отображаться так, как показано на рис. 4.4.
Рис. 4.4. Таблица с заголовком
Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, CENTER и RIGHT для горизонтального выравнивания наряду с описанными выше значениями. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться и для горизонтального выравнивания, и для вертикального. Например, запись ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне и размещенного над таблицей. Если записать ALIGN=BOTTOM, то так же, как и в приведенном выше примере, заголовок будет расположен под таблицей. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания - VALIGN, принимающий значения ТОР или BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:
Таблица с данным описанием заголовка в Microsoft Internet Explorer будет отображена следующим образом (рис. 4.5). Если данный пример просматривать в Netscape, то заголовок будет размещен по умолчанию, т. е. над таблицей и посередине в горизонтальном направлении.
Рис. 4.5. Горизонтальное выравнивание заголовка таблицы браузером Microsoft Internet Explorer
Возможности горизонтального выравнивания заголовка таблицы являются расширением спецификации HTML, не поддерживаются браузером Netscape Navigator, и поэтому ими следует пользоваться только в крайней необходимости.
Параметры тега Основным тэгом, применяемым при создании таблиц, является тег Параметр BORDER
Параметр BORDER управляет изображением рамки вокруг каждой ячейки, которые, по сути, дают линии сетки таблицы, и вокруг всей таблицы. По умолчанию рамки не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы. Существует немало ситуаций, когда использование таблиц без рамок вполне оправданно, например, для многоколонных списков, реализованных при помощи таблиц, или задания точного взаимного расположения рисунков и текста. Однако в большинстве случаев для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице.
Для добавления в таблицу рамок необходимо включить в код Например,
Численное значение параметра определяет толщину рамки в пикселах, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно принимается равным минимальному значению (1), хотя для различных браузеров стиль показа рамок может отличаться. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек отсутствует.
Пример таблицы с рамкой толщиной 10 пикселов приведен на рис. 4.6.
Рис. 4.6.
Таблица с рамкой толщиной 10 пикселов
В спецификации HTML 3.0 не было включено значение для параметра BORDER. Это сделано лишь в HTML 3.2. Так, в частности, ранние версии Microsoft Internet Explorer не разрешали задания численного значения.
Отметим, что при отсутствии параметра BORDER рамки не прорисовываются, но место под них оставляется (это относится только к Netscape). Общий размер таблицы при отсутствии параметра BORDER или его наличии не изменяется (исключением является случай задания BORDER=0).
Таким образом, минимальное расстояние между двумя соседними ячейками в этих
случаях будет равно удвоенной толщине рамки, т. е. двум пикселам. Расположить
ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Некоторые браузеры могут не поддерживать задание численного значения параметра BORDER, тогда значение, равное нулю, будет проигнорировано, и таблица будет прорисована с рамками.
Приведем несколько примеров:
Все три приведенных примера браузером Netscape будут отображены по-разному. Заметим, что здесь имеет место довольно уникальный случай, когда нельзя говорить о значении по умолчанию. Третий пример, в котором параметр BORDER опущен, отличается от любого примера, где этот параметр присутствует. Для Microsoft Internet Explorer второй и третий примеры идентичны, поэтому для этого браузера значение по умолчанию параметра
BORDER равно
нулю
.
Параметр CELLSPACING
Форма записи параметра: CELLSPACING=num, где num - численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 4.6). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 4.7).
Рис. 4.7.
Таблица со значением
CELLSPACING=0
Параметр CELLPADDING
Форма записи параметра аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.
На рис. 4.8 показан пример таблицы со значением CELLPADDING=10.
Рис. 4.8.
Таблица со значением
CELLPADDING=10
Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга. Для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату. Оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали. К сожалению, раздельного управления горизонтальными и вертикальными отступами так, как это сделано, например, для отступов от изображений (параметры HSPACE и VSPACE тега ), не предусмотрено.
Все три параметра - BORDER, CELLPADDING и CELLSPACING действуют независимо друг от друга, если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. В частности, если опущены все перечисленные параметры, то минимальное расстояние между данными из смежных ячеек будет равно 6 пикселам (для Netscape). Это значение складывается из двух пикселов для CELLSPACING, одного пиксела для CELLPADDING и одного пиксела для рамки каждой из ячеек. Наиболее компактная таблица будет получена заданием следующего описания:
Только в таком варианте ячейки будут расположены вплотную друг к другу. Примером использования может служить таблица, все ячейки которой содержат рисунки одинакового размера, которые необходимо расположить рядом друг с другом.
Параметры WIDTH и HEIGHT
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде - расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами - по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.
В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим, что задание конкретного значения параметра, например
WIDTH=200, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности. Поясним это на примерах. Пусть имеется таблица, которая в данных условиях по умолчанию имела бы ширину, меньшую заданной. В этом случае браузер увеличит ширину таблицы до требуемой путем пропорционального расширения всех колонок таблицы. При сужении окна просмотра ширина таблицы изменяться не будет, и, возможно, для ее просмотра потребуется горизонтальная прокрутка. Если же таблица по умолчанию имеет
ширину, большую заданной, то браузер сделает попытку уменьшить ее ширину за счет, во-первых, сокращения ширины отдельных колонок, для которых заданная ширина больше необходимой, во-вторых, разбиением текста в отдельных ячейках на несколько строк с увеличением высоты таблицы. Эти действия могут не обеспечить требуемого размера таблицы, и тогда она будет иметь минимально возможную ширину. Такие же действия предпринимаются для таблиц, у которых не указаны размеры, при сужении окна просмотра.
Конкретные алгоритмы настройки таблиц для различных браузеров могут несколько отличаться.
Параметр ALIGN
Данный параметр тега Приведем пример таблицы с обтекающим текстом, отображение которой показано на рис. 4.9.
населения Санкт-ПетербургаН3>
Рис. 4.9.
Таблица без рамок с обтекающим текстом
Этот документ состоит из таблицы без рамок с параметром
выравнивания ALIGN=LEFT, что позволяет тексту, следующему за таблицей,
расположиться справа от нее. Таблица состоит всего из одной строки, в которой
содержится две ячейки. Каждая ячейка содержит часть ненумерованного списка Неверное решение.
Приведем несколько иной пример для создания подобной страницы, отображение которой показано на рис. 4.10.
взрослого населения Санкт-ПетербургаН3>
Приведенные данные получены на основе анализа репрезентативной выборки,
содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих
в Санкт-Петербурге.
Рис. 4.10.
Таблица без рамок, содержащая три столбца
В отличие от предыдущего примера здесь нет текста, обтекающего таблицу. Весь документ состоит из одной таблицы с заголовком, содержащей три ячейки в одной строке. Первые две ячейки полностью повторяют предыдущий пример. В третьей ячейке располагается текст, который комментирует содержание первых двух ячеек. Здесь нет необходимости задавать принудительное обрывание текста, как это описано в предыдущем случае. Весь текст, относящийся к таблице, должен располагаться внутри третьей ячейки, а последующий текст - после окончания описания всей таблицы Форматирование данных внутри таблицы
Каждую отдельную ячейку внутри таблицы можно рассматривать
как область для независимого форматирования. Все правила, которые действуют для
управления отображением текста, могут быть использованы для форматирования
текста внутри ячейки. Внутри ячейки допустимо использование практически всех
элементов HTML, которые могут появляться внутри тела документа , Для форматирования данных внутри ячеек таблицы предусмотрены следующие параметры.
Параметры выравнивания содержимого ячеек - ALIGN и VALIGN. Могут применяться в кодах Приведем пример таблицы, в которой данные в ячейках первого столбца выровнены вправо, второго столбца - по центру, а третьего - влево (значение по умолчанию):
Отображение этого примера браузером показано на рис. 4.11.
Рис. 4.11.
Выравнивание данных в ячейках таблицы
Параметр NOWRAP отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в кодах Параметры WIDTH и HEIGHT могут применяться в кодах Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью параметров COLSPAN (COLiimn SPANning) и ROWSPAN (ROW SPANning), задаваемых в кодах На рис. 4.12 показан пример отображения таблицы, полученный по следующему HTML-коду:
Рис. 4.12.
Таблица с ячейками, распространяющимися на несколько строк или столбцов
Невнимательное задание значений параметров раздвижки ячеек может привести к их взаимному перекрытию и конфликтам, при которых результат непредсказуем. Характерное применение протяженных ячеек - общий заголовок для нескольких смежных колонок или строк.
Приведем пример кода HTML (отображение которого показано на рис. 4.13), в котором протяженные ячейки сформированы некорректно.
Ячейка 3
Рис. 4.13.
Результат некорректного определения протяженных ячеек (наложение текста)
Параметр BGCOLOR задает цвет подложки всей таблицы, отдельных строк или ячеек. Может встречаться в тэгах Пример:
Вложенные таблицы
Отдельные ячейки таблицы могут содержать практически любые теги языка и данные, разрешенные в разделе Приведем пример таблицы, использующей один уровень вложенности.
H - население города (тыс.жит.,1992 г.)
P - расстояние от Санкт-Петербурга (км) 50 26 48 40 30 29 24 35
Все города, подчиненные
ALIGN=RIGHT>245 ALIGN=RIGHT>122 24 ALIGN=RIGHT>159 ALIGN=RIGHT>147 ALIGN=RIGHT>138 ALIGN=RIGHT>115 55 ALIGN=RIGHT>244 85 ALIGN=RIGHT>141 ALIGN=RIGHT>40 ALIGN=RIGHT>246 ALIGN=RIGHT>145 ALIGN=RIGHT>201 ALIGN=RIGHT>192 81 ALIGN=RIGHT>200 53 64
Рис. 4.14.
Пример вложенных таблиц
Результат отображения данного примера показан на рис. 4.14.
На первый взгляд кажется, что в примере нет вложенности таблиц. На самом деле весь документ представляет собой таблицу, не имеющую рамок и состоящую из заголовка и всего одной строки, содержащей пять ячеек. Организация такой таблицы служит единственной цели - расположению данных на странице. Внутри первой ячейки располагается другая таблица, имеющая свой заголовок и состоящая из трех столбцов, после которой идет текст, выровненный посередине. Третья и пятая ячейки также содержат отдельные таблицы. Вторая и четвертая ячейки - пустые, они не содержат никаких данных и имеют единственный параметр WIDTH, определяющий ее ширину. Их назначение - задать отступ между первой и третьей, а также третьей и пятой ячейками, в которых располагаются таблицы. Это один из возможных вариантов задания такого отступа. Другой вариант - использование параметра CELLSPACING, определяющего расстояние между ячейками, однако этот параметр задает отступы одновременно и по горизонтали, и по вертикали, что в данный момент не требуется. Кроме того, пустая ячейка с заданной шириной при сужении области просмотра будет сокращаться в отличие от пространства, заданного параметром CELLSPACING (равно как и CELLPADDING). Попробуйте на данном примере уменьшать ширину области просмотра в браузере или, что приведет к тем жерезультатам, увеличивать размеры шрифта, которым отображается текст. Расстояние между таблицами
сократится до нуля, давая возможность видеть одновременно всю информацию как можно дольше, однако дальнейшее изменение не приведет к порче таблицы, а предоставит возможность горизонтальной прокрутки. По аналогичной схеме можно организовать размещение информации, состоящей не только из таблиц, но и изображений, фрагментов текста и т. д.
Особенности построения таблиц
В данном разделе рассматриваются некоторые специфичные возможности отдельных браузеров, а также отдельные тонкости построения и отображения таблиц.
Отображение пустых ячеек в таблицах
Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тегов Рис. 4.15.
Пустая ячейка таблицы отображается по-разному различными браузерами
Microsoft Internet Explorer и те, и другие ячейки отображает цветом фона ячеек. Такой браузер как NSCA Mosaic предоставляет пользователю возможность самому определить характер выдачи пустых ячеек таблицы с помощью выбора соответствующих опций. Знание таких особенностей позволит разрабатывать таблицы, которые будут отображены подходящим образом, вне зависимости от выбранного пользователем браузера. В ряде случаев достаточно для этого вместо некоторых пустых ячеек создавать ячейки, содержащие единственный код.
Выравнивание данных в столбцах таблицы
Характерной проблемой при создании таблиц является задание параметров выравнивания для отдельных строк или столбцов. Для выравнивания содержимого всех ячеек текущей строки достаточно задать требуемые параметры в коде В Microsoft Internet Explorer предусмотрены специальные теги - Параметрами тегов Тэг Различие между тэгами Приведем пример. Пусть необходимо построить таблицу, содержащую 6 столбцов, причем данные в первых трех из них должны быть выровнены вправо, а следующих трех - посередине. Для решения этой задачи следует записать такой фрагмент HTML-кода:
(данные для таблицы)
Результат отображения этого кода показан на рис. 4.16.
Рис. 4.16.
Таблица с разными параметрами выравнивания данных в группах ячеек
Другой пример. Пусть в предыдущей таблице первые две колонки должны быть выровнены вправо, а третья - посередине, причем все три колонки необходимо объединить в группу. Последующие три колонки также должны быть объединены в группу и иметь выравнивание, аналогичное первой группе. Для решения этой задачи следует записать такой фрагмент HTML-кода:
(данные для таблицы)
В этом примере после тега На рис. 4.17 показан результат реализации приведенного выше кода, а также вариант отображения такой таблицы с записью RULES=GROUPS в тэге Совет
Поскольку область применения тегов Рис. 4.17.
Таблица с группированными столбцами
Задание цвета рамок таблицы
Еще несколько параметров, характерных только для Microsoft Internet Explorer, позволяют выбирать цвет рамок таблиц - BORDERCOLOR, BORDERCOLORLIGHT
и BORDERCOLORDARK. Эти параметры могут задаваться в тэгах Примечание
Браузер Netscape версии 4.x также поддерживает параметр BORDERCOLOR.
Задание фонового рисунка для таблицы
Браузер Microsoft Internet Explorer (а также браузер Netscape версии 4.x) разрешает использовать параметр BACKGROUND, определяющий фоновый рисунок для таблицы так, как это может быть сделано для всего HTML-документа. Этот параметр может задаваться в тэгах Тэги структурирования таблицы , w
Браузер Microsoft Internet Explorer позволяет использовать ряд новых тегов для структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки.
Тэги , Тэги и Тэг При использовании новых тегов появляется возможность более гибко управлять рамками и линиями сетки таблицы.
Управление прорисовкой рамок вокруг таблицы осуществляется параметром FRAME тега Параметр FRAME может принимать следующие значения:
Параметр RULES управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения:
Пример:
Примечание
Прорисовка линий сетки таблицы и рамок будет осуществляться только при наличии параметра BORDER тега Приведем пример полного HTML-кода, создающего таблицу с использованием описанных возможностей:
Пример гибкого управления линиями
Рис. 4.18.
Гибкая прорисовка линий сетки таблицы браузером Microsoft Internet Explorer
В этом примере, отображение которого браузером представлено на рис. 4.18, показывается один из возможных вариантов управления линиями сетки и рамками вокруг таблицы. Вокруг таблицы рисуется рамка толщиной 5 пикселов (BORDER=S) только с верхней и нижней стороны (FRAME=HSIDES). Внутри таблицы рисуются линии сетки, разделяющие группы данных (RULES=GROUPS). Группы данных определены, во-первых, наличием трех тегов
Задание числа столбцов таблицы
Браузер Microsoft Internet Explorer (а также браузер Netscape версии 4.x) разрешает задавать в тэге Вертикальное выравнивание таблиц
Последний параметр тега Примечание
Отметим, что использование одного и того же параметра может существенно различаться как по назначению, так и по возможным значениям для разных тегов даже для одного браузера и в рамках спецификации языка. Поэтому невозможно составление сводной таблицы по использованию различных параметров вне контекста их применения. Например, параметр ALIGN только в таблицах используется в трех различных вариантах:
Альтернатива табличному представлению
Поддержка таблиц стала широко распространенным свойством Web-браузеров, так что практически не осталось причин, из-за которых следовало бы избегать их использования. Тем не менее рассмотрим возможные варианты альтернативного представления данных, которые можно использовать вместо таблиц или в добавление к ним.
Некоторые иные способы, не использующие понятие таблиц:
Подготовка таблиц
Для подготовки HTML-таблиц могут быть использованы любые редакторы, большинство из которых имеют средства для визуального создания таблиц. Приведем пример подготовки таблицы в редакторе HotDog Professional. Для создания таблицы достаточно выбрать пункт Tables из меню Insert, после чего будет выдано диалоговое окно, показанное на рис. 4.19. Создание таблицы заключается в заполнении соответствующих полей в окне. После определения количества строк и столбцов в таблице можно перейти к непосредственному заполнению отдельных ячеек таблицы, которые будут показаны в этом же диалоговом окне. Диалоговое окно имеет кнопку Preview, нажатие которой позволяет просмотреть получаемую таблицу при помощи встроенного браузера (рис. 4.20).
Рис. 4.19.
Диалоговое окно для создания таблиц
Рис. 4.20.
Таблица, показанная при помощи встроенного браузера
После завершения подготовки данных для таблицы следует нажать кнопку ОК. Тогда сгенерированный код описания таблицы будет вставлен в редактируемый HTML-документ. Для примера, приведенного на рис. 4.19, будет сгенерирован следующий код:
(часть кода опущена)
Аналогичным образом данная задача решается при использовании компоненты Netscape Composer программы Netscape Communicator. На рис. 4.21 показано диалоговое окно, в котором необходимо заполнить нужные поля. Для ввода дополнительных параметров тега Рис. 4.21.
Диалоговое окно для задания параметров таблицы программы Netscape Composer
Рис. 4.22.
Исходная позиция курсора ввода в пустой таблице
Именно над этими вопросами размышляет И.А.Ильин в своём тексте. В нём писатель ставит нравственную проблему духовной бедности человека.Автор, рассуждая по данной теме, опирается на собственные рассуждения. В наше время многие люди...
Казалось бы, понятия "Италия" и "Православие" на первый взгляд несовместимые. Италия на протяжении тысячи лет является центром и оплотом Католической церкви. Отсюда веками раздавались призывы об обращении в "истинную католическую веру". Но...
1916 – 1917 1918 1919 – 1920 См. также: Другие события в 1918 году В 1918 году были различные научные и технологические события, некоторые из которых представлены ниже. Содержание 1 События … Википедия
1916 1917 1918 1919 1920...
عهدنامه گلستان
) - договор между Российской империей и Персией (Ираном), подписанный 12 (24) октября 1813 года в селении Гюлистан (Карабах) после окончания русско-персидской войны 1804-1813 годов .Договор был подписан от имени Российской...
Б.Х. Миних. Гравюра первой половины 1840-х гг.Миних Бурхард Кристоф (Христофор Антонович) (1683 — 1767), русский генерал-фельдмаршал (1732). До 1721 служил инженером во французской, гессен-дармштадтской, гессен-кассельской и...
Как учит Церковь, каждый человек сотворен по образу и подобию Божиему.
Вследствие грехопадения образ Божий в человеке был искажен.
Цель жизни христианина - восстановление в себе образа Божиего, уподобление Богу.
В Новом Завете святыми...
. Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге
могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры NetScape
иMicrosoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры HEIGHT и BGCOLOR. Отдельные браузеры позволяют также задавать и другие параметры. Рассмотрим назначение общеупотребительных параметров тега
.
параметр BORDER, который может иметь численное значение.
или
.
. Форма записи:
WIDTH=num или WIDTH=num%, где num - численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
.
определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения - LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания - CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в тэге
не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тег
. Оба примера при просмотре на полном экране выглядят одинаково, за исключением заголовка, который в первом случае расположен посередине
двухколонного списка, а во втором - располагается посередине всех трех колонок таблицы. Однако при уменьшении области просмотра в последнем примере никакая часть текста не может перейти ниже таблицы, тем самым нарушив ее структуру.
с параметром CLEAR так же, как это выполняется для . Если параметр ALIGN опущен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тегов
взрослого
Указанные 43 наиболее часто встречаемых имени
охватывают 92% выборки.
. Использование таблицы для вывода списка - это один из способов принудительного расположения списка в несколько колонок, что также иллюстрирует данный пример. Текст, расположенный справа от таблицы, может весь там не поместиться, при этом он будет продолжен после таблицы. Попробуйте на данном примере уменьшать ширину окна просмотра браузера, и в какой-то момент весь текст окажется снизу таблицы. Напомним, что для принудительного прерывания обтекания текста вдоль таблицы (например, если последующий текст логически не связан с таблицей и должен располагаться ниже ее) следует воспользоваться кодом
с установленным параметром CLEAR. Для данного примера нужно записать
или
. Некоторые браузеры разрешают запись параметра CLEAR без значения, но этого делать не рекомендуется. Для осуществления той же задачи задание нескольких переводов строки
без параметра CLEAR
(как это сделано в примере перед текстом для его сдвига вниз на несколько строк)
или нескольких кодов начала нового абзаца
Наиболее употребительные мужские имена
Указанные 43 наиболее часто встречаемых имениохватывают 92% выборки.
Частота встречаемости каждого из остальных
имен не превосходит 0.3%
,
, коды
заголовков - от до
, теги форматирования символов - <В>, , , , , ,
, тэгивставки графических изображений , гипертекстовых ссылок <А> и т. д. Сразу же подчеркнем, что область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тэга. Например, если внутри ячейки определен цвет текста -
, и . Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для и CENTER для ). Параметр вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию - MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки может быть определены свои параметры, переопределяющие действие параметров, заданных в .
Ячейка
1
Ячeйкa 2
Ячейка
3
Ячeйкa 4
Ячейка 5
Ячейка 6
, и . Следует избегать неоправданного применения этого параметра, так как это может значительно сократить возможности динамического изменения размеров таблиц и ухудшить их восприятие. В большинстве случаев достаточно применить NOWRAP для отдельных ячеек, действительно требующих запрещения переноса слов на новую строчку. Перенос слов осуществляется только по разделителям между словами (пробелам), и в ряде случаев для запрещения разрыва текста в отдельных местах следует вместо символа пробела задавать код неразрывного пробела (NonBreaking Space). В качестве примеров можно привести случаи, где разрыв не рекомендуется - между числовым значением и единицами измерения данной величины; между фамилией и инициалами. Так, текст 650 км или Ельцин Б.Н. рекомендуется записывать
в виде
650 км
и
Ельцин Б.Н.
и . Их синтаксис аналогичен синтаксису этих параметров для тега . Их
значение
определяет ширину или высоту ячейки, для которой записаны данные параметры. Значения могут задаваться в пикселах или в процентах от размеров всей таблицы. Microsoft Internet Explorer разрешает задавать значение WIDTH только в пикселах. Поскольку таблица представляет собой связную структуру, состоящую из строк и колонок, то задание ширины для какой-либо ячейки влияет на ширину всей колонки, в которой расположена ячейка, а задание высоты влияет на всю строчку. Если в колонке значение ширины указано лишь в одной ячейке, то данное значение становится шириной всей колонки. Если таких указаний несколько, то выбирается максимальное значение. Те же свойства характерны и для строк.
или . Форма записи:
COLSPAN=num, где num - числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение параметра ROWSPAN аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали. По умолчанию для этих параметров устанавливается значение, равное единице. Допустимо одновременное задание значений обоих параметров для одной ячейки. Правильная установка значений этих параметров может оказаться не очень простой задачей, тем более, что большинство HTML-редакторов позволяют визуально конструировать с последующей генерацией HTML-кодов лишь простейшие таблицы.
Ячейка, захватывающая две строки
Ячейка, захватывающая два столбца
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 1
Ячейка 2
(распространенная
Ha три
строчки)
Ячeйкa 4 Ячейка 5
Ячейка 6
Ячейка 7 (распространенная на два столбца)
,
, и . Эта возможность не предусматривается спецификацией HTML, однако поддерживается как Netscape, так и Microsoft Internet Explorer. Форма записи такая же, как и для тега , а именно:
BGCOLOR=значение, где в качестве значения задается содержание цвета в RGB-формате или его название.
или
.
Города Ленинградской области
Город
H P Зeлeнoгopcк 13.6
Koлпинo 144.6
Кронштадт
45.2
Ломоносов
42.0
Пaвлoвcк 25.4
Петродворец
83.8
Пушкин
95.1
Сестрорецк
34.9
администрации
Санкт-Петербурга
,
имеют
прямые
гopoдcкиe
тeлeфoнныe номера.
Город
H P Бокситогорск
21.6
Boлxoв 50.3
Bceвoлoжcк 32.9
Выборг
80.9
130 Высоцк
1.0
Гатчина 80.9
46 Ивангород
11.9
Каменногорск 5.9
157 Кингисепп 51.5
Кириши 53.8
Кировск
23.8
Лодейное Поле
27.3
Лyгa 41.8 139
Город H P Любань
4.7
Новая
Ладога 11.2
Отрадное
22. 9
Пикалево 25.1
Пoдпopoжьe
23.1 285 Приморск
6.7 137 Приозерск
20.5
Светогорск
15.8
Сланцы
42.6
Сосновый
Бор 57.6
Тихвин
72.0
Тосно
33.8
Ш
лиcceльбypг 12.5
и не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки
, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному. Браузер Netscape пустую ячейку не показывает, т. е. место, где располагается данная ячейка, будет закрашено цветом фона страницы, а не цветом фона ячейки в отличие от ячеек, содержащих данные. Вокруг пустых ячеек не прорисовывается рамка. Пример таблицы с пустой ячейкой приведен на рис. 4.15.
. Однако чаще необходимо обеспечить одинаковое выравнивание для всех элементов одного столбца, так как в большинстве случаев в столбце располагаются однородные данные. В ранних версиях HTML для этого предлагалось использовать параметр COLSPEC (COLumn SPECification), который задавался в тэге и определял выравнивание и ширину каждой колонки таблицы. Для примера, задание
colspec="L40 R50 C80" определяло для трех колонок таблицы выравнивание данных в ячейках: для первой колонки - LEFT,
для второй - RIGHT и для третьей
- CENTER, а
также
ширину
каждой колонки. По мере развития языка HTML от использования этого параметра отказались, и в настоящее время он не входит в спецификацию языка и не поддерживается большинством браузеров. В итоге для решения такой задачи в Netscape Navigator не имеется специальных средств, и единственным вариантом остается либо использование выравнивания по умолчанию, либо задание соответствующих значений в каждой ячейке, где это необходимо.
перед первым появлением тега
.
, из которого виден смысл объединения в группы.
,
, и . В качестве значения этих параметров может использоваться название цвета или его шестнадцатеричное значение. Параметр BORDERCOLOR определяет цвет всех элементов рамок таблицы, а другие два параметра задают цвет отдельных составляющих рамок, переопределяя значение BORDERCOLOR. Параметр BORDERCOLORLIGHT окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки. Второй параметр BORDERCOLORDARK задает цвета противоположных краев. За счет сочетания действия этих параметров таблица будет выглядеть несколько приподнятой над поверхностью страницы или углубленной. Все зависит от выбранного сочетания цветов.
,
и .
и
.
, а линий сетки таблицы - параметром RULES. Например, становится возможным провести только вертикальные линии между колонками и вместо рамки вокруг всей таблицы дать горизонтальные линии сверху и снизу таблицы.
.
. При отсутствии этого параметра или его нулевом значении линии сетки и рамки будут отсутствовать при любых значениях параметров FRAME и RULES.
сетки таблицы
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные Данные Данные Данные Данные Данные Данные Данные
Данные Данные Данные Данные Данные Данные Данные Данные Данные Данные Итог
Итог
Итог
параметр COLS, значение которого определяет число столбцов в таблице. Запись этого параметра позволяет ускорить процедуру верстки таблицы при отображении в браузере, так как появляется возможность определить количество столбцов до окончания загрузки кода описания таблицы. На текущий момент включение этого параметра никак не влияет на ход загрузки документа.
, свойственный только Microsoft Internet Explorer, это - VALIGN, определяющий вертикальное выравнивание таблицы относительно текста. Его действие подобно такому же параметру для изображений.
параметр ALIGN может принимать значения LEFT или RIGHT, и означает расположение таблицы, прижатой к левому или правому краю соответственно;
, и параметр ALIGN принимает значения LEFT, RIGHT или CENTER, и означает выравнивание содержимого соответствующей ячейки (или ячеек) таблицы по горизонтали.
Cтoлбeц 1
Столбец 2
Cтoлбeц 3
Столбец 4
1
2
3
4
предусмотрена кнопка Extra HTML. После заполнения полей диалогового окна следует нажать кнопку Apply и тогда будет предоставлена возможность заполнения ячеек таблицы (рис. 4.22).
Похожие статьи
Что есть бедный, а что есть богатый внутренний мир?
Беседа с настоятелем прихода святых жен-мироносиц в венеции священником алексием ястребовым Приход святых жен мироносиц в венеции
Смотреть что такое "1918 год" в других словарях
Гюлистанский договор 1813
Фельдмаршал миних бурхард кристоф Правление Екатерины I и Петра II
Кого и почему церковь причисляет к лику святых?