Создаём таблицу как основу

Создаём таблицу как основу для страницы сайта
После того, как мы создали страницу нашего сайта, надо заполнить «тело» сайта, то есть то, что будет располагаться между тегами
<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″, границы таблицы будут невидимыми.

Пояснение: атрибут — это параметр, который отвечает за какое-либо отдельное значение. Браузер, открывая для вас страницу, считывает данный параметр и понимает, что именно он означает и переводит в графическое отображение. К примеру, значение 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>
Основа для сайта сделана.

Create a table as the basis for the pages of the site

Once we have created a page of our website, you have to fill in the «body» of the site, that is what will be placed between the tags

<body>

</ body>

In most cases, the basis of site page is a table. It is needed in order to be able to regulate the contents of the page placed in one column of the menu of the site, the other — a greeting visitors in the third links and banners.

You can do without a table when you, for example, you need to shell out a large amount of taksti, as in: Example

In this case, the text is inserted between the tags:

<body>

</ body>

As you can see, the page looks very simple. To create such a page, you just need to enter text and the corresponding tags to specify the size and type of font, color, etc. On the design of the text talk, when it will reach up to it. But now back to the table.

Most site is strictly delimited space with a variety of modules, and in this case no table is necessary. In the table (or tables) are all the logos, links, text, banners, images and other content.

For example, consider a table this site:

Constellation Gemini

You can write a whole plate full. It will look like this:

A table made entirely

Code of this table is as follows:

<table border = 1>

<tr> <td colspan = 2> Logo </ td>

<td width = 200px> Links <br> 200 px </ td>

</ tr>

<tr> <td width = 200px> Links <br> 200 px </ td>

<td> <div align = justify> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ div> </ td>

<td> <br> Banners and ads </ td>

</ tr>

<tr> <td colspan = 3> <div align = justify> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ div> </ td>

</ tr>

</ table>

Now the table little text, so it looks so narrow.

The code table is placed in the HTML-code of the page, as discussed in the previous lesson, between the tags <body> </ body> and the body of the page.

If you are satisfied with this code — you can use it. But I’ll explain how to make the site a table in another way, with a few simple tables. It will look like this:

Table made in separate parts

Its code looks like this:

<table width = «100%» border = «1»>

<td> logo </ td>

<td WIDTH = 200px> Links <br> 200 px </ td>

</ table>

<br>

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200 px </ td>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ Td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

<br>

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ Td>

</ table>

Attention! Remember one important point: single (‘) and double quotes («) in html and other programming languages have different meanings. Two single quotation marks will not replace one double. In this case, all codes, which I quote, quotation marks must be double.

I wanted to set the table on a small distance from each other using the tag <br> (which means a newline) to make it clear that we have three separate tables. Now I will explain why in my view, be a table for a site on separate tables rather than one whole.

Previously, we have written a large and very complex sign on the entire page. But creating and developing the site is constantly confronted with the fact that you need to change the page. For example, to add or subtract banners and therefore make the column with them more or less, or instead of audio information with the central column do, for example, two.

Or suddenly I decided to make another, better, more complex logo but because I need to get in the top line was now not two, but four columns.

We have to rewrite all this giant table, and imagine if the table is packed with a variety of banners, links, pictures, background images, advertising. Confused, we missed some tag — and all the main warped page. Climb back into the code to try to discover the heap error.

It is much easier to put on a page of the site several independent tables. If necessary, you can remove a desired table without touching the others, change it as needed, and put back.

We now consider the steps of how to write all these three tables.

1. A table begins with <table> tag and ends with the tag </ table> The slash in the second case is the closing tag.

The code tables are also used tags <tr> and <td>

<Tr> tag is a string.

<Td> tag means the cell.

<table border = «1»> table with a border of 1 pixel.

Attribute border = «1» means that the border width of your table will be 1 pixel. If you set the value of border = «0», the table border will be invisible.

Explanation: An attribute — a parameter that is responsible for any individual value. Browser by opening the page for you, reading this parameter and understands exactly what it means, and translates into a graphical display. For example, the value align = «center» for the browser means that the alignment in this particular portion is centered.

Each tag can have one or more attributes that are responsible for the various parameters displayed object (such as a table, its cells and rows).

Let’s go back to the table. As we build a table consisting only of cells, <tr> tag, we will not use. We need to build the first table, consisting of two cells. Her code would look like this:

<table border = «1»>

<td> logo </ td>

<td> Links </ td>

</ table>

The result is a very small plate that looks like this:

Very small first plate

Note: When you insert an attribute into the tag, you put a space before the attribute: <table border = «1»>

But you can not put a space between the tag and limiting its angular brackets: <this or that>

2. What you need to do to become a sign to the entire width of the screen, and it corresponded to specify the size of the cell?

To do this, there are attributes that are responsible for the width of the table and its size. It is the following attributes:

width = «100%» — this attribute is in charge of what your table will occupy the entire width of the screen, that is, 100%. Since the width of the entire table must be set rather than a single cell, you need to put this attribute inside the tag, is responsible for the entire table:

<table width = «100%» border = «1»>

WIDTH = 200px — this attribute specifies a fixed width of the cell, in this case 200 pixels. Since this attribute specifies the width of the cell, it must be placed inside the tag, is responsible for the cell width to be asked, like so:

<td WIDTH = 200px>

That cell, the width of which is not specified, will be scaled for the remainder of the screen. All of the code table will now look like this:

<table width = «100%» border = «1»>

<td> logo </ td>

<td WIDTH = 200px> Links <br> 200 pt </ td>

</ table>

(As I said, the tag <br> means moving to a new line of text).

Now we have just such a sign, what is needed:

Proper plate with a predetermined width of the right cell

3. Now on the same principle as we did the first plate, made a second plate on the three cells. In this plate we have given width 200rh at the first and third cell. Therefore, code labels will look like this:

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200 px </ td>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ Td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

This tablet looks like this:

Proper plate with a predetermined width of right and left cell and scaled average cell

4. Make the last plate at one cell, occupying in width 100% of the screen.

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ Td>

</ table>

The plate looks like this:

Proper plate with one cell at 100% of the screen

5. It remains to put all three signs one after the other in the HTML-code pages. It will look like this:

Ready again for the pages of the site

(Note: I removed the spaces between the plates, so that they stood back to back).

The final table code looks like as mentioned above:

<table width = «100%» border = «1»>

<td> logo </ td>

<td WIDTH = 200px> Links <br> 200 px </ td>

</ table>

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200 px </ td>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ Td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ Td>

</ table>

The basis for the site is made.