Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Использование таблиц на Интернет странице





Давайте рассмотрим как делать таблицы на странице.

Вообще это САМАЯ ВАЖНАЯ тема. Поэтому ни в коем случае не пропускайте этот раздел, хоть он пожалуй самый сложный.

Таблицы в HTML используются в основном не для представления данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы, в котором уже размещается содержимое страницы.

Таблица описывается парным тегом <table> и </table>

<table> говорит браузеру что начинается таблица, а </table> говорит о том что таблица заканчивается. Запомните это пожалуйста!

Итак, при создании таблицы пишем сразу 2 тега

<table>

</table>

Теперь надо описать строку таблицы. Для того, чтобы создать строки в таблице надоиспользовать парный тег <tr> </tr>

Если у нас таблица будет состоять из одной строки, то будет так

<table>

<tr> </tr>

</table>

 

Если же таблица состоит из 3 строк, то делаем так:

<table>

<tr> </tr>

<tr> </tr>

<tr> </tr>

</table>

Надеюсь пример Вам понятен

Но это еще не все.

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

Столбцы в HTML описываются с помощью тегов <td> и </td>, которые распологаются между тегами <tr> и </tr>

Пример:
у нас в таблице 1 строка и 1 столбец (см. ниже)

 

то таблица будет описана так:

<table>

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

</table>

Если же таблица состоит из 1 строки и 3 столбцов (см. ниже)

     

то таблица будет описана вот так

<table>

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

</table>

Если мы хотим добавить еще одну строку в таблицу из 3 ячеек (см. ниже)

     
     

код такой таблицы будет такой

<table>

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

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

</table>

Содержимое же ячеек пишется МЕЖДУ тегами <td> и </td>

ВАЖНО ЗНАТЬ. Для описания таблицы Вы должны использовать именно такой порядок: сначала пишите теги таблицы, затем теги строки, затем теги ячеек.

Заполним нашу таблицу содержимым, расположив покрасивее теги

<table>

<tr>
<td> строка 1 ячейка 1</td>
<td> строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

 

Таблица при этом будет выглядеть так

строка 1 ячейка 1 строка 1 ячейка 2 строка 1 ячейка 3
строка 2 ячейка 1 строка 2 ячейка 2 строка 2 ячейка 3

 

Итак мы изучили теорию. Пришло время перейти к практике.

Добавим код таблицы в наш учебный файл.

Возьмем предыдущий наш пример и слегка изменим код. При этом у нас получится:

<html>
<head>
<title>Моя первая страница в Интернете и всего за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

У меня отличное настроение. <br><i>Я сделал свою первую интернет страницу и всего за пару минут.</i>

<br><font color="#0000FF" size="4"><b>Я самый красивый человек на свете</b></font>

<br><br>

<a href="http://russia-job.ru"><img src="nebo.jpg" border="0"></a>

<br><br>

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

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>


</table>

</center>

</body>

</html>

А итоговая страница будет выглядеть ТАК.

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

Предлагаю создать для примера одну таблицу в другой.

Для этого сначала создадим таблицу, например 2 х 2 (см. ниже)

   
   

код таблицы будет такой

<table>

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

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

</table>

А теперь мы вставим в первую ячейку такую же таблицу 2х2 (см. ниже)

   
   
 
   

Код таблицы будет такой:

<table>

<tr>
<td>

<table>

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

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

</table>

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

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

</table>

Красным цветом выделен код новой таблицы, вставленной в первую ячейку основной таблицы.

Немного сложно, но вы должны четко понимать структуру таблицы.
Если же Вам что то не понятно, то перечитайте все ЕЩЕ РАЗ, пока не поймете. В процессе работы у Вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге Вы получите вместо желанной таблицы неизвестно что. Если же Вы будите знать как правильно делать таблицу, то всегда сможете найти ошибку и исправить ее.

Важно. Если в таблице нет данных - то вы может и не увидите таблицу.

Для того чтобы Вы смогли увидеть таблицу в которой не введены данные, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно. Вставьте в тег таблицы значение border="1"

<table border="1">

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

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

<table border="1" width="300" height="100"> - это будет таблица шириной 300 пикселей и высотой 100,

вот такая

 

код таблицы такой

<table width="300" border="1" height="100">
<tr>
<td> </td>
</tr>
</table>

Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT.

т.е. использовать эти параметры в тегах <tr> и <td>

Вставим в таблицу еще одну ячейку

<table width="300" border="1" height="100">
<tr>
<td> </td><td> </td>
</tr>
</table>

т.е. получим вот такую таблицу

 

ячейка 1 ячейка 2

а теперь сделаем ширину первой ячейки = 60

<table width="300" border="1" height="100">
<tr>
<td width="50"> </td><td> </td>
</tr>
</table>

Таблица будет выглядеть так:

  чтобы было видно ячейки надо в них что нибудь написать

 

В ячейки таблицы можно писать как текст, так и вставлять ссылки, также вставлять изображение.

Еще один часто употребляемый параметр для таблиц это задний фон.

Для описания цвета фона используется параметр bgcolor. Например вот такой код

<table width="300" border="1" height="100">
<tr>
<td width="60" bgcolor="#CCCCCC"> </td>
<td bgcolor="#FFFF99"> </td>
</tr>
</table>

даст вот такую таблицу

   

 

Но и это еще не все! В качестве фона в таблицах можно использовать изображения!

Вернемся к нашему файлу, в котором мы работали, и в котором прописан вот этот код

<html>
<head>
<title>Моя первая страница в Интернете и всего за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

У меня отличное настроение. <br><i>Я сделал свою первую интернет страницу и всего за пару минут.</i>

<br><font color="#0000FF" size="4"><b>Я самый красивый человек на свете</b></font>

<br><br>

<a href="http://russia-job.ru"><img src="nebo.jpg" border="0"></a>

<br><br>

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

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>


</table>

</center>

</body>

</html>

Сохраните вот это изображение под его "родным" именем sv5.gif в той же папке, где находиться файл page.html, Для этого наведите мышку на изображение, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите ту же папку где находиться файл page.html

 

Теперь внесем изменения в код нашей таблицы.

<html>
<head>
<title>Моя первая страница в Интернете и всего за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

У меня отличное настроение. <br><i>Я сделал свою первую интернет страницу и всего за пару минут.</i>

<br><font color="#0000FF" size="4"><b>Я самый красивый человек на свете!</b></font>

<br><br>

<a href="http://russia-job.ru"><img src="nebo.jpg" border="0"></a>

<br><br>

<a href="http://russia-job.ru" target="_blank">Сайт о том работе в интернете</a>

<br><br>

<table>

<tr background="sv5.gif">
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>


</table>

</center>

</body>

</html>

Если все сделано правильно мы получим вот такую таблицу

строка 1 ячейка 1 строка 1 ячейка 2 строка 1 ячейка 3
строка 2 ячейка 1 строка 2 ячейка 2 строка 2 ячейка 3

Наша страница будет выглядеть так.

Возможно Вы не увидели того что требовалось увидеть. Например Internet Explorer не понимает фоновую картинку в теге <tr>. Для того чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге <td>.

Если же мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге <td>, т.е. вот так например <td background="sv5.gif" >

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

Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.







ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.