Записи Друзья Комментарии

Великовозрастное дитя Великовозрастное дитя

-Рубрики

-Приложения

ОткрыткиПерерожденный каталог открыток на все случаи жизни
СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить

-Новости

Доллар должен умереть? - (0)

КНДР: начало ядерной войны – вопрос времени - (0)

Ученые создают гибрид робота и человека - (0)

-Цитатник

Без заголовка - (2)

Как отделить одним движением селёдку от костей Читать дальше... http://kapitoshka70.livejournal....

Без заголовка - (0)

Баклажаны по-гречески: 3 шт. - баклажана4 ст. ложки - оливкового масла500 гр. - мясного фарша1 шт...

Памяти Михаила Евдокимова: - (4)

Памяти Михаила Евдокимова: Без заголовка Памяти Михаила Евдокимова: Тимофей п...

Как тёща познакомилась с будущим зятем - (0)

Забавный случай в ванне: Как тёща познакомилась с будущим зятем

Японский стиль. Фоны. - (4)

Японский стиль. Фоны. //s46.radikal.ru/i114/0909/1c/cbe53a2f34dat.jpg http://s43.radi...

-Ссылки

Песня про кота :) - (6)

Новогодняя елка своими руками (22 фото) - (7)

Старинный календарь определения пола ребенка - (4)

http://zoo.vln.dp.ua - (0)

Самые легендарные женщины мира (16 фото) - (1)

-Видео

Я в домике :)))

Смотрели: 43 (10)

Сладкоежки :)

Смотрели: 53 (7)

Самый крутой танец на шесте :))

Смотрели: 123 (0)

Эволюция девушки с обложки

Смотрели: 107 (1)

Новый год

Смотрели: 28 (11)

-Музыка

David Guetta ft Kelly Rowland - when love takes over (ПРЕМЬЕРА!)

Слушали: 5900 Комментарии: 1

Синий иней

Слушали: 402 Комментарии: 2

Потолок ледяной

Слушали: 1576 Комментарии: 1

-Шутливый гороскоп блоггера

Гороскоп для «Великовозрастное_дитя» на 08 сентября 2009

Сегодня блогосфера источает особенно сильную ауру, что может сподвигнуть вас выбраться в клуб вместе с

Kapitoshka_70. Апогей Яндекса входит в резонанс с пульсом блогосферы, и это побуждает помочь по мере возможностей

intdiz. Постарайтесь не высказываться слишком резко в дневнике

XAH-XAM. Сегодня вас жутко тянет познакомиться с

SweetSugarLady.

Получить свой гороскоп

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

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

-Постоянные читатели

~~LadyNatta~~ Alexa68 Angel_Talia DJILIYA Dreamere Elena_shvedova Luka_sun NATALIU Nonna123 Olga-Smaragd Procto_Tata RoseVBell TIGAAL TTV7 _1ady and_allesgut bravoroot chusiklove gala705 immort_elle ir-ka milana07 tomandy tortilka tvojin vallesimone virena2008 zirini АПРЕЛЬКА7 Вера_Мурашова ДИАДЕМА Ивелена Изменившееся Лена_тана Людмила_Педенко Людмила_Юферова Мари-чан Мираж_ок НАДЕЖДА_МАЛ Натали-Натали Немезия Олеся_Емельянова ПростоВиктория Рыжая_красивая Светлана_Лякутина Татьяна_Светова ЭМИЛЛИ в_поисках_любви овно4ка хомяк_Хася

-Статистика

Создан: 15.04.2009
Записей:
Комментариев:
Написано: 5475

Отчеты:
Посетители
Поисковые фразы

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

Суббота, 11 Июля 2009 г. 11:17 + в цитатник

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 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="Это фоновый рисунок" />

Метки: html таблицы

Процитировано 192 раз
Понравилось: 11 пользователям

<a href="https://www.liveinternet.ru/users/3193732/post106370980/">РџСЂРёРјРµРЅРµРЅРёРµ С‚Р°Р±Р»РёС†</a><br/>Р Р°Р·РјРµСЃС‚РёРј РІ РґРЅРµРІРЅРёРєРµ Р±РѕР»СЊС€РѕРµ РєРѕР»РёС‡РµСЃС‚РІРѕ РЅРµР±РѕР»СЊС€РёС… РїРѕ СЂР°Р·РјРµСЂСѓ СЂРёСЃСѓРЅРєРѕРІ. Р”Р»СЏ РїСЂРёРјРµСЂР° СЏ РІР·СЏР» 6 Р°РЅРёРјРёСЂРѕРІР°РЅРЅС‹С… СЃРјС‹Р№Р»РёРєРѕРІ

Р”Р»СЏ С‚РѕРіРѕ С‡С‚Рѕ Р±С‹ СЂРёСЃСѓРЅРєРё СЂР°СЃРїРѕР»Р°РіР°Р»РёСЃСЊ РіРѕСЂРёР·РѕРЅС‚Р°Р»СЊРЅРѕ РЅРµРѕР±С…РѕРґРёРјРѕ СѓР±СЂР°С‚СЊ РіР°Р»РѕС‡РєСѓ СЃ "РЎРѕС…СЂР°РЅСЏС‚СЊ РїРµСЂРµРІРѕРґС‹ СЃС‚СЂРѕРє РІ С‚РµРєСЃС‚Рµ.". 
РЇ СЃРїРµС†РёР°Р»СЊРЅРѕ РІР·СЏР» СЃРјР°Р№Р»С‹ СЂР°Р·РЅРѕРіРѕ СЂР°Р·РјРµСЂР°. РџРѕРїСЂРѕР±СѓРµРј С‚РµРїРµСЂСЊ СЃРґРµР»Р°С‚СЊ РІС‹РІРѕРґ СЂРёСЃСѓРЅРєРѕРІ Р±РѕР»РµРµ Р»РѕРіРёС‡РЅС‹Рј. Р‘РѕР»СЊС€РёРµ СЃРјР°Р№Р»С‹ РІ РѕРґРЅРѕР№ РєРѕР»РѕРЅРєРµ, РјР°Р»РµРЅСЊРєРёРµ - РІ РґСЂСѓРіРѕР№
Р”Р»СЏ СЌС‚РѕРіРѕ РїРѕСЃС‚СЂРѕРёРј С‚Р°Р±Р»РёС†Сѓ РёР· РґРІСѓС… РєРѕР»РѕРЅРѕРє Рё С‚СЂРµС… СЃС‚СЂРѕРє ( РїРѕ РєРѕР»РёС‡РµСЃС‚РІСѓ СЃРјР°Р№Р»РѕРІ РѕРґРЅРѕРіРѕ СЂР°Р·РјРµСЂР° )

... <a href="https://www.liveinternet.ru/users/3193732/post106370980/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] 2 [Новые]

Inmira обратиться по имени Суббота, 11 Июля 2009 г. 11:51 (ссылка)

Спасибо)))))) умница))))

Ответить С цитатой В цитатник

Великовозрастное_дитя обратиться по имени Суббота, 11 Июля 2009 г. 13:57 (ссылка)

Inmira, не за что :))

Ответить С цитатой В цитатник

Суббота, 11 Июля 2009 г. 14:08ссылка

Inmira

Великовозрастное_дитя, ты что?!!! столько труда... а спасибо взять не хочешь?))) Большое спасибо))))

Ответить С цитатой В цитатник Обратиться по имени

Великовозрастное_дитя обратиться по имени Суббота, 11 Июля 2009 г. 14:15 (ссылка)

Inmira, забрал спасибо :)

Ответить С цитатой В цитатник

LebWohl обратиться по имени Суббота, 11 Июля 2009 г. 18:29 (ссылка)

Спасибо за такой труд!

Ответить С цитатой В цитатник

Румак_2010 обратиться по имени Воскресенье, 12 Июля 2009 г. 10:51 (ссылка)

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

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

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

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

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку " disabled="disabled" size="55" /> Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения

.............
.............

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

..........
...........

Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо " disabled="disabled" size="5" /> пропишем " disabled="disabled" size="5" />

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

..........
...........

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

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

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

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

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

Исправим это добавив еще 2 колонки для названий смайлов
Обратите внимание на то что добавилось еще две строки с " disabled="disabled" size="5" /> и " disabled="disabled" size="5" />. Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!

Большие смалы

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

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

Большие смалы

Маденькие смайлы

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

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

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

...................
...................

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

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

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

.....
.....

Большой2

.......
.......

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

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

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

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

.....
.....

Большой2

.......
.......

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

Большой1

Маленький1

Большой2

Маленький2

Большой3

Маленький3

Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в " disabled="disabled" size="5" /> параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.
ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом

Ответить С цитатой В цитатник

LiveInternetLiveInternet

-Метки

-Рубрики

-Приложения

-Новости

-Цитатник

-Ссылки

-Видео

-Музыка

-Шутливый гороскоп блоггера

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

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

-Постоянные читатели

-Статистика

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