Итакс вслед за Халифом я бы хотел что-то обяснить людям которые не очень хорошо знают Html язык. Обяснить основу создания тем так сказать. Итак присаживайтесь поудобнее начну свой первый урок...

УРОК ПЕРВЫЙ:

Известно что основа вед дизайна состоит из таблиц. Трудно представить каким ещё образом можно реализовать дизайн не используя их. Изначально HTML не поддерживал таблицы ни в каком виде. Несчатные Web-дизайнеры пытались как-то выйти из положения используя текст с за даным форматом и заключая его внутри тегов <PRE></PRE>. Получалось конечно некрасиво но что поделаеш. Теперь же они могут создавать какие угодно таблицы что и делают...
Сейчас таблицы используются не только для представления данных но и как элемен оформления Web-страниц. Благодоря таблицам можно очень точно позиционировать текстовые фрагменты и графику создавать элемен
ты оформления линейки и заливки - отступы и выступы почти как в печатных изданиях. Но пожалуй я больше небуду вас заморачивать всякой чепухой перейдём к практике.
И создадим Web-страницу с таблицей. Пока что достаточно простую.


Наша первая таблица будет очень проста: всего несколько строк и столбцов. И будет эта таблица умножения (заодно вспомним правила арифметики...шучу, конечно)

Назовём эту страничку tablo.html


Сохраняем как tablo.html и смотрим результат.
Конечо таблица она не очень красива, но сейчас нам важно уяснить сам принцип. А раскрасить ее мы всегда успеем. Простейшая таблица представляет собой множество вложенных друг в друга тегов, образующих сложную многоуровневую структуру. Сначала парой тегов <table> и </table> определяется сама таблица, потом внутрь вкладываются строки, определяемые парой тегов <tr> и </tr>. Внутрь каж
дой строчки вкладываются ячейки, определяемые парами тегов <td> и </td>. И если вы внимательно посмотрите на приведенный выше листинг, то увид ите все это. Собственоо, создавать простую таблицу в HTML ничего не стоит. Единственная проблема которая может при этом возникнуть - вы устаните набирать все эти бесконечные вложенные теги. В самом деле сравните обьем текста листинга и размеры получившейся таблички. Но HTML-редакторы, работающие по принцепу WYYSIWYG, вам помогут...
Итак, разберемся, какими тегами формируется таблица.


Тег таблицы имеет следующий формат:
<table border="x"> - атрибут border задает толщину рамки таблицы
в пикселях. Если он отсутствует, рамка не видна, но Web-браузер при
отображении таблицы считает, что она имеется. Если дать параметру "x"
атрибуту значение 0, рамки у таблицы не будет вообще.

<table cellpadding="x"> - атрибут cellpadding позволяет задавать размер
в пикселях свободного пространства между рамкой и содержимым ячейки.
Поумолчанию x=1.

<table cellspacing="x"> - атрибут cellspacing позволяет задавать размер в
пикселах свободного пространства между ячейками таблицы.
По умолчани x="2".

<table width="x" heigh="y"> - атрибуты width и heigh позволяют установить
размеры теблицы. Допускается указывать размер и в виде абсолютной величины,
в процентах относительно размеров окна браузера (только незабывайте
добавлять к числу знак "%")
Пример: <table width="100%" heigh="50%">
Если эти атрибуты пропущены, браузер сам задает размеры таблицы так,
чтобы все содержимое поместилось в ней.
Кстати: width-ширина , heigh-высота.
Пример в пикселях:
<table width="155px" heigh="43px">
(оставлять px необезательно)


<table align="x"> - атрибут align задает "обертание" таблицы текстом.
Значения x бывают:
left - это значение заставляет таблицу прижатся к левой границе окна.
right - таблица будет спрва.
center - и таблица в центе.


<table bgcolor="x" background="y"> - атрибуты bgcolor и background задают
соответственно цвет фона и адрес фонового ресунка для таблицы.
Примеры:
<table bgcolor="#000000"> - таблица покрашена в черный цвет.
<table background="images/logo.gif"> - рисунок logo является фоновой
картинкой таблицы.

<table bordercolor="x"> - позволяет задать цвет рамки таблицы.
Пример:
<table bordercolor="#000000"> - опять-же рамка таблицы в черном.

<table frame="x"> - атрибут frame определяет, какие части внешней рамки
таблицы будут рисоваться. Доступны следующие значения x :
void - внешний рамки нет вообще(значение по умолчаеию!)
above - рисуется только верхняя линия внешней рамки.
below - рисуется только нижняя линия внешней рамки.
hsides - рисуются только горизонтальные линии внешней рамки, т.е.
верхняя и нижняя.
lhs - рисуется только левая линия внешней рамки.
rhs - рисуется только правая линия внешней рамки.
vsides - рисуются только вертикальные линии внешней рамки, т.е.
левая и правая.
box - рисуются все линии внешней рамки.

<table rules="x"> - атрибут rules задает, как будут рисоваться внутренние
рамки в таблицы. Здесь доступны следущие значения x:
none - никаких внутренних рамок.
rows - рисуются только горизонтальные линии (между строким)
cols - рисуются только вертикальные линии (между столбцами)
all - рисуются все внутринее рамки.

ЗЫ: Атрибуты пишутся в одной строке отделеные пробелами
Пример таблицы:
<table border="1" cellpadding="0" cellspacing="0" width="100" heigh="50">
<tr><td></td></tr></table>


Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>
Метка <tr> может включать следующие атрибуты:

<tr align="x"> - атрибут устанавливает выравнивание текста в ячейках строки.
Допустимые значения x:
left - выравнивание влево.
center - выравнивание по центру.
right -выравнивание вправо.


<tr valign="x"> - атрибут устанавливает вертикальное выравнивание текста в ячейках
строки. Допустимые значения x:
top - выравнивание по верхнему краю.
middle - выравнивание по центру.
bottom - выравнивание по нижнему краю.


Атрибуты bgcolor, bordercolor, height и width ведут себя так же и выполняют те же
функции, что и одноименные атрибуты тега <table> так что небуду повторятся


Каждая ячейка таблицы начинается с метки <td> и заканчивается меткой </td>. Как
раз в ячкйках и находится полезное содержимое таблицы.
Метка <td> может включать следующие атрибуты:

<td colspan="x"> - устанавливает "размах" ячейки по горизонтали. Например, colspan=3 означает,
что ячейка простирается на три колонки.

<td rowspan="x"> - устанавливает "размах" ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки.

Если ячейка таблицы пуста вокруг нее нерисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка попрежнему будет пустой, а рамка вокруг нее будет.
Атрибуты bgcolor, bordercolor, align, height и width ведут себя так же и выполняют те же
функции, что и одноименные атрибуты тега <table> и <tr> так что небуду повторятся опять

Ну вот на сегодня пожалуй и всё. Выслушаю все ваши вопросы по данной теме. В следущем уроке я раскажу вам, как создать простую тему посредством программы Macromedia Dreamweaver...






Вчера я немного поспешил когда написал в конце тему следущего урока вот я посидел, подумал - ну куда вам ещё братся создавать темы? если ещё практики и розяснений по созданию сложных таблиц небыло, да и один скупой пример не делает нам чести - так что продолжым тему о таблицах

Итак мы разсмотрели все теги с помощью которых создавали таблицы. Давайте теперь перейдём к общим вопросам построения таблиц?
Мы знаем что таблицы целиком описываются парой тегов <table> и </table>, внутри которых поинщяются описания строк. Отдельная строка описывается опять-же парой тегов <tr> и </tr>, внутри которых помещяют описания ячеек. Каждая ячейка описывается парой тегов <td></td> внутри которых помещается собствено содержимое ячейки. Что за содержимое спросите вы? И я отвечу - это любая инфорация которой вы хотите поделится, начиная от статей стилизованый под шаблон заканчивая тегами типа {%BLOCKS center%} в случае с AS...
Но я хотел бы сейчас более подробно розяснить создание дизайна посредством таблиц в примерах.

Итак-с Пример 1
Создаем html-страничку с названием test.html - как бонально-бы это не звучало



На рисунке вы можете увидеть получаемый результыт и коменты. (делал в спешке !!! )

Идём далее. Пример 2
Теперь расмотрим пример шапки таблицы.
Поскольку это шапка, то мы уже заключили её в элемент логического форматирования <THEAD>.
Теперь зададим для элемента <THEAD> атрибут bgcolor и background который отвечает за цвет фона, и фоновую картинку соответственно.
Опять создаем страничку - с любым названием



И теперь получаем вот такой результат... Уже лучше? )

Уже слышу вопросы в мою сторону - как можна с помощью таблиц сделать тему для АS - отвичаю 3-тим примером.

Итак давайте мы займёмся высоким HTML-творчеством. Напишем пример целой (простой!) темы без реальных тх. тегов при помощи таблиц - попутно добавляя ему красивостей, при помощи тегов описаных в прошлом уроке .
. Создем html страничку с любым названием (надоело придумывать )



Правда похоже внешне на тему для AS? Вот видете ничего сложного нет.

Ну а на сегодня пожалуй все... Надеюсь дальше продолжать тему таблиц ненужно? У кого какие вопросы ???