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

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

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

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

 <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>

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

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