# 1 (13)
23 января 2003г.
|
Проект веб-дизайн студии
"STEP BY STEP"
Количество подписчиков = 2500
|
Здравствуйте уважаемые подписчики! После некоторого перерыва мы снова начинаем обучаться HTMLу, и начнем
этот урок с обзора прошлогодней рассылки. Мы рассматривали такие темы:
Номер 12 - История про CSS (часть II) - 07.07.2002
Номер 11 - История про CSS (часть I) - 03.06.2002
Номер 10 - Фреймы - это легко и модно! - 11.05.2002
Номер 9 - "Винницкий интернет: начало расследования" - 11.04.2002
Номер 8 - Бросаем якоря! - 07.04.2002
Номер 7 - Выбор имен! - 31.03.2002
Номер 6 - Списки! - 23.03.2002
Номер 5 - Форматирование шрифта 2! - 18.03.2002
Номер 4 - Форматирование шрифта! - 10.03.2002
Номер 3 - Атрибуты тега <img> - 03.03.2002
Номер 2 - Второе знакомство с HTML! - 24.02.2002
Номер 1 - Первое знакомство с языком HTML! - 16.02.2002
Заходите на наш сайт
http://web.pmg17.vn.ua и вы найдете там много интересного. Вот кратенькое описание содержимого нашего проекта:
1. Раздел "HTML от А до Я" состоит из серии 9-ти уроков, которые помогут вам создавать ваши первые страницы.
2. В разделе "Поговорим о CSS" можна узнать о технологии таблиц каскадных стилей,
которые в основном применяются на больших сайтах.
3. У нас представлен весь архив этой рассылки "HTML для начинающих", с 1-го по 13-й номер.
4. Для пользователей, любящих красоту на рабочем столе - рисунки для рабочего стола
(Wallpappers) .
5. В разделе "Портфолио" вы сможете увидеть список работ, выполненных нашей веб-студией.
6. Для веб-мастеров появилось очень интересное собрание CGI-скриптов.
7. А для любителей пообщаться есть: чат,
гостевая книга, опрос.
Ну а начнем мы сегодня разговор про таблицы. И сразу рассмотрим пример.
<html>
<head>
<title>Название документа</title>
</head>
<body>
< !-- левый ярлык с параметрами для
начала таблицы -->
<table boarder=1 cellpadding=3 cellspacing=3>
<!-- заглавление таблицы и размер
заглавления-- >
<caption align=top >Название таблицы
</caption>
<tr>
<td>.....</td>
<td>.....</td>
<td>.....</td>
</tr>
<tr>
<td>.....</td>
<td>.....</td>
<td>.....</td>
</tr>
<tr>
<td>.....</td>
<td>.....</td>
<td>.....</td>
</tr>
</table>
</body>
</html>
Этот пример -
типичная таблица. Итак, определение
таблицы начинается с ярлыка
<table>, а заканчивается </table>.
Дополнительные параметры,
вписаные в левый ярлык, придают
таблице специфический вид. Так,
параметр BORDER (граница) определяет
ширину рамки таблицы по периметру (
ширина рамки выражается в пикселях
). Если этот параметр отсутствует,
то таблица не будет иметь внешней
окантовки. CELLSPACING определяет
толщину разделительных перегородок
между ячейками, а CELLPADDING определяет
пространство между ячейками и её
данными. Поэкспериментировав с
цифрами, вы можете получить весьма
занятные конфигурации таблиц. Кроме того, вы можете вставлять и стандартные параметры, о которых говорилось в уроке 1. Например bgcolor="#000000" даст вам таблицу с чёрным фоном, а bordercolor="#cccccc" даст вам серую рамку. Эти параметры можно применять и отдельно для каждой ячейки.
Между ярлыками
<caption> и </caption> ( заглавие )
располагается название таблицы , но
этот ярлык вставлять не
обязательно. В левом ярлыке
<caption> вы видели, что слово ALIGN
приравненно к значению TOP( верх ).Это
значит , что надпись будет будет
распологаться над таблицей.При
желании мы могли поставить ALIGN в
значение BOTTOM ( низ ). Так же ALIGN имеет
значения CENTRE ( по центру ), LEFT ( слева
), RIGHT( справа ).
Далее для
определения таблицы необходимо
описать каждый её ряд.В нашем
примере таблица имеет 3 ряда и 3
колонки, соответственно 3 блока
описания , т.к. мы описываем ряды.
Каждый ряд описывается в пределах
ярлыка <tr>..</tr>Между ярлыками
<td>...</td> следует располагать
данные одной ячейки ( в нашем
примере 3 ячейки в одном ряду, и
поэтому в каждом блоке 3 раза
встречается ярлык <td>).Таким
образом каждая ячейка описывается
отдельно.
HTML даёт вам возможность создавать так называемые "неправильные" таблицы. Например вы можете создать вот такую таблицу:
| ячейка 1
|
ячейка 2
|
|
ячейка 3
|
Такого эффекта можно добиться с помощью параметра отдельной ячейки : colspan=" " или rowspan=" " .Этой теме будет предоставлена отдельная статья.
Вот и все азы,
чтобы составить элементарную
таблицу на вашей странице. Конечно в
таблице имеются доп. ярлыки.
|
