sonyps4.ru

Таблица html5 примеры. Атрибуты АLIGN и VALIGN

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

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

Для группирования столбцов применяется пустой тег

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

Элементы

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

С помощью атрибута border элемента

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

Объединение ячеек

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

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

Группирование строк и столбцов

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

Популяция фруктовых мух

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

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

Приведенный выше пример таблицы формируется приблизительно таким кодом:

и . Присвоив ячейке атрибут colspan="3" , вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента (или ) меньше.

Объединение ячеек в таблице

Аналогично, атрибут rowspan="2" , например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе

Средний Красноглазых
Размер Вес
Среднее 1.8 0.0025 41.5%
Самцы 1.9 0.003 40%
Самки 1.7 0.002 43%

Если вы используете

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

На самом деле,

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

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

Размещая последовательно несколько элементов

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

Атрибут scope элемента

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

Элементы

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

7 комментариев

По сравнению с html4.1 изменений я не заметил.

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

  • В элементе остался только атрибут border , причем всего с двумя допустимыми значениями ("1" и "");
  • , , , лишены всех атрибутов;
  • В элементах
    • и оставлен только атрибут span ;

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

    P.S. Есть некоторые дополнения в DOM. В частности, у элемента

    ,
    , оставлена только поддержка colspan , rowspan и headers (и еще scope для );
  • В элементах
    • появился новый метод createTBody() .

    createTBody() - это типо создает тело таблицы как я понял?

    Верно, создает элемент

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

    Var tbody = table.createTBody();

    А как расчертить таблицу? Максим, ваш вопрос не совсем понятен. Для визуального оформления используйте CSS. До данной главы всё предельно понятно было, а с таблицами не пойму что к чему. :( содержит строки, который представлены элементом tr . А каждая строка между тегами и содержит ячейки в виде элементов td .

    Создадим простейшую таблицу:

    Таблицы в HTML5

    Модель Компания Цена
    Nexus 6P Huawei 49000
    iPhone 6S PLus Apple 62000
    Lumia 950 XL Microsoft 35000

    Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

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

    Популярные смартфоны 2015
    Модель Компания Цена
    Nexus 6P Huawei 49000
    iPhone 6S PLus Apple 62000
    Lumia 950 XL Microsoft 35000
    Информация по состоянию на 17 марта

    В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td , а th . Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody

    Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.

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

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

    Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:

    Таблицы в HTML5

    1 2 3
    4 5
    6 7

    Задача

    Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

    Решение

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

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

    3. Как сделать ячейку заголовка столбца таблицы

    4. Как сделать ячейку тела таблицы

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

    Элемент должен быть использован в следующем порядке: как дочерний элемент

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

    Пример 1. Создание таблицы

    HTML5 IE Cr Op Sa Fx

    Тег table

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Порядок расположения ячеек и их вид показан на рис. 1.

    Рис. 1. Результат создания таблицы с четырьмя ячейками

    Атрибут border тега

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

    Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.

    Пример 2. Поля внутри ячеек

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Тег table

    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

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

    Рис. 2. Поля в ячейках таблицы

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

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

    Для всех элементов таблицы доступны , а также собственные атрибуты.

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

    • Содержание:

      • 1. Как создать таблицу

      Таблица создаётся при помощи парного тега

      Рис.1. Внешний вид таблицы без форматирования css-свойствами

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

      /* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}

      Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .

      Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

      /* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}

      Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
      padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

      2. Как создать строки (ряды) таблицы

      Строки или ряды таблицы создаются с помощью тега

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

    5. Как добавить подпись (заголовок) к таблице

    Создает подпись таблицы. Добавляется непосредственно после тега

    6. Группирование строк и столбцов таблицы

    Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и

    7. Группировка разделов таблицы

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

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

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

    и .

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

    8. Как объединить ячейки таблицы

    Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.


    Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

    9. Атрибуты элементов таблицы

    Таблица 1. Атрибуты элементов таблицы

    Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
    Принимаемые значения: любое целое положительное число.
    Атрибут Описание, принимаемое значение
    colspan Количество ячеек в строке для объединения по горизонтали.
    headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
    		... ...
    rowspan Количество ячеек в столбце для объединения по вертикали.
    Возможные значения: число от 1 до 999.
    span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

    10. Пример создания таблицы


    Рис. 4. Создание меню ресторана с помощью HTML-таблицы

    Разметка HTML

    Меню ресторана "Ромашка"
    Кухня Холодные блюда Горячие блюда Десерты
    Салаты Закуски Первые блюда Вторые блюда
    Русская Винегрет Язык с хреном Щи с квашеной капустой Вареники с картошкой Печеные яблоки с медом
    Оливье Студень говяжий Рассольник домашний Караси запеченые в сметане Блинчатый пирог
    Сельдь под "шубой" Судак заливной Мясная солянка Котлеты "Пожарские" Пирожное "Картошка"
    Испанская Севиче из гребешков Эмпанадас Хлебный суп с чесноком Паэлья с морепродуктами Чуррос
    Тимбал из авокадо и тунца Ахотомате Астурийская фабада Свиное раксо Альмойшавена
    Фасоль с ветчиной Чанфайна Рыбный суп с манными клецками Тортилья картофельная Бунуэлос
    Французская Вогезский салат Рийет из курицы Баклажанный крем-суп "Ренуар" Картофель огратен Бриоши
    Салат "Панзанелла" Делисьез из сыра Французский тыквенный суп Гратин из птицы Лигурийский лимонный пирог
    Тар-тар Маринованный лосось Суп "Конти" Тартифлетт Саварен "Триумф"

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

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег 

), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.


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


Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.


Создание строки таблицы — тег <ТR>


Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.


Определение ячеек таблицы — тег <ТD>


Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

 

 
Таблица

 

 

 

 Если в таблице два
 тега TR, то в ней две строки.
 

 

 Если в строке три тега TD,
 то в ней
 три столбца.
 

 

 






Заголовки столбцов таблицы — тег <ТН>


Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

 

 

 

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

 

 Заголовок может быть расположен
 перед столбцами
 Текст или данные
 Текст или данные
 

 

 Заголовок может объединять
 строки
 Текст или данные
 Текст или данные
 

 

 Текст или данные
 Текст или данные
 

 

 Текст или данные
 Текст или данные
 

 




Использование заголовков таблицы — тег <САРТIОN>


Тег
позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Заголовок над таблицей
Текст или данные Текст или данные Текст или данные Текст или данные
Заголовок под таблицей
Текст или данные Текст или данные Текст или данные

Атрибут 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-страницах.

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

Уральский государственный педагогический университет

Добро пожаловать!

Учебный курс "Основы WEB-мастеринга"


Использование таблиц в дизайне

Создание разноцветных таблиц

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

Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.



Загрузка...

Возможно вам будет интересно:

Базовые элементы монтажа в Vegas Pro Вставка шаблонных титров
Вопрос

Базовые элементы монтажа в Vegas Pro Вставка шаблонных титров

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

Как создать, установить и поменять тему на андроид Как создать лаунчер на все телефоны
Вопрос

Как создать, установить и поменять тему на андроид Как создать лаунчер на все телефоны

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

Где и в каком виде хранится информация
Вопрос

Где и в каком виде хранится информация

Откройте окно с задачей "Мой компьютер ". Если значки в окне мелкие, то измените их на крупные. Конечно, с помощью Правила Внешнего вида!Окно задачи будет выглядеть приблизительно так, как на рисунке:В данном примере значки (C:), (D:) и (E:) обозначают ло

Реклама