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 |
|
|