-Поиск по дневнику

Поиск сообщений в Iryna_Kohl

 -Подписка по e-mail

 

 -Интересы

мое хобби - коллекционирование подсвечников фотография.

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 17.06.2008
Записей:
Комментариев:
Написано: 1162


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

Воскресенье, 12 Июля 2009 г. 00:16 + в цитатник
Цитата сообщения Великовозрастное_дитя Применение таблиц



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

 (110x110, 40Kb)  (85x77, 48Kb)  (100x81, 39Kb)  (53x32, 1Kb)  (32x32, 2Kb)  (32x32, 2Kb)

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

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

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

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

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

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



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

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

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



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

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



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

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



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

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

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

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

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

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



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

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

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



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

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

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



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

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

 (116x116, 2Kb)

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



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

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

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



 (116x116, 2Kb)
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку