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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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