• Авторизация


ТАБЛИЦЫ (2 урока по созданию таблиц) 13-06-2013 12:45 к комментариям - к полной версии - понравилось!

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

ТАБЛИЦЫ (2 урока по созданию таблиц)

КАК ЛЕГКО И БЫСТРО ВСТАВИТЬ ТАБЛИЦУ В БЛОГ

Здравствуйте, дорогие друзья!

Сначала давайте поговорим о том, зачем вообще нужны таблицы в тексте статьи. Дело в том, что если нам нужно изобразить на странице блога не сплошной текст, а разместить на ней разные объекты в строго определенных местах, то без использования таблиц это сделать очень трудно, а порой просто не возможно.

Приведу пример. Допустим, необходимо представить какой-то перечень товаров с картинками, причем описание товаров может занимать как 1 строчку, так и несколько, быть короче по высоте, чем картинка или длиннее.


















Утюг



Замечательный утюг фирмы
«Сам погладь»,

поможет вам
привести
в порядок ваши
вещи буквально легким движением руки.

Стиральная машина


Стиральная машина самостоятельно
и качественно стирает носки,
джинсы и даже огромные одеяла.

Веник


Сам не подметает, поэтому и стоит дешево.

Чтобы картинки не налезали одна на другую, а описание находилось строго напротив картинок, и используется таблица.
В данном примере таблица состоит из 3 строк и 2 столбцов.


Как формируется таблица для вывода ее на страницах блога или сайта


Для создания таблицы используются 3 основных тега (команды HTML):


<table> … </ table> обозначает начало и конец таблицы.


<tr> … </tr> обозначает начало и конец каждой строки в таблице.


<td> … </td> обозначает начало и конец каждой ячейки в строке.


Часто можно встретить еще тег <tbody> … </tbody>,
но он не обязательный и таблица отобразится на сайте и без него.


Для того, чтобы таблицу для нашего примера поместить в блог, нужно перейти в редактор кода HTML:


[480x172]


И записать там такой HTML-код:











<table>
<tr>
<td>
Утюг
</td>
<td>
Замечательный утюг фирмы «Сам погладь»,

поможет вам привести в порядок

ваши вещи буквально легким движением руки.
</td>
</tr>
<tr>
<td>
Стиральная машина
</td>
<td>
Стиральная машина самостоятельно

и качественно стирает носки,

джинсы и даже огромные одеяла.
</td>
</tr>
<tr>
<td>
Веник
</td>
<td>
Сам не подметает, поэтому и стоит дешево.
</td>
</tr>
</table>


Картинки мы пока здесь не прописываем, их можно вставить обычным способом через функцию добавления картинок в редакторе блога. Но не забывайте о размере картинок – они должны поместиться в ячейки!


Даже, если таблица состоит из одной ячейки, то необходимо использовать эти три тега:










<table>
<table>

<tr>

<td>

Текст внутри ячейки

</td>

</tr>

</ table>


Теперь начинается самое интересное. Вы, наверное, уже загрустили от того, что придется писать эти теги, в которых так легко ошибиться с непривычки.


Но не горюйте! Если вы умеете создавать таблички в Word’е, то сможете легко и быстро вставить таблицу  в блог, а потом вам надо будет лишь слегка ее подправить.


Что нужно для этого сделать:


  1. Создаете в Word’е таблицу, в которую можно прямо там ввести текст. Картинки в  Word’е не вставляйте.
  2. Выделяете эту таблицу и копируете в буфер обмена (Ctrl+C)
  3. Заходите в админку блога и в режиме Визуального редактора вставляете эту таблицу в нужном месте (Ctrl+V). Все, таблица готова.

Но будьте готовы к тому, что эта таблица будет выглядеть на странице блога не так красиво, как вам бы хотелось. Хотя может и сразу получится так как надо. Это зависит от вида исходной таблицы в Word’е.  Обычно при таком копировании Wordpress пытается передать внешний вид таблицы как можно точнее, но из-за того, что ширина страницы в Word’е больше, чем в блоге, таблица может вылазить за границы области, предназначенной для статьи.


Для того, чтобы исправить это недоразумение, перейдите в редактор кода (HTML) и найдите там текст, описывающий таблицу:


<table  и т.д.


Вы увидите, что там есть еще много незнакомых слов, которые дописал сам Wordpress. Не ругайтесь, он на самом деле очень старался


Давайте разберем, что обозначают эти словеса и что нам с ними делать.


В первой строке сразу после уже знакомого тега table скорее всего будет стоять такой текст:


border=”1″ cellspacing=”0″ cellpadding=”0″ width=”какое-то число”


border – обозначает толщину границ в таблице. В данном случае – 1 пиксель. Если вы не хотите, чтобы у вашей таблицы вообще были границы, то поставьте значение ноль.


cellspacing – определяет расстояние между ячейками таблицы. Если сделать это значение в несколько пикселей, то ячейки таблицы как бы расползутся. Это свойство можно оставить так как есть.


cellpadding – назначает отступы между содержанием ячейки и границей этой яцейки. На самом деле очень полезное свойство и я рекомендую для него поставить значение 10-15 пикселей, чтобы текст в ячейках был более читабельный, а картинки не «прилипали» к границам ячеек.


width– задает общую ширину таблицы. Обратите особое внимание на это свойство, так именно оно может испортить всю красоту. Если ширина таблицы больше, чем  ширина статьи в блоге, то таблица очень некрасиво вылезет на боковую колонку. Вы можете совсем удалить это свойство, но лучше задайте такую ширину таблицы, чтобы она поместилась на странице.


Я уже выкладывала очень удобную программу Rule для определения размеров объектов на экране компьютера, найти ее можно в статье Как задаются
значения цвета в CSS


Смотрим дальше.


<td width=”319″ valign=”top”>


Здесь тоже посмотрите, какое значение стоит у свойства  width.
Оно задает ширину ячейки. Если общая ширина ячеек в строке таблицы будет больше, чем ширина статьи в блоге, то таблица очень некрасиво вылезет на боковую колонку. Если ширина ячейки для вас не принципиальна,
то лучше совсем удалите это свойство.


valign – свойство valign отвечает за выравнивание по вертикали содержания ячейки таблицы. У него могут быть такие основные значения:


top – выравнивание по верхнему краю.


bottom – выравнивание по нижнему краю.


middle – выравнивание по середине.


Выбирайте, какое вам больше подходит.


Ну вот теперь, таблица действительно готова.


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


О том, как сделать фон в  табличке, изменить цвет границ, мы поговорим в одном из следующих постов.


Но хочу вас сразу предупредить о том, что некоторые темы для блогов не позволяют настраивать значения для таких свойств таблицы, как cellpadding, border и некоторых других.  Тема Corponisa, которая установлена на этом блоге, тоже как оказалось, имеет такую вредную
привычку.  Мне пришлось подправлять рамки и отступы в табличках с помощью CSS.


CSS – это вообще мощная вещь и позволяет делать на блоге все, что угодно. Олег Михайленко на своем блоге рассказывает, как можно создавать
многоколоночную верстку блога с помощью CSS3.


Желаю успехов в оформлении вашего блога!


источник: marina-makarova.info/?p=558
[показать]


УРОК ПО ТАБЛИЦАМ

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


Изначально рассмотрим вариант, когда видимость таблицы не нужна. Когда просто нужно расположить текст или картинки в пост так, чтобы они ровно стояли.



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. Таблица с видимыми границами.
ZOMKA1ZOMKA2ZOMKA3
ZOMKA4ZOMKA5ZOMKA6




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

<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>


просто подставляете адрес своего фона  и адреса своих картинок...ну или кнопок....или...а  впрочем  кто во что горазд.
Наконец то я закончила этот урок.
Спасибо за терпение..но...у вас теперь есть важные и готовые формулы...и вы не боитесь словa ТАБЛИЦА.
zomka
[показать]источник: clubs.ya.ru/4611686018427410734/replies.xml?item_no=7107



УРОК ПО ТАБЛИЦАМ

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

Пишем текст в 2 столбика.

От тюрьмы и от сумы не зарекайся.
Оступившись, обязательно покайся.

    Да осилит путь идущий по дорогам.
Да отыщет свет во тьме идущий с Богом.


вот код этого

<table width="80%" cellpadding="0" cellspacing="1" border="0"><tr><td><text size="2"><text color="#663300">Текст первого столбца</td><td width="36" ></td><td><text size="2"><text color="#FF0033">Текст второго столбца</text></text></td></tr></table>


Далее..

<text
color="#663300"> это цвет текста, его можно поменять
на другой.
Меняем только ту часть, которая заключена в кавычки, ничего больше не
трогаем.
<td width="36"> это расстояние между столбцами, его тоже можно менять. К примеру, не 36, а 12.
<text size="2"> это
размер шрифта нашего текста. Двойку можно поменять на нужный размер.

 



Пишем текст  с картинками в 2 столбика







Странная штука, жизнь виртуальная,
Хоть электронная - все же реальная,






Те же в ней страсти, любовь и пороки,
Те же по жизни у всех замороки...

 

вот формула этого

<table width="100%" border="0" cellspacing="7" cellpadding="7"> <br /><tr> <br /><td width="50%"><br />КАРТИНКА (вставляем из компьютера или из Радикала под №6)<br /></td><br /><td width="50%"><br /><text size="2"><text color="663300">ТЕКСТ</text> <br /></td><br /><tr><br /><td width="50%"><br />КАРТИНКА<br /></td> <br /><td width="50%"><br /><text size="2"><text color="000000">ТЕКСТ</text><br /></td><br /></tr></table>



Далее..

Как менять размер и цвет шрифта вы уже знаете.
А вот чтобы продолжить эту формулу (обычно мы используем побольше и картинок, и текста), нужно вставить между последними тэгами </td>
и </tr> вот такой элемент формулы
<tr>
<td width="50%">
Картинка
</td>
<td width="50%">
<text color="ffffff">Текст</text>
</td>
и ставить таких элементов столько, сколько нужно.

Картинка между текстом




 

   

Странная штука, жизнь виртуальная,
Хоть электронная - все же реальная,
   

   

[показать]
   

   

Те же в ней страсти, любовь и пороки,
Те же по жизни у всех замороки....
   

 


вот формула этого

<table border="0" cellspacing="8" cellpadding="0"><br />  <tr><br />    <td><br /> <text size="2"><text color="9d0039">ТЕКСТ</text></text><br />    </td><br />    <td><br /><img src='URL(адрес из Интернета) или из Радикала под №1' border='0'><br />    </td><br />    <td><br /> <text size="2"><text color="9d0039">ТЕКСТ</text></text>.<br />    </td><br />  </tr></table>




Далее..

Продолжить писать таким же образом можно, повторив элемент<tr><td>
<text size="2"><text color="9d0039">Текст</text></text>
   </td>
   <td>
<img src='URL(адрес из Интернета) или из Радикала под №1' border='0'>
   </td>
   <td>
<text size="2"><text color="9d0039">ТЕКСТ</text></text>.
   </td>
Вставляем его так же, как описано выше. Желаю удачи!


[показать]источник: clubs.ya.ru/4611686018427428548/replies.xml?item_no=2938

[500x104]



Серия сообщений "Оформление текста":

Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Смайлы на любой вкус
...
Часть 38 - ШПАРГАЛКА ПО УВЕЛИЧЕНИЮ И УМЕНЬШЕНИЮ РАЗЛИЧНЫХ ШРИФТОВ
Часть 39 - Редкие спецсимволы
Часть 40 - ТАБЛИЦЫ (2 урока по созданию таблиц)


вверх^ к полной версии понравилось! в evernote


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

Дневник ТАБЛИЦЫ (2 урока по созданию таблиц) | TAMARA-5 - Пишу историю свою... | Лента друзей TAMARA-5 / Полная версия Добавить в друзья Страницы: раньше»