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

Спасибо Inmira !!!

Мы ведь часто думаем, как покрасивее разместить в посте фоны (паттерны), например? У меня их тьма-тьмущая. А размеры все разные и так много времени уйдет, чтобы сделать одинаковые превьюшки, залить сами паттерны и их превью, переставить все ссылки.. . Поэтому и не гружу((( Теперь буду)))Великовозрастное_дитя, спасибо за этот пост !!!))) В результате получим, например, такую таблицу:

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 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" width="110" height="110" alt="большой1" /> <img src="//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" width="100" height="81" alt="Большой3" /> <img src="//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" width="32" height="32" alt="Маленький2" /> <img src="//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" width="110" height="110" alt="большой1" /> </td> <td> <img src="//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" width="85" height="77" alt="большой2" /> </td> <td> <img src="//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" width="100" height="81" alt="Большой3" /> </td> <td> <img src="//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" width="110" height="110" alt="большой1" />Большой1 </td> <td> <img src="//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" width="85" height="77" alt="большой2" />Большой2 </td> <td> <img src="//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" width="100" height="81" alt="Большой3" />Большой3 </td> <td> <img src="//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" 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" 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" 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" 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" 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" 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" 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" 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" width="116" height="116" alt=" (116x116, 2Kb)" title="Это фоновый рисунок" />

МОИ ПЛЕЙКАСТЫ

МОИ ПЛЕЙКАСТЫ...Нажми на картинку... Смотреть ещё мои плейкасты... Аквилегия 456

Коды цвета для текстов

	Ваш текст	<font color="#000080">ваш текст</font>
	Ваш текст	<font color="#0000FF">ваш текст</font>
	Ваш текст	<font color="#3366CC">ваш текст</font>
	Ваш текст	<font color="#00FFFF">ваш текст</font>
	Ваш текст	<font color="#3D9FE">ваш текст</font>
	Ваш текст	<font color="#660066">ваш текст</font>
	Ваш текст	<font color="#9900CC">ваш текст</font>
	Ваш текст	<font color="#CC00CC">ваш текст</font>
	Ваш текст	<font color="#FF66FF">ваш текст</font>
	Ваш текст	<font color="#800000">ваш текст</font>
	Ваш текст	<font color="#CC0000">ваш текст</font>
	Ваш текст	<font color="#FF0000">ваш текст</font>
	Ваш текст	<font color="#FF6666">ваш текст</font>
	Ваш текст	<font color="#FFCCCC">ваш текст</font>
	Ваш текст	<font color="#663300">ваш текст</font>
	Ваш текст	<font color="#CC6600">ваш текст</font>
	Ваш текст	<font color="#FFFF00">ваш текст</font>
	Ваш текст	<font color="#FFFFCC">ваш текст</font>
	Ваш текст	<font color="#003300">ваш текст</font>
	Ваш текст	<font color="#006600">ваш текст</font>
	Ваш текст	<font color="#009933">ваш текст</font>
	Ваш текст	<font color="#00FF00">ваш текст</font>
	Ваш текст	<font color="#99FF99">ваш текст</font>
	Ваш текст	<font color="#000000">ваш текст</font>
	Ваш текст	<font color="#FFFFFF">ваш текст</font>

От Дайтека для Посты_для_Цитатника

Нужны фоны? Берите!

Океан фонов http://styleindisign.narod.ru/main.html http://haksnotdead.narod.ru/fon.htm http://gotomy.com/back.html http://vasilechki.ru/modules.php?name=Content&pa=showpage&pid=20 http://svweb.narod.ru/SKRIPT/skript.htm http://fatiniyacollection.by.ru/fon.htm http://artmo2005.narod.ru/foni.htm http://fone-gallery.sitecity.ru/ http://for-you-sites.narod.ru/fon2.html http://dolls-pix.narod.ru/ http://vsefoni.by.ru/ http://fca.narod.ru/fon.html http://x-yulia2007.narod.ru/oboi.html http://vsefoni.by.ru/ http://fca.narod.ru/fon.html http://x-yulia2007.narod.ru/oboi.html http://liza12543.narod.ru/photoalbu.html http://www.graffixofeden.net/goebg.html http://www.moobackgrounds.com/ http://www.freemyspacebackgrounds.net/ http://www.ollenkka.com/backgrounds/ http://www.purpleglitter.com/backgrounds/ http://www.healthmantra.com/anisha/freebgs.htm http://www.design.protoplex.ru/photos_group/15.html http://www.freestuff.centralvirginia.net/backgrounds/ http://www.webniche.com/my_backgrounds/backgrounds.html http://www.lenagold.ru/fon/main.html http://www.wingsdove.com/backgrounds-2.htm http://www.steamboats.com/hobbies/clipart40.html http://www.turtlepuddle.org/bio/freebackgrounds.html http://www.cybergifs.com/bkgs/other.html http://www.shoporium.com/sellers/background.htm http://www.designedtoat.com/backgroundsmain.htm http://www.runic.com/fire1.html http://www.angelfire.com/wv2/webbuild7/backgrounds/red/ http://www.dolliecrave.com/backgroundcodes.shtml http://www.grsites.com/textures/ http://www.backgroundcity.com/ http://www.freemyspacebackgrounds.net/ http://www.fg-a.com/backgrounds.htm http://www.wonderbackgrounds.com/ http://www.bigoo.ws/backgrounds http://www.geocities.com/SoHo/Village/2082/stripebackgrounds.html http://www.neopets.com/backgrounds.phtml http://www.backgrounds.free-animations.co.uk/red/red_1.html http://www.webpagebackground.com/fun.htm http://veselble-kartinki.narod.ru/Fonbl_animirovannble.html http://www.woweb.ru http://www.glitter-graphics.com/gallery.php?categoryID=42 взято из сообщества"Мир иллюзий"

Фоны с розами





Читать далее...

Волшебная шняжка



Теперь можно читать даже англоязычные сайты!
Чем я сейчас и занимаюсь....

ПЕРЕВОДЧИК ЦЕЛЫХ СТРАНИЦ ТЕКСТА
ПРОСТО ВСТАВЬТЕ АДРЕС СТРАНИЦЫ И ВЫБИРИТЕ ЯЗЫК!

Введите адрес страницы в интернете:

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

Нашла это счастье у Лешика:),а откуда у него - не помню,хоть убейте!

Странная женщина

...Странная женщина, - про неё говорят, Держится гордо...Не прячет свой взгляд, Плавной походкой мимо пройдёт, Запах сирени с собой принесёт... Странная женщина, с ласковым взглядом, Странно счастливым становишься рядом. Будто частичку души отдаёт... Шёпотом тихим с собой позовёт... Странная...милая, очень красивая, Чья-то единственная...неповторимая... Сердцем нежна и...немножко ранимая, Чья-то ЛЮБОВЬ и СУДЬБА... Галина Воленберг Галерея_Дефне

Я соткана из тысячи кусков...

Я соткана из тысячи кусков... Загадочности вечных облаков, Из дуновенья ветра и рассвета, Дыхания зимы, улыбки лета... Я соткана из тысячи кусков, Из нежных запахов лесных цветов, Из гибкости ветвей плакучей ивы, Ожога маленькой простой крапивы. Я соткана из тысячи кусков, Иголок хвои, зелени лесов, И моря - изумрудной полосы, Из ракушки и выпавшей росы. Я соткана из солнечных лучей, Из ласки рук твоих,.. твоих очей. Из первого и робкого признанья, Я жизни миг - и я её созданье. Лидия Фогель Галерея_Дефне

Я тебе подарю...

Я тебе подарю три заветных кольца, Три заветных желанья для нас загадаю, Потому что разлуке не видно конца… Потому что как жить без тебя я не знаю. Будет первое золотом солнца гореть, Греть ладошку и в синее небо проситься, И не надо его ни хранить, ни жалеть – В нём грустит и о воле мечтает синица! Ты на пальце его повернуть не забудь, Брось на снег и три раза скажи – я летаю! Станешь птицей, и вот, может быть, где-нибудь Ты увидишь, как я без тебя пропадаю. А второму хрустальным в ладошке звенеть, Серебром, от луны отражаясь, искриться, Его тоже попробуй на пальчик надеть – И любви моей запах услышит волчица! И не тропка ко мне поведёт тебя – нить, По лесам и полям, за рассветной звездою, Прямо к дому, где мне без тебя больно жить… Ты царапнешься в дверь…, и я двери открою. Всё, что прожито раньше – не помни, не верь! Что бы вслед тебе подло молва ни шептала, Слышишь - сердце скулит, словно раненый зверь? Без тебя ему всё и ни в радость, и мало. Будет третье кольцо – без тоски и разлук Нашу вечность запомним с тобой поминутно - В обручальном кольце моих сомкнутых рук Навсегда тебе станет тепло и уютно. Сказоч-Ник Галерея_Дефне

Красива женщина тогда,