Изображения и таблицы

Вернемся к прошлому уроку. Удалось ли Вам объеденить строки. Если нет, то не отчаивайтесь. Сейчас мы с Вами это проделаем.

Вот такую таблицу нам предстоит сделать:

Продукт	Содержание в 100 гр. продукта, гр.
Молоко	Белки	Жиры	Углеводы
7,3	3,5	17,2

Данная таблица сочетает в себе как объединение строк, так и столбцов.

А вот он код этой таблицы

<table border="1" bordercolor="blue" cellspacing="0" align="center"><tr><th>Продукт</th><th colspan="3">Содержание в 100 гр. продукта, гр.</th></tr><tr><td align="center" rowspan="2">Молоко</td><td align="center">Белки</td><td align="center">Жиры</td><td align="center">Углеводы</td></tr><tr><td align="center">7,3</td><td align="center">3,5</td><td align="center">17,2</td></tr></table>

Не трудно заметить, что в этой таблице четыре столбца и три строки. Просто в первой строке объеденены три столбца (<th colspan="3">). Во второй строке тэг <rowspan="2"> означает объединение этой строки с последующей, но он же выполняет функцию первого столбца. Поэтому для следующей строки этот тэг уже не используется. С объединением закончили.

Часто возникает вопрос как красиво совместить текст и изображение.Часто в этом случае прибегают к помощи таблиц.

К примеру возьмем следующий рисунок:

Он выполнен в формате GIF, на прозрачном фоне.

Разделим его пополам по горизонтали. В этом также на помощь может прийти программа "Photoshop". Тем более, что в этой программе даже есть специальный инструмент - Slice Control. Я же не пользуюсь им, а "режу" холст, изменяя его размеры с помощью Image -> Canvas Size (размер холста). После "разрезания" рисунка назовем его части 1.gif и 2.gif. Получим следующее (кстати, то что Вы сейчас видите ниже сделано также при помощи таблицы):


1.gif	2.gif

А теперь посмотрим, что получилось из наших "лоскутков":

	всегда будет
Пусть		солнце !!!

Солнце, конечно, не очень-то, но это всего лишь пример.

Ну и, разумеется, код:

<table border="0" cellpadding="0" cellspacing="0" align=center><tr><td align="center" width="80" height="30"> </td><td align="center" bgColor="blue"><font size=4 color=yellow><b>всегда будет</b></font></td><td align="center" width="80"> </td></tr><tr bgColor="blue"><td align="center"><font size=4 color=yellow><b>Пусть</b></font></td><td align="center" width="168"><img src="sun1.gif" width="168" height="63"></td><td align="center"><font size=4 color=yellow><b>солнце !!!</b></font></td></tr><tr><td align="center"> </td><td align="center" width="168"><img src="sun2.gif" width="168" height="63"></td><td align="center"> </td></tr></table>

Как видите, мы уже начали активно пользоваться как тэгами, так и их атрибутами (и не только для таблиц).

А что это за  ? Это специальный символ, означающий пробел. Специальные символы мы рассмотрим в следующий раз. А Вы попробуйте создать и связать ссылки со следующими файлами: lets.html (для слова "Пусть"), always_be.html (для фразы "всегда будет") и sun.html (для слова "солнце!!!"). Если Вы поняли задание и Вам удалось его выполнить, то Вы ощутили еще одно удобство использования таблиц.
Источник:web-brodilka.ru