Построение таблиц внутри нашей странички

В этом разделе мы рассмотрим построение таблиц внутри нашей странички. Это важно, потому что внутри таблиц будет располагаться текст, информация, картинки, ссылки – все то, чем вы хотели бы поделиться со своими читателями. Это своеобразный каркас, коробка, в которой будет помещаться вся информация вашего сайта.

Для таблицы существуют теги <table> и </table>.

<table> - это начало таблицы, а </table> - соответственно, ее конец.

Давайте начнем с одной строки. Для ее создания используются теги <tr> </tr>.

Допустим так:

<table>

<tr> </tr>

</table>


Таблица с одной строкой.

Или так:

<table>

<tr> </tr>

<tr> </tr>

</table>


Таблица с двумя строками.

Для создания столбца пригодятся теги <td> и </td>. Эти теги у нас должны располагаться посрединке тегов <tr> и </tr>.

<table>

<tr><td> </td></tr>

</table>


 



<table>

<tr><td> </td></tr>

<tr><td> </td></tr>

</table>


 
 



<table>

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

   
   


А вот информация, которую вы хотите поместить в таблицу, располагается МЕЖДУ тегами <td> и </td>.

Помещать информацию между тегами <tr> и <td>, </td> и </tr> или </td> и </td> нельзя.

НУЖНО ПОМНИТЬ: для создания таблицы существует только такой порядок написания тегов: тег таблицы, тег строки, тег ячейки.

Давайте попробуем заполнить контентом таблицу, попробуем сделать это красиво:

<table>

<tr><td>первая строка, первая ячейка</td><td>первая строка, вторая ячейка</td></tr>

<tr><td>вторая строка, первая ячейка</td><td>вторая строка, вторая ячейка</td></tr>

</table>


первая строка, первая ячейка первая строка, вторая ячейка
вторая строка, первая ячейка вторая строка, вторая ячейка


Теперь вставим нашу табличку в код из предыдущего урока

<html>

<head>


<title> Мой первый сайт созданный своими ручками всего за 5 минут

</title>

</head>

<body bgcolor="#f01111" text="#ffff00"> <center>

<font color="#0000ff" size="5"><b>Я научился раскрашивать текст!!!</b></font><br>

Сегодня великолепный день для начинаний. <i>Это моя первая интернет страничка.</i>

<br><br><br>

<a href="http://readymoney.ru" target="_blank"><img src="Readymoney.jpg" width="299" height="117" alt="Сайт о заработке в интернете" border="0"></a>

<br><br>

<a href="http://readymoney.ru" target="_blank">Сайт о заработке в интернете</a>

<br><br>

<table>

<tr><td>первая строка, первая ячейка</td><td>первая строка, вторая ячейка</td></tr>

<tr><td>вторая строка, первая ячейка</td><td>вторая строка, вторая ячейка</td></tr>

</table>


</center>

</body>

</html>


Выглядеть это будет так.

Если у вас получилось, можно приступить к следующему – давайте попробуем создать таблицу внутри таблицы. Это возможно, если вы будете четко соблюдать очередность тегов. Здесь постарайтесь не запутаться, многоэтажность может подвести вас, если вы не понимаете табличную структуру. Но все несложно, если вы несколько раз перечитаете правила построения таблицы.
У вас могут возникнуть ошибки – забудете закрыть тег строки, или ячейки… или нарушите очередность вложения одной таблицы в другую… В результате может получиться нечто странное. Перечитайте урок еще раз. Гарантирую – вы найдете ошибку!

Создадим таблицу, допустим 2х3

     
     


Код будет таким

<table>

<tr>

<td></td>

<td></td>

<td></td>  

</tr>

<tr>

<td></td>

<td></td>

<td></td> 

</tr>

</table>


Ну а теперь вставим в первую ячейку такую же табличку 2х3:

<table>

<tr>

<td><table>

<tr>

<td></td>

<td></td>

<td></td>  

</tr>

<tr>

<td></td>

<td></td>

<td></td> 

</tr>

</table>

</td>

<td></td>

<td></td>  

</tr>

<tr>

<td></td>

<td></td>

<td></td> 

</tr>

</table>


     
     
   
     


И еще один маленький секрет – вы не увидите вашу таблицу до тех пор, пока она останется незаполненой контентом. Для того, чтобы увидеть пустую табличку, нужно вставить параметр border. Он равен нулю, поэтому незаполненную таблицу не видно. Для того, чтобы вам увидеть плод трудов своих, вставьте в табличный тег равенство border=1.

<table border="1">

Для того, чтобы указать размер нашей таблицы, нужно использовать параметры WIDTH и HEIGHT, как мы это делали, когда вставляли картинку.

Например вот так:

<table border="1" width="200" height="150">

 


Код такой таблички

<table border="1" width="200" height="150">

<tr><td></td>

</tr>

</table>


Для указания высоты и ширины ячеек и строк нашей таблицы используют параметры WIDTH и HEIGHT внутри тегов <tr> и <td>.

Давайте сделаем в этой табличке еще одну ячейку.

<table border="1" width="200" height="150">

<tr><td></td><td></td>

</tr>

</table>


   


Теперь поменяем ширину первой ячейки:

<table border="1" width="200" height="150">

<tr><td width="75"></td><td></td>

</tr>

</table>


   

Когда будете заполнять текстом строки и ячейки нашей таблички, внимательно следите за пробелами. Текст, который выглядит как «оченьдлинныйтекстбезпробелов», может вылезти за границы таблицы.

Теперь нужно не забыть о еще об одном – задний фон нашей таблицы, или параметр бэкграунд.

Для того, чтобы задний фон был цветным – используется параметр bgcolor.

<table border="1" width="200" height="150">

<tr>

<td width="75" bgcolor="#009900"> </td>

<td bgcolor="#CCCCCC"> </td>

</tr>

</table>


   


А еще можно использовать любое изображение в качестве фона вашей таблицы.

Например эту картинку



Давайте сохраним изображение под именем images.jpg там же, где находится файл page.html

Для этого правой кнопкой мыши сохраним его как images.jpg

Выбрать надо ту же директорию, где находится файл page.html, проверьте через  TotalCommander, действительно ли файл правильно сохранился. Если неправильно – переименуйте его.

Внесем изменения в табличку:

<html>

<head>

<title> Мой первый сайт созданный своими ручками всего за 5 минут

</title>

</head>

<body bgcolor="#f01111" text="#ffff00"> <center>

<font color="#0000ff" size="5"><b>Я научился раскрашивать текст!!!</b></font><br>

Сегодня великолепный день для начинаний. <i>Это моя первая интернет страничка.</i>

<br><br><br>

<a href="http://readymoney.ru" target="_blank"><img src="Readymoney.jpg" width="299" height="117" alt="Сайт о заработке в интернете" border="0"></a>

<br><br>

<a href="http://readymoney.ru" target="_blank">Сайт о заработке в интернете</a>

<br><br>
<table>
<tr background="images.jpg"><td>первая строка, первая ячейка</td><td>первая строка, вторая ячейка</td></tr>

<tr><td>вторая строка, первая ячейка</td><td>вторая строка, вторая ячейка</td></tr>

</table>

</center>

</body>

</html>


Будет так.

Иногда Internet Explorer не воспринимает и не видит фон внутри тега <tr>. Чтобы избежать этого – пропишите параметр background в теге <td>.  

Если вы хотите сделать разные фоновые изображения для каждой из ячеек вашей таблицы то параметр background="images.jpg" надо прописать в теге <td>. Например, вот так:

<td background="images.jpg">

У фонового изображения есть одна очень удобная черта – повторяемость. Если размер вашей строки или ячейки больше, чем изображение фона – оно автоматом будет повторяться таким образом, что заполнит все пространство! Замечательно, правда?

И вот теперь, когда мы позаботились обо всех вышеизложенных правилах – можете смело вставлять ссылки, картинки, заполнять текстом вашу первую табличку.


К следующему уроку cоздание двухстраничного сайта

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

Вернуться к статьям о заработке в интернете.

Если понравилась статья, буду признателен, если воспользуетесь кнопочками:



Подписаться на новости





Яндекс.Метрика