ТАБЛИЦЫ (3 урока по созданию таблиц)
14-06-2016 18:50
к комментариям - к полной версии
- понравилось!
Это цитата сообщения MANGIANA Оригинальное сообщение
ТАБЛИЦЫ (3 урока по созданию таблиц)
УРОК ПО ТАБЛИЦАМ
Сегодня я расскажу Вам, о таблицах. Много говорят и пишут о них но мало кто понимает для чего они нужны..Мы обычно отмахиваемся от того что нам непонятно...мол да ладно...Оно мне надо??!!
А зря...потому что слово "таблица " это не просто какая -то линованная сеточка на бумаге или на экране..Вот захотели вы в ряд выстроить в посте фотографии они...заразы...все время вертикально норовят. Или текст между картинками или ..наоборот...картинку внутри текста. Так все это делается при помощи таблиц. Но пусть они вас больше не пугают!!! Для того чтобы, сделать таблицу, вам больше не придется ломать себе голову. Просто выбирайте подходящую табличку и копируйте код в окошке. Я все сделала за вас...вы только выбирайте и пользуйтесь.
Изначально рассмотрим вариант, когда видимость таблицы не нужна. Когда просто нужно расположить текст или картинки в пост так, чтобы они ровно стояли.
1. Так будет смотреться ваша таблица с текстом.
вот код этой таблицы
2. Так будет смотреться ваша таблица с картинкой.
вот её код
вместо фразы URL адрес картинки оставляя впокое кавычки пишем ссылку на любую вам понравившуюся картинку))
Если картинку нужно будет сделать кликабельной...то есть...если вы хотите чтобы можно было нажимать на картинку и попадать туда куда вы послали нас))) то пользуйтесь вот этой формулой..
вот формула
то есть адрес ссылки это туда куда посылаете а адрес картинки это то на что при этом нажимаете)))
Очень часто мы пользуемся таблицами сами того не замечая..Вот кнопочки бродилки мы с вами делали..Помните??!! А как трудно их было выстроить так как хотелось по три в ряд по четыре...или сразу по 6 да так, чтобы ровненько и не друг на друге))) И тут ТАБЛИЦЫ...ну куда от них деться
Идем далее..
3. Таблица с видимыми границами.
вот её код для текстовых ячеек
а это ячейки с картинками
и код такой таблички
конечно и в этом коде слова URL адрес картинки заменяем на наши ссылки то есть на ссылки наших картинок)) Кавычки по-прежнему не трогаем)))
Теперь расскажу о таблице с рамкой..
5. Таблица с рамкой. Для текста
её код
Для картинок
её код
Ну и еще про одну табличку я вам расскажу...это таблица с фоном...Вот таким..
вот её код
просто подставляете адрес своего фона и адреса своих картинок...ну или кнопок....или...а впрочем кто во что горазд.
Наконец то я закончила этот урок.
Спасибо за терпение..но...у вас теперь есть важные и готовые формулы...и вы не боитесь словa ТАБЛИЦА.
источник: zomka; clubs.ya.ru/4611686018427410734/replies.xml?item_no=7107
**********************************************************
УРОК ПО ТАБЛИЦАМ
Сегодня мы поговорим не о том как выстроить в своем посте фото, картинки и разную разность..а о том как удобнее расположить в посте картинки и текст..чтобы и место было не лишним и красиво смотрелось.. Итак
Пишем текст в 2 столбика.
вот код этого
Далее..
<text color="#663300"> это цвет текста, его можно поменять на другой.
Меняем только ту часть, которая заключена в кавычки, ничего больше не трогаем.
<td width="36"> это расстояние между столбцами, его тоже можно менять. К примеру, не 36, а 12.
<text size="2"> это размер шрифта нашего текста. Двойку можно поменять на нужный размер.
Пишем текст с картинками в 2 столбика
вот формула этого
Далее..
Как менять размер и цвет шрифта вы уже знаете.
А вот чтобы продолжить эту формулу (обычно мы используем побольше и картинок, и текста), нужно вставить между последними тэгами </td>и </tr> вот такой элемент формулы<tr><td width="50%">Картинка</td><td width="50%"><text color="ffffff">Текст</text></td>
и ставить таких элементов столько, сколько нужно.
Картинка между текстом
вот формула этого
Далее..
Продолжить писать таким же образом можно, повторив элемент<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
вверх^
к полной версии
понравилось!
в evernote
Это цитата сообщения MANGIANA Оригинальное сообщение
ТАБЛИЦЫ (3 урока по созданию таблиц)
Сегодня я расскажу Вам, о таблицах. Много говорят и пишут о них но мало кто понимает для чего они нужны..Мы обычно отмахиваемся от того что нам непонятно...мол да ладно...Оно мне надо??!!
А зря...потому что слово "таблица " это не просто какая -то линованная сеточка на бумаге или на экране..Вот захотели вы в ряд выстроить в посте фотографии они...заразы...все время вертикально норовят. Или текст между картинками или ..наоборот...картинку внутри текста. Так все это делается при помощи таблиц. Но пусть они вас больше не пугают!!! Для того чтобы, сделать таблицу, вам больше не придется ломать себе голову. Просто выбирайте подходящую табличку и копируйте код в окошке. Я все сделала за вас...вы только выбирайте и пользуйтесь.
Изначально рассмотрим вариант, когда видимость таблицы не нужна. Когда просто нужно расположить текст или картинки в пост так, чтобы они ровно стояли.
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>
просто подставляете адрес своего фона и адреса своих картинок...ну или кнопок....или...а впрочем кто во что горазд.
Наконец то я закончила этот урок.
Спасибо за терпение..но...у вас теперь есть важные и готовые формулы...и вы не боитесь слов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
Серия сообщений "Оформление текста":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - КАК СДЕЛАТЬ СВОЮ НАДПИСЬ НА ИЗОБРАЖЕНИИ В ОНЛАЙН-ФОТОШОП
...
Часть 11 - СДЕЛАТЬ ТЕКСТ С ПРОКРУТКОЙ ВО ФРЕЙМЕ...
Часть 12 - ШПАРГАЛКА ПО УВЕЛИЧЕНИЮ И УМЕНЬШЕНИЮ РАЗЛИЧНЫХ ШРИФТОВ
Часть 13 - ТАБЛИЦЫ (3 урока по созданию таблиц)
Часть 14 - Бегущая строка + слайд-шоу
Часть 15 - ГЕНЕРАТОРЫ РАЗНЫХ ТЕКСТОВ
...
Часть 21 - Фотоприколы. Генератор надписей на картинках
Часть 22 - Он-лайн генератор промотки для текста
Часть 23 - Простые правила оформления статей для сайта (блога)
Комментарии (2):
starushka471
09-12-2018-14:56
удалить
Оля! Побродила по Вашему дневничку, натырила уроков целую папку в закладки.Спасибо огромное, поняла, что чайник я ржавый и мне ещё"учиться,учиться и учиться"Коллекционерка, 
Коллекционерка
09-12-2018-15:42
удалить
Ответ на комментарий starushka471 #
Рада что пригодилась.Я многое сохраняю на "потом"не все освоила, разумеется)
И Лиру люблю безмерно за такие возможности)
А ржавчина..Это благородная патина)
Комментарии (2):
вверх^
Вы сейчас не можете прокомментировать это сообщение.
Дневник ТАБЛИЦЫ (3 урока по созданию таблиц) | Коллекционерка - Коллекционерка |
Лента друзей Коллекционерка
/ Полная версия
Добавить в друзья
Страницы:
раньше»