Урок 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> и составляет тело страницы.
Если вас устраивает такой код - вы можете им воспользоваться. Но я буду объяснять, как сделать таблицу сайта другим способом, при помощи нескольких простых таблиц. Это будет выглядеть вот так: Таблица, сделанная отдельными частямиЕё код выглядит так:
Внимание! Учтите один важный момент: одинарные (') и двойные (") кавычки в 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>
5. Нам осталось поставить все три таблички одну за другой в HTML-код страницы. Выглядеть это будет так: Готовая снова для страницы сайта (Примечание: Я убрала пробелы между табличками, чтобы они встали вплотную).