Урок 5. Практика

1. Создание таблиц 2

2. Вставка картинок

На этом уроке мы поговорим об атрибутах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь, чтобы было все понятно, обратимся к примерам.

Итак, наша задача растянуть ячейку 1 на два столбца (ячейки). Для этого мы используем атрибут colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:

<table>

<tr align=center>

<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>

<td width=70 bgcolor=blue>2 ячейка</td>

</tr>

<tr align=center>

<td height=35 width=70 bgcolor=blue>4 ячейка</td>

<td width=70 bgcolor=orange>5 ячейка</td>

<td width=70 bgcolor=blue>6 ячейка</td>

</tr>

</table>

Как вы видите, ячейка 1 простирается на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (140 пикселов). Мы не прописали атрибут width для ячейки 1, но если бы мы решили это сделать, то width мы задали бы равным 140 пикселам. И еще, прошу вас обратить внимание, что в нашем примере нет ячейки 3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1 равна двум ячейкам, благодаря атрибуту colspan.

Если бы мы по оплошности прописали ячейку 3, тогда у нас получилась бы следующее:

Аккуратнее обращайтесь с параметрами colspan и rowspan. Ошибка может привести к тому, что ваш сайт совсем распадется. Теперь, когда мы разобрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:

А вот и код:

<table>

<tr align=center>

<td height=35 bgcolor=orange>1 ячейка</td>

<td width=70 bgcolor=blue>2 ячейка</td>

<td rowspan=2 width=70 bgcolor=blue>3 ячейка</td>

</tr>

<tr align=center>

<td height=35 width=70 bgcolor=blue>4 ячейка</td>

<td width=70 bgcolor=orange>5 ячейка</td>

</tr>

</table>

А если нам нужна следующая таблица:

И код:

<table>

<tr align=center>

<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>

<td width=70 rowspan=2 bgcolor=blue>2 ячейка</td>

</tr>

<tr align=center>

<td height=35 width=70 bgcolor=blue>4 ячейка</td>

<td width=70 bgcolor=orange>5 ячейка</td>

</tr>

</table>

Давайте, подумаем, что же еще можно сделать с такой таблицей. А можно, например, избавиться от пространства между ячейками таблицы:

Это можно сделать с помощью атрибута cellspacing, равного нулю:

<table cellspacing=0>

<tr align=center>

<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>

<td width=70 rowspan=2 bgcolor=blue>2 ячейка</td>

</tr>

<tr align=center>

<td height=35 width=70 bgcolor=blue>4 ячейка</td>

<td width=70 bgcolor=orange>5 ячейка</td>

</tr>

</table>

Можно наоборот увеличить пространство между ячейками, допустим, пусть cellspacing=8, тогда получим следующее:

Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который задает верхнее, нижнее, правое и левое поля ячейки. Чтобы было видно нагляднее, я для начала прижму текст ячеек первого ряда к верху, и нижнего - к низу, используя атрибут valign:

Теперь зададим атрибут cellpadding=5:

В этих примерах мы отчетливо видим верхнее и нижнее поля (левое и правое тоже присутствуют, но на данном примере это не очевидно). Теперь вам должно быть понятно, что поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибут cellpadding равный нулю (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячеек). Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):

<table cellspacing=10 cellpadding=10>

<tr align=center>

<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>

<td width=70 rowspan=2 bgcolor=blue>2 ячейка</td>

</tr>

<tr align=center>

<td height=35 width=70 bgcolor=blue>4 ячейка</td>

<td width=70 bgcolor=orange>5 ячейка</td>

</tr>

</table>

Как вставлять картинки в документ:

<img src="picture.jpg">

Вместо picture.jpg мы можем подставить имя любой картинки. Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="pic/picture.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../picture.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/pic/picture.jpg">

Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что PIC.jpg, pic.JPG, pic.jpg и PIC.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

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

<head>

<title>Моя первая страничка</title>

</head>

<body text=blue bgcolor=yellow link=darkblue alink=”#DD7777” vlink=”#AAAAAA”>

<div align=center>

<h3>Привет, это моя первая страница.</h3>

<font color=red><b>Добро

пожаловать!</b></font>

</div>

<p align=justify>

<img src=”bfly.jpg”><font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать <a href=”about_me.html”>о моих увлечениях, моей биографии</a>, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font face=Arial size=+1 color=gray><i> Приятного просмотра.</i> </font> </font>

</p>

</body>

Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки.

Один из важнейших параметров это "align", который определяет расположение рисунка относительно текста. Примеры различного использования свойства "align"

Домашнее задание: продолжите создание собственного сайта, вставьте картинки.