• Авторизация
Дневник София_Николаевна Лента друзей - Дневник - Полная версия


Урок по таблицам...полезный 30-01-2011 12:19 к комментариям - к полной версии - понравилось!

Это цитата сообщения Arnusha Оригинальное сообщение

Урок по таблицам...полезный)))

Сегодня я расскажу Вам, о таблицах.  Много говорят и пишут о них но мало кто понимает для чего они нужны..Мы обычно отмахиваемся от того что нам непонятно...мол  Да ладно...Оно мне надо??!!
А зря...потому что  слово "таблица " это  не просто какая -то линованная  сеточка на бумаге или на экране..Вот захотели вы в ряд выстроить в посте фотографии   они...заразы...все  время  вертикально норовят))  или  текст между картинками   или ..наоборот...картинку  внутри текста)))  так  все это делается при помощи таблиц)) Но пусть они вас больше не пугают!!!Для того чтобы, сделать таблицу, вам больше не придется ломать себе голову.
Просто выбирайте подходящую табличку и копируйте код в окошке. Я все сделала  за вас...вы только  выбирайте и пользуйтесь))
      Изначально рассмотрим вариант, когда видимость таблицы не нужна.
Когда просто нужно расположить текст или картинки в пост так, чтобы они ровно стояли.


1. Так будет смотреться ваша таблица с текстом.
ВАШ ТЕКСТ
1
ВАШ ТЕКСТ
2
ВАШ ТЕКСТ
3
  
ВАШ ТЕКСТ
4
ВАШ ТЕКСТ
5
  
 
 



вот код этой таблицы

<table border="0">
        <tbody><tr>      <td><div style="text-align: center;"><span style="color: #000000;"><strong>ВАШ ТЕКСТ <br/></strong></span><span style="font-size: large;">1</span></div></td><td rowspan="2"> <div style="text-align: center;"><span style="color: #000000;"><strong>ВАШ ТЕКСТ <br/></strong><font size="5">2</font></span></div></td> <td><div style="text-align: center;"><span style="color: #000000;"><strong>ВАШ ТЕКСТ <br/></strong><font size="5">3</font></span></div></td>
 </tr>
 <tr>      <td> <div style="text-align: center;"><span style="color: #000000;"><strong>ВАШ ТЕКСТ <br/></strong><font size="5">4</font></span></div></td><td> <div style="text-align: center;"><span style="color: #000000;"><strong>ВАШ ТЕКСТ <br/></strong> <font size="5">5</font></span></div></td></tr></tbody></table>




2. Так будет смотреться ваша таблица с картинкой.

[показать] [показать] [показать]  
[показать] [показать]  
 
 



вот её код

<TABLE>         <TR>      <TD><center><img src="URL адрес картинки"></center></TD> <TD ROWSPAN=2><center><img src=" URL адрес картинки "> </center></TD> <TD><center><img src=" URL адрес картинки"></center> </TD>         </TR>         <TR>      <TD><center><img src=" URL адрес картинки "></center> </TD> <TD><center><img src=" URL адрес картинки "></center></TD>         </TR> </TABLE>





вместо фразы   URL адрес картинки оставляя впокое кавычки  пишем ссылку на любую  вам понравившуюся картинку))


Если картинку нужно будет сделать кликабельной...то есть...если вы хотите  чтобы можно было нажимать на картинку и попадать туда  куда вы послали нас))) то пользуйтесь вот этой формулой..

[показать] [показать] [показать]  
[показать]  [показать]  
 
 



вот формула

<TABLE>         <TR>      <TD> <center><a href=" URL адрес ссылки "><img src=" URL адрес картинки"></a> </center></TD> <TD ROWSPAN=2><center><a href=" URL адрес ссылки "><img src=" URL адрес картинки"></a> </center></TD> <TD><center><a href=" URL адрес ссылки "><img src="URL адрес картинки"></a></center> </TD>         </TR>         <TR>      <TD><center><a href=" URL адрес ссылки "><img src=" URL адрес картинки "></a> </center> </TD> <TD><center><a href=" URL адрес ссылки "><img src=" URL адрес картинки "></a> </center></TD>         </TR> </TABLE>






то есть адрес ссылки это туда куда посылаете а адрес картинки это то на что при этом нажимаете)))

Очень часто мы пользуемся таблицами сами того не замечая..Вот кнопочки бродилки мы с вами делали..Помните??!!  А как  трудно их было выстроить так как хотелось  по три в ряд  по четыре...или сразу  по 6 да так,  чтобы  ровненько  и не друг на друге))) И тут ТАБЛИЦЫ...ну  куда  от них деться
Идем далее..
3. Таблица с видимыми границами.
ZOMKA1 ZOMKA2 ZOMKA3  
ZOMKA4 ZOMKA5 ZOMKA6  
 
 




вот её код для текстовых ячеек

<table border="1" cellspacing="0" cellpadding="10">         <tbody><tr>                
<td>ZOMKA1</td> <td>ZOMKA2</td> <td>ZOMKA3</td>         </tr>         <tr>                 <td>ZOMKA4</td> <td>ZOMKA5</td> <td>ZOMKA6</td>         </tr> </tbody></table>



а это ячейки с картинками

[показать] [показать]  [показать]  
[показать] [показать] [показать]  
 
 



и код такой таблички

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>         <TR>                 <TD> <center><img src=" URL адрес картинки 1"></center> </TD> <TD><center><img src=" URL адрес картинки 2"></center>  </TD> <TD><center><img src=" URL адрес картинки 3"></center> </TD>         </TR>         <TR>                 <TD><center><img src=" URL адрес картинки 4"></center> </TD> <TD><center><img src=" URL адрес картинки 5"></center> </TD> <TD><center><img src=" URL адрес картинки 6"></center> </TD>         </TR> </TABLE>



конечно и в этом коде  слова  URL адрес картинки  заменяем на наши ссылки то есть на ссылки наших  картинок))  Кавычки по-прежнему не трогаем)))
Теперь расскажу  о таблице с рамкой..
5. Таблица с рамкой.


Для текста

ВАШ ТЕКСТ 1 ВАШ ТЕКСТ 2 ВАШ ТЕКСТ 3  
ВАШ ТЕКСТ 4  ВАШ ТЕКСТ 5 ВАШ ТЕКСТ 6  
 
 



её код

<TABLE BORDER=10>         <TR>      <TD> ВАШ ТЕКСТ
1</TD> <TD> ВАШ ТЕКСТ 2</TD><TD> ВАШ ТЕКСТ 3</TD>         </TR>         <TR>      <TD> ВАШ ТЕКСТ 4  </TD> <TD> ВАШ ТЕКСТ 5 </TD><TD> ВАШ ТЕКСТ 6</TD>         </TR> </TABLE>



Для картинок

[показать] [показать] [показать]  
[показать] [показать] [показать]  
 
 



её код


<TABLE BORDER=10>         <TR>      <TD><center><img src=" URL адрес картинки 1"></center></TD> <TD><center><img src=" URL адрес картинки 2"></center> </TD><TD><center><img src=" URL адрес картинки 3"></center> </TD>         </TR>         <TR>      <TD><center><img src=" URL адрес картинки 4"></center> </TD> <TD><center><img src=" URL адрес картинки 5"></center> </TD><TD><center><img src=" URL адрес картинки 6"></center> </TD>         </TR> </TABLE>




Ну и еще про одну табличку я вам расскажу...это таблица с фоном...Вот таким..

[показать] [показать] [показать]  
[показать] [показать] [показать]  
[показать] [показать] [показать]  
 
 



вот её код

<TABLE background="URL адрес фона." BORDER CELLPADDING=10 CELLSPACING=0>          <TR>                 <TD><center> <img src=" URL адрес картинки 1"></center></TD> <TD><center> <img src=" URL адрес картинки 2"></center></TD> <TD><center> <img src=" URL адрес картинки 3"></center></TD>         </TR>         <TR>                 <TD><center> <img src=" URL адрес картинки 4"></center></TD> <TD><center> <img src=" URL адрес картинки 5"></center></TD>
<TD><center> <img src=" URL адрес картинки 6"></center></TD>         </TR>         <TR>                 <TD><center> <img src=" URL адрес картинки 7"></center></TD> <TD><center> <img src=" URL адрес картинки 8"></center></TD> <TD><center> <img src=" URL адрес картинки 9"></center></TD>         </TR> </TABLE>


просто подставляете адрес своего фона  и адреса своих картинок...ну или кнопок....или...а  впрочем  кто во что горазд))))
Наконец то я закончила этот урок))))
Спасибо за терпение..но...у вас  теперь есть важные и готовые формулы...и вы не боитесь  слово ТАБЛИЦА)))))

  
zomka

http://clubs.ya.ru/4611686018427410734/replies.xml?item_no=7107

Серия сообщений "Полезности":
Часть 1 - Сервисы "Вопрос-ответ"
Часть 2 - Полезности для вашего блога...
...
Часть 59 - ~Видео плеер~
Часть 60 - Урок: "Как перевести текст бесплатно и быстро"
Часть 61 - Урок по таблицам...полезный)))
Часть 62 - Правильный уход за компьютером
Часть 63 - Как я делаю музыкальные открытки.
...
Часть 67 - Чистим золото и серебро.
Часть 68 - Он-лайн сервис - Генератор Кнопок
Часть 69 - HTML-ШПАРГАЛКА

Серия сообщений "Уроки":
Часть 1 - Урок о том,как добавить анимацию на вашу картинку.
Часть 2 - Как обычный компьютер превратить в новогодний...
...
Часть 15 - WINSoft WebEditor 2007, HTML Редактор
Часть 16 - Урок: "Как перевести текст бесплатно и быстро"
Часть 17 - Урок по таблицам...полезный)))
Часть 18 - Как я делаю музыкальные открытки.
Часть 19 - 97 Видеоуроков по Adobe Photoshop от Игоря Ульмана
...
Часть 21 - Урок по анимации украшений
Часть 22 - За штурвалом Photoshop
Часть 23 - Он-лайн сервис - Генератор Кнопок
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Урок по таблицам...полезный | София_Николаевна - Дневник София_Николаевна | Лента друзей София_Николаевна / Полная версия Добавить в друзья Страницы: раньше»