1


"Помощь в развитии Сайта "


"Торрент- трекер от Наших сайтов"


"Архив сайта"


"Народная Солянка за 17 декабря 2010 - утечка билда!!!!!"


Выбрать дизайн:
Страница 1 из 11
Модератор форума: XemorDio 
Форум » Для вебмастеров » Графика для сайта » Создаем таблицы для сайта
Создаем таблицы для сайта
Фреон Дата: Ср, 17.04.2013, 23:04:25 | Сообщение # 1

Призраки Зоны
Страна: Украина
Твой город: Полтава
Сталкер
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора

Таблицы



Если размеры ячеек таблиц изначально не заданы, они "подстраиваются” под объем содержимого ячеек.

По умолчанию границы таблиц не отображаются (border=0), чтоб назначить минимальную окантовку, нужно задать border=1.




Столбец 1 Столбец 2 Столбец 3


Код
<table border=1>
<td> Столбец 1 </td>
<td> Столбец 2 </td>
<td> Столбец 3 </td>
</table>




Первая ячейка 1-й строкиВторая ячейка 1-й строки
Первая ячейка 2-й строкиВторая ячейка 2-й строки


Код

<table border=1>
<tr>
<td>Первая ячейка 1-й строки</td>
<td>Вторая ячейка 1-й строки</td>
</tr>
<tr>
<td>Первая ячейка 2-й строки</td>
<td>Вторая ячейка 2-й строки</td>
</tr>
</table>




Рамки таблиц рельефно-двойные. так как по умолчанию атрибут cellspacing=2

Зададим cellspacing=0
Заголовок 1Заголовок 2
Содержание 1Содержание 2


Код

<nobr><table border=1 cellpadding=8 cellspacing=0 bordercolor=black></nobr>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Содержание 1</td>
<td>Содержание 2</td>
</tr>
</table>




ГородНаселение
Москва10.000.000

Код

<table cellpadding="5" cellspacing="5">
<tr>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Москва</td>
<td>10.000.000</td>
</tr>
</table>





Для плавного обтекания таблицы текстом:
ГородНаселение
Москва10.000.000


Код
<em>Lorem ipsum dolor sit amet consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam…</em>



в первый тег table нужно добавить
style="float: left; margin: 0 5px 2px 0;"
для аналогичного обтекания текстом справа:
style="float: right; margin: 0 0 2px 5px;"




Поместить несколько таблиц в ряд, например:
ГородНаселение
Москва10.000.000
ГородНаселение
Минск2.000.000
ГородНаселение
Киев2.000.000


Код:
Код

<table>
<td> <font color="black">Таблица 1</font> </td>
<td> <font color="black">Таблица 2</font> </td>
<td> <font color="black">Таблица 3</font> </td>
</table>




ГородНаселение
Москва10.000.000
Минск2.000.000
Киев2.000.000

Код

<table cellspacing="5" cellpadding="5">
<tr bgcolor="#aaaaff">
<th>Город</th><th>Население</th>
</tr>
<tr bgcolor="#dddddd">
<td>Москва</td><td>10.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Минск</td><td>2.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Киев</td><td>2.000.000</td>
</tr>
</table>




Заголовок 1Заголовок 2Заголовок 3
РЯД 2РЯД 2РЯД 2
РЯД 3РЯД 3РЯД 3
РЯД 4РЯД 4РЯД 4


Код

<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</th>
<tr>
<td>РЯД 2</td>
<td>РЯД 2</td>
<td>РЯД 2</td>
</tr>
<tr>
<td>РЯД 3</td>
<td>РЯД 3</td>
<td>РЯД 3</td>
</tr>
<tr>
<td>РЯД 4</td>
<td>РЯД 4</td>
<td>РЯД 4</td>
</tr>
</table>




Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


Код

<table border="8">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>




Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


Код

<table border="0" cellspacing="5">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>




БлогсервисыЖЖЛи.ру
ДиариЯ.ру


Код

<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
<td rowspan=2 align=center><b>Блогсервисы</b></td>
<td>ЖЖ</td>
<td>Ли.ру</td>
</tr>
<tr>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>




Блогсервисы
ЖЖЛи.руДиариЯ.ру


Код

<table border=5 bordercolor=99CCFF cellpadding=7 width=40%>
<tr>
<td colspan=4 align=center><b>Блогсервисы</b></td>
</tr>
<tr>
<td>ЖЖ</td>
<td>Ли.ру</td>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>




Табличным кодом можно задать цветной фон поста:

Теги… Все эти кавычечки, буквочки и скобочки -
как узоры следов на снегу. Сначала - неизвестная азбука, а потом, когда
вникнешь - книга, прочтение которой не вызывает затруднений.
Упоительнейшее занятие - пишешь слово, затем оборачиваешь его
замысловатыми иероглифами, кутаешь в слои черно-белых символов и
получаешь восхитительнейший результат. © singita

Код


<table bgcolor="teal" cellpadding="5">
<tr>
<td><font color="white"> TEXT </font></td>
</tr>
</table>





Можно фоном поста сделать картинку:


Спокойной ночи, дорогие друзья мои…


Код

<table cellpadding=30>
<tr>
<nobr><td background=URL картинки><font color=white>TEXT</font></td></nobr>
</tr>
</table>


Параметр cellpadding задает оступ текста от границ
картинки. Если объем текста превышает размеры картинки, она будет
автоматически продублирована нужное число раз (в примере выше 2 раза)




Таблицей можно сделать рамку картинки:


ЗАКАТ


Код

<center><table border="20" bgcolor="brown">
<caption align=bottom>ВАША ПОДПИСЬ</caption>
<tr><td>
<table border="12" bgcolor="brown">
<tr><td><img src=АДРЕС КАРТИНКИ></td></tr>
</table></td></tr>
</table></center>


Размер картинки любой - рамка сама "подгонится”




Быстро наложить текст на картинку без графических редакторов:



Закат на даче

Код

<table border="0" cellpadding="0" cellspasing="0">
<tr>
<th width=.. height=.. background="URL КАРТИНКИ" valign="bottom">
<font color="yellow">ВАШ ТЕКСТ </font></th>
</tr>
</table>



В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта "Свойства” вашей картинки)




Разделить пост на две части можно так:
 Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis …


Код

<nobr><table width="100%" cellpadding="0" cellspacing="10" border="0"></nobr>
<tr>
<td> TEXT1</td>
<td width="2" bgcolor="#000000"></td>
<td> TEXT2</td>
</tr>
</table>



В качестве разделителя служит пустой столбец
Код
<td width="2" bgcolor="#000000"></td>
, меняя
Код
width
и
Код
bgcolor
, меняем цвет и толщину разделителя




Делаем галереи картинок с помощью таблиц:

(здесь использованы кликабельные превьюшки. что и вам советую)
free image hostfree image host
free image hostfree image host
free image hostfree image host


Ее код:

Код

<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
</tr>
<tr>
<td>картинка-три</td>
<td>картинка-четыре</td>
</tr>
<tr>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>


Или так:


free image hostfree image hostfree image host
free image hostfree image hostfree image host


Код

<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
<td>картинка-три </td>
</tr>
<tr>
<td>картинка-четыре</td>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>



Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов

 
Reactor Дата: Чт, 08.08.2013, 23:52:37 | Сообщение # 2

Стрелок
Страна: Российская Федерация
Твой город: Нижний Новгород
Сталкер
В Зоне Реактора с 05.02.2011
Сообщений: 55
Заслуги в Зоне Реактора
За 50 Сообщений
Фу-фу-фу! Таблица это уже прошлый век.
Позже, я выложу урок на современном языке, как строить таблицу через <div>


[url
Дополнительная информация

Немного о Reactor..
Зарегистрирован: 05.02.2011
Группа: Сталкеры
Страна: Российская Федерация
город: Нижний Новгород
 
Фреон Дата: Пт, 09.08.2013, 21:00:57 | Сообщение # 3

Призраки Зоны
Страна: Украина
Твой город: Полтава
Сталкер
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Reactor, Напротив я ими часто пользуюсь))
 
Reactor Дата: Пт, 09.08.2013, 23:42:59 | Сообщение # 4

Стрелок
Страна: Российская Федерация
Твой город: Нижний Новгород
Сталкер
В Зоне Реактора с 05.02.2011
Сообщений: 55
Заслуги в Зоне Реактора
За 50 Сообщений
LENA_D, Пользоваться то можно, но у них мало возможностей, не надежны и т.д.

[url
Дополнительная информация

Немного о Reactor..
Зарегистрирован: 05.02.2011
Группа: Сталкеры
Страна: Российская Федерация
город: Нижний Новгород
 
Форум » Для вебмастеров » Графика для сайта » Создаем таблицы для сайта
Страница 1 из 11
Поиск:

Сегодня в Баре - Реактор

Кто был:
Легенда условных обозначений : Призрак, Администратор, Модератор, Проводник, Сталкеры, Чистое небо, Тёмные, Свобода, Наёмники, Нейтралы, Военные, Долг, Монолит, Заблокированные .

Последние сообщения:

Чат

Активисты Форума:

Нужные темы:


Radio Унесённых Сталкером
Все говорить и ничего не желать слушать есть признак гордости.
LENA_D               (09.10.2010)
CMIT               (03.04.2016)
kapa               (09.01.2014)
Dimon02022               (08.11.2011)
Strelok               (01.11.2014)
ULTRA               (04.09.2015)
tyman21               (09.11.2013)
Этот               (01.08.2015)
vitto               (31.03.2011)

Пришедшие в Бар:


XaMeJIe0H               (07.12.2016)
СНЕГУРОЧКА               (06.12.2016)
Bambarbeya               (06.12.2016)
BravoPahomov               (06.12.2016)
DedMoroz               (06.12.2016)
mag224               (05.12.2016)
Push 2 Check Рейтинг@Mail.ru Этот сайт защищен «Site Guard» Яндекс.Метрика