Применение таблиц

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой

Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )

<br /> <table border="1"><br /> <tbody><br /> <tr><br /> <td></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> <td></td><br /> </tr><br /> </tbody><br /> </table><br />

Коды рисунков смайлов ( видны при редактировании черновика или поста )

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

<br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /><br />

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

<br /> <table border="1"><br /> <tbody><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /><br /> </td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /><br /> </td><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /><br /> </td><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /><br /> </td><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /><br /> </td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /><br /> </td><br /> </tr><br /> <br /> </tbody><br /> </table><br />

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )

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

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody><br /> .............<br /> .............<br /> </tbody><br /> </table><br />

Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody align="center" valign="middle"><br /> ..........<br /> ...........<br /> </tbody><br /> </table><br />

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

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody align="center" valign="middle"><br /> <tr><br /> <th>Большие смайлы</th><br /> <th>Маленькие смайлы</th><br /> </tr><br /> <br /> ..........<br /> ...........<br /> </tbody><br /> </table><br />

Большие смалы	Маленькие смайлы

Добавим к каждому смайлу название.

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody align="center" valign="middle"><br /> <tr><br /> <th>Большие смалы</th><br /> <th>Маленькие смайлы</th><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" />Большой1<br /> </td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" />Маленький1<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" />Большой2<br /> </td><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" />Маленький2<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" />Большой3<br /> </td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" />Маленький3<br /> </td><br /> </tr><br /> </tbody><br /> </table><br />

Вид таблицы мягко говоря не очень :)

Большие смалы	Маленькие смайлы
Большой1	Маленький1
Большой2	Маленький2
Большой3	Маленький3

Исправим это добавив еще 2 колонки для названий смайлов

Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody align="center" valign="middle"><br /> <tr><br /> <th>Большие смалы</th><br /> <th></th><br /> <th>Маленькие смайлы</th><br /> <th></th><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /><br /> </td><br /> <td>Большой1</td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /><br /> </td><br /> <td>Маленький1</td><br /> <br /> </tr><br /> <tr><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /><br /> </td><br /> <td>Большой2</td><br /> <td><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /><br /> </td><br /> <td>Маленький2</td><br /> </tr><br /> <tr><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /><br /> </td><br /> <td>Большой3</td><br /> <td><br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /><br /> </td><br /> <td>Маленький3</td><br /> </tr><br /> </tbody><br /> </table><br />

Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Объеденим попарно ячейки с названием колонок.

<br /> <table border="1"><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <col width="200px"></col><br /> <tbody align="center" valign="middle"><br /> <tr><br /> <th colspan="2" rowspan="1">Большие смалы</th><br /> <th colspan="2" rowspan="1">Маленькие смайлы</th><br /> </tr><br /> ...................<br /> ...................<br /> </tbody><br /> </table><br />

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет

Заодно и строку с названием колонок выделю фоном

<br /> <table><br /> <tbody><br /> <tr bgcolor="#ccf0cc"><br /> <th colspan="2" rowsapn="1">Большие смалы</th><br /> <th colspan="2" rowspan="1">Маденькие смайлы</th><br /> </tr><br /> .....<br /> .....<br /> <td bgcolor="#f0cccc"><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /><br /> </td><br /> <td bgcolor="#f0cccc">Большой2</td><br /> <td><br /> .......<br /> .......<br /> </td></tbody><br /> </table><br />

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))

Для этого добавим в ячейку с этим смайлом параметр background

<br /> <table><br /> <tbody><br /> <tr bgcolor="#ccf0cc"><br /> <th colspan="2" rowsapn="1">Большие смалы</th><br /> <th colspan="2" rowspan="1">Маденькие смайлы</th><br /> </tr><br /> .....<br /> .....<br /> <td bgcolor="#f0cccc" background="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg"><br /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /><br /> </td><br /> <td bgcolor="#f0cccc">Большой2</td><br /> <td><br /> .......<br /> .......<br /> </td></tbody><br /> </table><br />

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.

ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом

<br /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg" width="116" height="116" alt=" (116x116, 2Kb)" title="Это фоновый рисунок" /><br />