Делаем таблицу |
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения
Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"
Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем
Большие смалы | Маленькие смайлы |
---|---|
Добавим к каждому смайлу название.
Вид таблицы мягко говоря не очень :)
Большие смалы | Маленькие смайлы |
---|---|
Большой1 | Маленький1 |
Большой2 | Маленький2 |
Большой3 | Маленький3 |
Исправим это добавив еще 2 колонки для названий смайлов
Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!
Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
Большой1 | Маленький1 | ||
Большой2 | Маленький2 | ||
Большой3 | Маленький3 |
Объеденим попарно ячейки с названием колонок.
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
Большой1 | Маленький1 | ||
Большой2 | Маленький2 | ||
Большой3 | Маленький3 |
Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет
Заодно и строку с названием колонок выделю фоном
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
Большой1 | Маленький1 | ||
Большой2 | Маленький2 | ||
Большой3 | Маленький3 |
Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))
Для этого добавим в ячейку с этим смайлом параметр background
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
Большой1 | Маленький1 | ||
Большой2 | Маленький2 | ||
Большой3 | Маленький3 |
Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.
ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом
Рубрики: | все для днева/делаем таблицу |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |