Урок 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

Наверх