Применение таблиц |
Применение таблиц
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем
Большие смалы | Маленькие смайлы |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Добавим к каждому смайлу название.
Вид таблицы мягко говоря не очень :)
Большие смалы | Маленькие смайлы |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Исправим это добавив еще 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 - Разные стили Прокрутки для поста.
Часть 2 - Как вставить ПРОКРУТКУ в пост.
...
Часть 11 - Как сделать окошко для кодов?
Часть 12 - Коды для блога
Часть 13 - Применение таблиц
Часть 14 - Выделить текст рамкой.
Часть 15 - Урок по таблицам...полезный)
...
Часть 28 - Генератор таблиц
Часть 29 - Шаблоны кода для вставки плеера поверх картинки.
Часть 30 - Урок по созданию разрезной рамочки-"коврика".
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |