Простой таблицы

Любая таблица в HTML начинается с элемента-контейнера < TABLE >, содержащего все элементы, необходимые для ее создания.

< TABLE>

<! --Здесь будет размещено описание таблицы -->

< /TABLE>

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

Таблица с ячейками, заполняемыми текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца < TH > и заголовок всей таблицы < CAPTION >.

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

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

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

< TABLE ALIGN=" center" BORDER=" 2" BORDERCOLOR=" blue"

WIDTH=" 50%" >

<! --Здесь будет размещено описание таблицы -->

< /TABLE>

В приведенном примере таблица помещается в центре страницы, толщина рамки составляет 2 пиксела, цвет рамки – голубой, ширина таблицы составляет 50 % от размера окна браузера.

Таблица 3.1

Атрибуты тега < TABLE >

Пример 2. Дана текстовая таблица «Состав семьи» с заголовками столбцов (рис. 3.3), которую необходимо создать в HTML.

Состав семьи

Рис. 3.3. Таблица для примера 2

Результат решения данного примера приведен ниже на языке HTML, результат отображения в браузере представлен на рис. 3.4.

< HTML>

< HEAD> < TITLE> пример создания таблицы пример 2< /TITLE>

< /HEAD>

< BODY>

< TABLE BORDER =" 1" >

< CAPTION ALIGN=" top" > Состав семьи < /CAPTION>

< TR> < TH> Члены семьи < /TH> < TH> Год рождения < /TH>

< TH> Место работы(учебы) < /TH> < /TR>

< TR> < TD> Папа < /TD> < TD> 1965 < /TD> < TD> БСМП < /TD> < /TR>

< TR>

< TD> Мама < /TD> < TD> 1968 < /TD> < TD> маг-н «Эльдорадо»

< /TD> < /TR>

< TR>

< TD> Лена (дочь) < /TD> < TD> 1992 < /TD> < TD> Сиб ГАУ < /TD>

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Рис. 3.4. Отображение таблицы примера 2 в браузере

Задание цвета. Наиболее привлекательной таблица становится, когда в ней появляется цветовое оформление. Рассмотрим возможности задания цвета для элементов таблицы: рамок, фона, строк, ячеек и т. д. Задание цвета рамок уже было рассмотрено в примере 1. Там был использован атрибут BORDERCOLOR в теге < TABLE >, который задавал цвета внешней рамки и внутренних рамок таблицы.

Например, таблица будет отображена с зелеными рамками, если записать тег следующим образом:

< TABLE BORDERCOLOR=" green" BORDER=" 5" >

При этом толщина внешней рамки будет равна 5 пикселам, а внутренних рамок – 1 пикселу.

Цвет внутренних границ, как и цвет внешней рамки, устанавливается атрибутом BORDERCOLOR, который помещается в теги < TR>, < TH> или < TD>. Например, тег < TR BORDERCOLOR=" red" > задает красные границы всех ячеек строки, а желтые границы ячеек заголовков определяются тегом < TH BORDERCOLOR=" yellow" >.

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

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

< TABLE BORDERCOLORDARK=" brown"

BORDERCOLORLIGHT=" yellow" BORDER=" 5" >

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

Если атрибуты BORDERCOLORDARK и BORDERCOLORLIGHT ввести в состав тегов < TR >, < TD > или < TH >, то можно оттенить внутренние границы ячеек.

Для изменения цвета фона в таблицах используется атрибут BGCOLOR. В зависимости от того, в какие теги (< TABLE > < TR >, < TD > или < TH >)входит BGCOLOR, то получится четыре варианта задания цвета: фона всей таблицы, фона строки, фона ячейки заголовка или фона данных. Например, тег < TABLE BGCOLOR=" red" > назначает красный фон всей таблицы, а желтый фон ячейки задает тег < TD BGCOLOR=" yellow" >.

Пример 3. Создать таблицу в HTML (рис. 3.5), в ячейках которой будут отображены цвета радуги.

Радуга

Рис. 3.5. Таблица для примера 3

Результат решения данного примера приведен ниже на языке HTML, результат отображения в браузере представлен на рис. 3.6.

< HTML>

< HEAD>

< TITLE> пример создания таблицы, в которой

показаны цвета радуги (пример 3)

< /TITLE>

< /HEAD>

< BODY>

< CENTER>

< FONT COLOR=" red" SIZE=" 5" > Радуга< /FONT> [i]

< TABLE WIDTH=" 40% " BORDER=" 3" CELSPACING=" 15"

CELLPADING=" 10" BORDERCOLOR=" tomato" >

< TR> < TD BGCOLOR=" #ff3030" ALIGN=" center" > Красный

< TR> < TD BGCOLOR=" #ffd000" ALIGN=" center" > Оранжевый

< TR> < TD BGCOLOR=" #f3ff5f" ALIGN=" center" > Желтый

< TR> < TD BGCOLOR=" #00ff00" ALIGN=" center" > Зеленый

< TR> < TD BGCOLOR=" #сfd3f7" ALIGN=" center" > Голубой

< TR> < TD BGCOLOR=" #5f2ff0" ALIGN=" center" > Синий

< TR> < TD BGCOLOR=" #b568f4" ALIGN=" center" > Фиолетовый

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Рис. 3.6. Отображение таблицы примера 3

Пример 4. Создайте простую таблицу, фон которой отличается от фона web-страницы (рис. 3.7).

Рис. 3.7. Отображение в браузере таблицы примера 4

< HTML> < HEAD> < TITLE> простая таблица (пример 4) < /TITLE>

< /HEAD>

< BODY BGCOLOR=" red" >

< H2 ALIGN=" center" > Простая таблица< /H2>

< CENTER> < TABLE BGCOLOR=" greenyellow" BORDER=" 5" >

< CENTER> < CAPTION> Заголовок таблицы< /CAPTION>

< TR> < TD> ОДИН< /TD> < TD> ДВА< /TD> < /TR>

< TR> < TD> ТРИ< /TD> < TD> ЧЕТЫРЕ< /TD> < /TR>

< /TABLE> < /CENTER> < /CENTER>

< /BODY>

< /HTML>