| NFL | Дата: Четверг, 26.06.2008, 18:56 | Сообщение # 1 |
Главный администратор
Группа: Пользователи
Сообщений: 733
Статус: Offline
| Прежде чем преступить к изучению приемов и хитростей создания таблиц, остановимся вкратце на том, как вообще создать таблицу в HTML. Если вы уже умеете создавать простые таблицы в HTML, то можете смело пропустить эту часть. Итак, прежде чем рассматривать теги HTML, которые принимают участие в создании таблиц, давайте сначала уясним общую схему создания. Любая таблица создается по следующей схеме:
<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ> <ОТКРЫВАЮЩИЙ ТЕГ РЯДА> <ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
Текст,картинки или таблицы
<ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ> <ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>
Любая таблица состоит из рядов, которые состоят из ячеек (столбцов). Внутри ячеек содержится информация, выводимая внутри таблицы. Как видно из приведенной схемы для создания простой таблицы, состоящей из одного ряда и одной ячейки нужно открыть таблицу, открыть ряд, открыть ячейку, а затем закрыть ячейку, закрыть ряд и закрыть таблицу. Чтобы создать таблицу состоящую из одного ряда, в котором находятся две ячейки, нужно просто между открывающим и закрывающим тегами ряда таблицы вставить два тега ячеек (открывающий и закрывающий) вместо одного. Давайте рассмотрим создание таблиц на простом примере. Наша таблица будет состоять из трех рядов, в каждом ряде будет три ячейки (столбца). Первый столбец будет называться "Товар", второй - "Цвет", а третий - "Цена". Вот как может выглядеть наша таблица:
Товар |
Цвет |
Цена (руб.) |
Карандаш |
Синий |
1 |
Шариковая ручка |
Черный |
5 |
Code <TABLE> - открывающий тег таблицы
<TR> - открывающий тег ряда 1
<TD>Товар</TD> - открывающий и закрывающий теги ячейки 1
<TD>Цвет</TD> - открывающий и закрывающий теги ячейки 2
<TD>Цена (руб.)</TD> - открывающий и закрывающий теги ячейки 3
</TR>
<TR>
<TD>Карандаш</TD>
<TD>Синий</TD>
<TD>1</TD>
</TR>
<TR>
<TD>Шариковая ручка</TD>
<TD>Черный</TD>
<TD>5</TD>
</TR>
</TABLE> - закрывающий тег таблицы
Как вы уже поняли, открывающим и закрывающим тегами таблицы являются теги , открывающим и закрывающим тегами ряда являются теги , а открывающим и закрывающим тегами ячейки (колонки) таблицы являются теги Как видно из комментария к примеру в первой строке открывается таблица, а во второй строке открывается первый ряд таблицы. Далее идут три строки представляющие три ячейки таблицы. В каждой строке открывается ячейка таблицы, затем идет содежание этой ячейки и в конце ячейка закрывается. В шестой строке HTML кода закрывается первый ряд таблицы. Затем все повторяется еще два раза - открытие ряда (7 строка), три ячейки с содержимым (8-10 строки), закрытие ряда (11 строка) и т.д. В последней строке HTML кода таблица закрывается. Прежде чем усложнять примеры и изучать приемы использования таблиц, применяемые при создании HTML страниц, давайте рассмотрим основные параметры тегов Существует ряд параметров, которые идентичны во всех трех тегах с той лишь разницей, что область их действия распространяется на всю таблицу, при применении данного параметра в теге , на ряд таблицы при применении в теге и на отдельную ячейку при применении в теге . (если вы знакомы с параметрами тегов таблицы, можете пропустить эту часть) Вот эти параметры и их описание:
BGCOLOR
Название или шестнадцатиричное представление цвета, который будет использован в качестве цвета фона таблицы, ряда или отдельной ячейки. BACKGROUND
Путь и название картинки, которая будет использована в качестве фона ячейки таблицы. Если вы укажите этот параметр в теге , то ваша данная картинка будет использована в качестве фона каждой ячейки, если параметр указан в теге , то во всех ячейках этой строки и если в теге | , то в конкретной ячейке. WIDTH
Ширина таблицы, строки или отдельной ячейки в пикселах или в процентах. На самом деле использование этого параметра в теге ничем не отличается от его использования в теге , так как ширина таблицы равняется ширине ряда. В HTML нельзя создать таблицу с рядами разной ширины. Если ширина задана в пикселах (например WIDTH=100), то ширина задается в пикселах - самая маленькая точка экрана при заданном разрешении. Например, если разрешение вашего монитора 800х600 пикселов, то максимально широкая таблица, которая вместится в ваш экран - 800 пикселов. Если же ширина задается в процентах (например WIDTH=50%), то ширина задается в процентах от ширины экрана или от ширины ячейки другой таблицы, в которую вставляется данная таблица. HEIGHT
Высота всей таблицы, ряда таблицы или отдельной ячейки заданная в пикселах или в процентах. Высота отдельной ячейки и высота ряда таблицы обычно одинаковы.
BORDER
Толщина бордюра вокруг таблицы в пикселах. При указании нулевого значения параметра BORDER (BORDER=0) бордюра не будет. ALIGN
Размещение таблицы на странице или внутри ячейки другой таблицы в случае, если таблица вставлена в ячейку другой таблицы. Возможные значения параметра ALIGN - center (выравнивание таблицы по центру), left (выравнивание по левому краю) и right (выравнивание по правому краю). CELLPADDING
Ширина отступа от края ячейки до содержимого ячейки внутри всех ячеек таблицы в пикселах. CELLSPACING
Ширина отступа между ячейками таблицы в пикселах.
Пример:
Code <TABLE BORDER=0 WIDTH=100% CELLSPACING=1
CELLPADDING=5 BGCOLOR=blue>
<TR BGCOLOR=yellow>
<TD>Товар</TD>
<TD>Цена</TD>
</TR>
<TR BGCOLOR=white>
<TD>Карандаш</TD>
<TD>1 рубль</TD>
</TR>
</TABLE>
Результат:
CELLPADDING=5 BGCOLOR=blue>
Товар |
Цена |
Карандаш |
1 рубль |
COLSPAN
Объединение нескольких ячеек в одном ряду таблицы в одну ячейку. Значение этого параметра означает количество ячеек, которые нужно объединить. Ниже приводится отрывок HTML кода представляющего только последний ряд таблицы из нашего примера:
Code <TR>
<TD COLSPAN=3 BGCOLOR=red>
<FONT COLOR=white>Итого: 10 руб.</FONT>
</TD>
</TR>
ROWSPAN
Объединение нескольких ячеек в одном столбце таблицы в одну ячейку. Значение этого параметра означает количество ячеек, которые нужно объединить. Ниже приводится полный HTML код приведенной выше таблицы из нашего примера:
Code <TABLE BORDER=1>
<TR BGCOLOR=navy>
<TD><FONT COLOR=white>№</FONT></TD>
<TD><FONT COLOR=white>Наименования</FONT></TD>
<TD><FONT COLOR=white>Цена (руб.)</FONT></TD>
<TD ROWSPAN=4 BGCOLOR=white>
т<BR>о<BR>в<BR>а<BR>р<BR>ы
</TD>
</TR>
<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>1</FONT></TD>
<TD><FONT COLOR=blue>Карандаш</FONT></TD>
<TD><FONT COLOR=blue>1</FONT></TD>
</TR>
<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>2</FONT></TD>
<TD><FONT COLOR=blue>Ручка шариковая</FONT></TD>
<TD><FONT COLOR=blue>5</FONT></TD>
</TR>
<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>3</FONT></TD>
<TD><FONT COLOR=blue>Тетрадь</FONT></TD>
<TD><FONT COLOR=blue>4</FONT></TD>
</TR>
</TABLE>
В последующих лекциях будут рассмотрены остальные теги и свойства таблиц.
|
| |
| |
| Солнышко | Дата: Четверг, 26.06.2008, 20:25 | Сообщение # 2 |
Рядовой
Группа: Проверенные
Сообщений: 47
Статус: Offline
| Quote (NFL) В последующих лекциях будут рассмотрены остальные теги и свойства таблиц.
Спасибо большое! Я думаю, что эти уроки пригодятся не только мне, но и многим чайничкам!! 
ГОТОВИМ САМИ
Самый лучший друг - книга: не нудит, жрать не просит, сигареты не стреляет.
|
| |
| |
| |
| Copyright NFL © 2024 |
 |
|
