WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Советы » Урок6 Таблицы

Урок6 Таблицы


Дата публикации: 20-06-2008

What is Таблица? - одним из самых наиболее мощных и широко применяемых элементов в HTML - является таблица/ы. Таблицы используются не только традиционно, как метод представления информации, но и как средство оформления WEBстраниц. Напомню там мы изучали ссылки/links.

<теория>

Таблица объявляется с помощью тэгов:

[TABLE создаёт таблицу] [CAPTION задаёт заголовок таблицы] [TR создаёт новый ряд (строку) ячеек таблицы] [TD и TH  создаёт ячейку с данными в текущей строке]

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

<TABLE BORDER>
    <TR>
        <TD>ячейка1.1</TD> <TD>ячейка1.2</TD> <TD>ячейка1.3 </TD>
    </TR>
    <TR>
        <TD>ячейка2.1</TD> <TD>ячейка2.2</TD> <TD>ячейка2.3 </TD>
    </TR>
</TABLE>

Результат:

ячейка1.1

ячейка1.2

ячейка1.3

ячейка2.1

ячейка2.2

ячейка2.3

 

Рассмотрим элементы(теги) таблицы.

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

ALIGN Горизонтальное выравнивание таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN Вертикальное выравнивание содержимого таблицы. Возможные значения: top, bottom, middle.
BORDER Ширина внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
CELLPADDING Расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащейся в ней инфе.
CELLSPACING Расстояние (в пикселах) между  границами соседних ячеек.
WIDTH Ширина таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT Высота таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR Цвет фона ячеек таблицы. 
BACKGROUND Фоновый рисунок таблицы .

Результат:
Живность Музыкальные Кактусы смотреть...
Домашние крокАдилы смотреть...

Элемент CAPTION
Тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр <ALIGN>.
Атрибуты:

top помещает заголовок над таблицей (значение по умолчанию)
bottom помещает заголовок под таблицей

Код HTML:
<TABLE BORDER="1">
    <CAPTION ALIGN="bottom">Заголовок таблицы</CAPTION>
    <TR>
        <TD>Ячейка таблицы</TD>
    </TR>
</TABLE>

Элемент TR
Table Row с ненашенского - создаёт новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Атрибуты:

ALIGN определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right
VALIGN определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle
BGCOLOR определяет цвет фона для всех ячеек данного ряда

Элементы TD и TH
Table Data & Table Head - элемент TD создаёт ячейку с данными в текущей строке. Элемент TH также создаёт ячейку, но определяет её как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами.Текст находящийся между тэгами <TH></TH> отображается жирным шрифтом, т.е. <TH>текст</TH> равносильно <TD><b>текст</b></TD>

Атрибуты:

ALIGN определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование
VALIGN определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR
WIDTH определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы
HEIGHT определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы
COLSPAN определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1
ROWSPAN определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1
NOWRAP блокирует автоматический перенос слов в пределах текущей ячейки
BGCOLOR определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов
BACKGROUND заполняет ячейку фоновым рисунком

<практика>

[шаг 1. как и в предыдущих уроках...откройте обычный блокнот и т.д ...]

[шаг 2. скопируйте код и сохраните его как в предыдущих занятиях, в полученном документе вы увидите пример простой таблицы.]

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



Случайная цитата

Альфонс Карр:

"Чтобы заработать на жизнь, надо работать. Но чтобы разбогатеть, надо придумать что-то другое."

Опрос

Ваша техника?

Настольный компютер
Ноутбук
Смартфон
iPad
iPhone
другое