В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 2. Создаём таблицу как основу для страницы сайта



После того, как мы создали страницу нашего сайта, надо заполнить "тело" сайта, то есть то, что будет располагаться между тегами
<body>
</body>
В большинстве случаев основой страницы сайта является таблица. Она нужна для того, чтобы можно было упорядочить содержимое страницы: разместить в одной колонке меню сайта, в другой - приветствие посетителям, в третьей ссылки и баннеры.
Можно обойтись и без таблицы, когда вам, например, нужно выложить большой объём такста, как например здесь: ПРИМЕР
В данном случае текст вставляется между тегами:
<body>
</body>
Как видите, страница выглядит очень просто. Для того, чтобы создать такую страницу, нужно просто вписать текст и соответствующие теги для того, чтобы задать размер и вид шрифта, цвет и т.п. Об оформлении текста поговорим, когда до него дойдёт речь. Но сейчас вернёмся к таблице.
Чаще сайт представляет собой строго разграниченное пространство с разнообразными модулями, а в таком случае без таблицы не обойтись. В таблице (или таблицах) располагаются все логотипы, ссылки, текст, баннеры, картинки и прочее содержимое.
Для примера рассмотрим таблицу этого сайта:

Созвездие Близнецов

Можно написать всю табличку целиком. Она будет выглядеть так:
Таблица, сделанная целиком

Код этой таблицы выглядит так:

<table border=1>
<tr> <td colspan=2> Логотип</td>
<td width=200px> Ссылки<br> 200 px</td>
</tr>
<tr> <td width=200px> Ссылки<br> 200 px</td>
<td> <div align=justify> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </div> </td>
<td> Баннеры<br> и реклама</td>
</tr>
<tr> <td colspan=3> <div align=justify> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </div> </td>
</tr>
</table>


Сейчас в этой таблице мало текста, поэтому она выглядит такой узенькой.

Код таблицы ставится в HTML-код страницы, как и говорилось на предыдущем уроке, между тегами <body> </body> и составляет тело страницы.

Если вас устраивает такой код - вы можете им воспользоваться. Но я буду объяснять, как сделать таблицу сайта другим способом, при помощи нескольких простых таблиц. Это будет выглядеть вот так:
Таблица, сделанная отдельными частями
Её код выглядит так:

<table width="100%" border="1">
<td>Логотип</td>
<td WIDTH=200px>Ссылки <br> 200 px</td>
</table>
<br>

<table width="100%" border="1">
<td WIDTH=200px> Ссылки <br> 200 px</td>
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.</td>
<td WIDTH=200px>Баннеры<br>и реклама</td>
</table>
<br>

<table width="100%" border="1">
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.<br>Место для рекламных баннеров.</td>
</table>


Внимание! Учтите один важный момент: одинарные (') и двойные (") кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные.

Я намеренно расставила части таблицы на небольшом расстоянии друг от друга при помощи тега <br> (который означает переход на новую строку), чтобы было видно, что мы имеем три отдельные таблицы. Теперь я объясню, почему с моей точки зрения, составлять таблицу для сайта из отдельных таблиц лучше, чем из одной целой.
Раньше мы так и писали одну большую и очень сложную табличку на всю страницу. Но создавая и развивая сайт постоянно сталкиваешься с том, что страницу необходимо изменить. Например, добавить или убавить баннеры и потому сделать колонку с ними больше или меньше или вместо одной центральной колонки с информацией сделать, например две.
Или вдруг я решила сделать другой, лучший, но более сложный логотип и потому мне нужно, чтобы в верхней строке было теперь уже не две, а четыре колонки.
Приходится переписывать заново всю эту гигантскую таблицу, а представьте если эта таблица битком набита различными баннерами, ссылками, картинками, фоновыми изображениями, рекламой. Запутались, пропустили какой-нибудь тэг - и всю главную страницу перекосило. Лезь обратно в код, выискивай в этом ворохе ошибку.
Гораздо проще поставить на страницу сайта несколько независимых друг от друга таблиц. В случае необходимости, можно изъять одну нужную таблицу не трогая остальных, изменить её, как необходимо и поставить обратно.

Рассмотрим теперь по стадиям, как пишутся все эти три таблицы.

1. Любая таблица начинается с тега <table> и заканчивается тегом </table> Косая черта во втором случае означает закрытие тега.
В коде таблицы так же используются теги <tr> и <td>
Тег <tr> означает строку.
Тег <td> означает ячейку.
<table border="1"> таблица с границей в 1 пиксел.
Атрибут border="1" означает, что граница вашей таблицы будет шириной в 1 пиксел. Если вы зададите значение border="0", границы таблицы будут невидимыми.

Для тега "border" можно задать не только ширину, но и цвет. Для этого можно вписать стиль, например: вместо тега border="1" вы прописываете style="border:solid 1px #d1bb94". Это означает, что в Вашей таблице будет сплошная граница (слово "solid" означает сплошное окрашивание) в 1 пиксел, светло-коричневого цвета (цвет можно поставить любой другой цвет, воспользовавшись таблицами цветов, примеры которых есть в уроке № 4). Вот на этой странице Wild West основная таблица с текстом отграничена бордером в 1 пиксел, светло-коричневого цвета.

Пояснение: атрибут - это параметр, который отвечает за какое-либо отдельное значение. Браузер, открывая для вас страницу, считывает данный параметр и понимает, что именно он означает и переводит в графическое отображение. К примеру, значение align="center" для браузера обозначает, что выравнивание в этом конкретном фрагменте делается по центру.
Каждый тэг может иметь один или несколько атрибутов, отвечающих за различные параметры отображаемого объекта (в частности, таблицы, её ячеек и строк).

Вернёмся к таблице. Поскольку мы будем строить таблицу, состоящую только из ячеек, тег <tr> мы использовать не будем. Нам нужно построить первую таблицу, состоящую из двух ячеек. Её код будет выглядеть так:

<table border="1">
<td>Логотип</td>
<td> Ссылки </td>
</table>


Получилась очень маленькая табличка, которая выглядит так:
Очень маленькая первая табличка
Примечание: когда вы вставляете атрибут внутрь тега, вы ставите перед началом атрибута пробел: <table border="1">
Но нельзя ставить пробел между тегом и ограничивающей его угловой скобкой: <этой или этой>

2. Что нужно сделать, чтобы табличка стала на всю ширину экрана и её ячейки соответствовали заданным размерам?

Для этого существуют атрибуты, которые отвечают за ширину таблицы и за её размер. Это следующие атрибуты:
width="100%" - этот атрибут отвечает за то, что ваша таблица займёт всю ширину экрана, то есть 100 %. Поскольку ширину нужно задать всей таблице, а не отдельной ячейке, нужно поместить этот атрибут внутрь тега, отвечающего за всю таблицу:
<table width="100%" border="1">
WIDTH=200px - этот атрибут задаёт фиксированную ширину ячейки, в данном случае в 200 пикселей. Поскольку данный атрибут задаёт ширину ячейки, его нужно поместить внутрь тега, отвечающего за ячейку, ширину которой нужно задать, вот таким образом:
<td WIDTH=200px>
Та ячейка, ширина которой не задана, будет масштабироваться на оставшуюся часть экрана. Весь код таблицы теперь будет выглядеть так:

<table width="100%" border="1">
<td>Логотип</td>
<td WIDTH=200px> Ссылки <br> 200 рх</td>
</table>


(Как я уже говорила, тег <br> означает переход текста на новую строку).

теперь у нас получилась табличка как раз такая, какая нужна:
Правильная табличка с заданной шириной правой ячейки

3. Теперь по такому же принципу, как мы делали первую табличку, сделаем вторую табличку на три ячейки. В этой табличке у нас заданная ширина в 200рх у первой и третьей ячейки. Поэтому код таблички будет выглядеть так:

<table width="100%" border="1">
<td WIDTH=200px> Ссылки <br> 200 px</td>
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.</td>
<td WIDTH=200px>Баннеры<br>и реклама</td>
</table>


Выглядит эта табличка так:

Правильная табличка с заданной шириной правой и левой ячейки и масштабирующейся средней ячейкой

4. Сделаем последнюю табличку на одну ячейку, занимающую в ширину 100 % экрана.

<table width="100%" border="1">
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.<br>Место для рекламных баннеров.</td>
</table>


Табличка выглядит так:
Правильная табличка с одной ячейкой на 100 % экрана

5. Нам осталось поставить все три таблички одну за другой в HTML-код страницы. Выглядеть это будет так:
Готовая снова для страницы сайта
(Примечание: Я убрала пробелы между табличками, чтобы они встали вплотную).

Окончательный код таблицы выглядит так, как и было указано выше:

<table width="100%" border="1">
<td>Логотип</td>
<td WIDTH=200px> Ссылки <br> 200 px </td>
</table>
<table width="100%" border="1">
<td WIDTH=200px>Ссылки <br> 200 px </td>
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.</td>
<td WIDTH=200px>Баннеры<br>и реклама</td>
</table>
<table width="100%" border="1">
<td>Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.<br>Место для рекламных баннеров.</td>
</table>


Урок окончен. Основа для сайта сделана.


Перейти к Уроку 3


© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг