Техническая поддержка сервиса Quadro.Boards

sadhaka

Здесь Вы можете попросить сделать Вам таблицу.

1. ссылка на форум

2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

4. границы у таблицы: есть/нет (нужное подчеркнуть)

5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.

6. желаемая высота таблицы (фиксированная или растягивается по содержимому)

7. шаблоны картинок к кнопкам (если нужны) нужного размера.

Или обучиться самому:

Свернутый текст

РАЗДЕЛ I. Создание таблицы.

Шаг 1. Обозначение таблицы.

Первым делом пишем теги, обозначающие начало и конец таблицы:
<table>

</table>
Шаг 2. Строки.

Любую таблицу начинают писать со строк, поэтому подумайте и решите, сколько строк вам необходимо.

Тег начала и конца строчек таблицы выглядит вот так:
<tr></tr>
Теги строк нужно располагать внутри тегов, обозначающих начало и конец таблицы.

Например, необходимо 4 строки - код будет выглядеть вот так:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Шаг 3. Ячейки.

Тег, обозначающий ячейку таблицы выглядит вот так:
<td></td>
Код ячейки вписывается внутри кода строки.

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

код будет выглядеть вот так:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Шаг 4. Заполнение таблиц текстом.

Все содержимое ячеек таблицы вписывается между тегов ячейки, например вот так:
<td>ТЕКСТ</td>
Внутрь тегов ячеек можно вставлять любые html-элементы: текст в html-форматировании, картинки, ссылки, видео, бегущие строки и т.п.

Для примера заполню нашу таблицу:
<table>
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица еще не отформатирована (про форматирование таблиц см. дальше).
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть данная таблица, используйте этот код:
Код:
<table border=3>
    <tr>
    <td>ячейка 1</td>
    <td>ячейка 2</td>
    <td>ячейка 3</td>
    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>
Шаг 5. Объединение ячеек.

Для объединения ячеек существуют теги форматирования таблиц colspan и rowspan

colspan используется для объединения ячеек по горизонтали.
rowspan используется для объединения ячеек по вертикали.

Вписываются они в тег ячейки следующим образом:
<td colspan="2"> ТЕКСТ</td>
красное - это, как вы видите - тег, обозначающий ячейку.
синее - это атрибут colspan, который позволит растянуть ячейку.

зеленое - это количество объединяемых ячеек.
оно может принимать значение только целых чисел, начиная с 2. НЕЛЬЗЯ ОБЪЯДИНИТЬ 1,5 или 2,5 ячеек.

ВАЖНО! На самом деле мы не объединяем ячейки, а растягиваем одну, например, на две позиции, поэтому после приминения тегов colspan или rowspan НЕОБХОДИМО УДАЛИТЬ ЛИШНИЕ ТЕГИ ЯЧЕЕК!

Примеры

Пример 1: colspan.

Все примеры приводятся на вышеупомянутой таблице.

Допустим необходимо объединить ячейки 1, 2 и 3 в одну строчку.

Делается это следующим образом:
<table>
<tr>
<td colspan="3">ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
синее - тег, позволяющий нам объединить ячейки.
Мы вписали число 3, потому что объединяем 3 ячейки в одну.

красное необходимо удалить.

Финальный код будет выглядеть вот так:
<table>
<tr>
<td colspan="3">ячейка 1-3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица еще не отформатирована (про форматирование таблиц см. дальше).
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Код:
<table border=3>
    <tr>
    <td colspan="3">ячейка 1-3</td>
    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>
Пример 2: rowspan.

Как говорилось ранее, тег rowspan объединяет ячейки по вертикали, поэтому для удобства я расположила код нашей таблицы таким образом:
<table>
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td>ячейка 4</td> <td>ячейка 5</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 7</td> <td>ячейка 8</td> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Объединим ячейку 4 с ячейкой 7, а ячейку 5 с ячейкой 8.

Для этого вписываем тег rowspan в тег <td> (обозначающий начало ячейки) у ячейки 4 и ячейки 5.
Мы в обоих случаях объединяем 2 ячейки (4-ую с 7-ой, а 5-ую с 8-ой), поэтому вписывать надо: rowspan="2"
(Если бы мы объединяли, например, 4-ую, 7-ую и 10-ую ячейки, то вписывать нужно было бы rowspan="3", т.к. в таком случае, получалось бы объединение 3-х ячеек)

Получаем вот такой результат:
<table>
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4</td> <td rowspan="2">ячейка 5</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 7</td> <td>ячейка 8</td> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Теперь нужно удалить ячейки 7 и 8, отмеченные темно-синим цветом, т.к. мы уже обозначили тегом rowspan то, что ячейки 5 и 4 состоят из 2-х ячеек, нужно освободить им для этого место.

Итоговый код:
<table>
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица еще не отформатирована (про форматирование таблиц см. дальше).
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Код:
<table border=3>
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>
Выводы из примеров: ПРАВИЛА ОБЪЕДИНЕНИЯ ЯЧЕЕК ТАБЛИЦ В HTML.

1. Объединение ячейки - это растягивание оной на определенное количество позиций, поэтому ячейки, которые раньше занимали это место НЕОБХОДИМО УДАЛЯТЬ.

2. colspan - для горизонтального объединения, rowspan - для вертикального объединения.
Иными словами можно сказать: сolspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов. (с)

3. Для того, чтобы легче ориентироваться, вписывайте тег colspan в самую левую ячейку из тех, которые объядиняете, а тег rowspan - в самую верхнюю из тех, которые объединяете. Потом будет проще вычислить лишние ячейки первоначального кода, которые необходимо удалить.

РАЗДЕЛ II. Форматирование таблицы в HTML.

Шаг 1. Фон таблицы, строк, ячеек.

Фон таблицы задается при помощи тегов bgcolor и background

bgcolor используется для цветовых значений (когда вы назначаете таблице или элементу таблицы цвет) и принимает вид:
bgcolor="#цвет"
background используется для фоновых изображений (установка картинки в качестве фона) и принимает вид:
background="ссылка_на_картинку"
Для того, чтобы задать фон всей таблицы, необходимо вписать подходящий элемент в тег начала таблицы: <table>

Для того, чтобы задать фон строки, необходимо вписать подходящий элемент в тег начала строки: <tr>

Для того, чтобы задать фон ячейки, необходимо вписать подходящий элемент в тег начала ячейки: <td>

Важно отметить, что в html-"раскрашивании" имеется иерархия расставления цветов.
В первую очередь отображаются цвета ячеек, во вторую очередь - строк, а фон, вписанный в код всей таблицы - в самую последнюю очередь.

Например, если в тег <table> вписать красный цвет, что задаст фоновый цвет для ВСЕЙ таблицы, а в одну из ее строк (<tr>) вписать синий цвет, то весть фон таблицы будет красным, но фон отмеченной строки будет синим.

Примеры

Пример 1: Фоновое изображение в таблице.

Осуществим следующую задачу:

Для этого необходимо дописать в уже существующий код таблицы ссылку на изображение:
<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица форматирование таблицы еще не закончено.
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Код:
<table border=1 background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>
Такой же принцип можно использовать, встраивая картинки в строки и ячейки.
Для наглядности.

Строка:
<tr background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif"> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>
Ячейка:
<tr> <td background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>
Пример 1: Фоновый цвет в таблице.

Для наглядности зададим фон сразу нескольким элементам таблицы и добьемся следующего:

Сначала определим цвета.
Желтый цвет у нас имеет код f3f167 и оранжевый - f3ca67
(определить цвет можно в помощью photoshop или воспользоваться таблицей html-цветов)

Сначала окрашиваем ячейку 1-3. для этого, находим ее в коде:
<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Как мы видим, благодаря тегу colspan, у нас только 1 ячейка в строке, поэтому нам все равно, куда ставить тег bgcolor: можно в строчку (tr), можно в ячейку(td) - без разницы. Я решила вписать код в строку:
<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
теперь расставим тег bgcolor="#f3ca67" по ячейкам 4+7, 6 и 9.
Находим их в коде:
<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
а теперь приписываем в тег начала ячейки <td> наш цвет:
<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
<tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
готово. =)

Итоговая таблица не будет отображаться аналогично рисунку, т.к. таблица форматирование таблицы еще не закончено.
Если все же терзает любопытство и вы хотели бы посмотреть, как должна выглядеть таблица, используйте этот код:
Код:
<table border=1 background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
        <tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>
Шаг 2. Границы таблицы. Ширина и цвет.

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

Вписывается он таким образом:
<table border=1> ... </table>
Цифра - это ширина границ.

Внимание!
border можно вставлять только в тег <table>! Невозможно задать одной ячейки одну ширину, а другой - другую!

Цвет границ определяется тегом bordercolor следующем образом:
<table border="1" bordercolor="#000000"> ... </table>
Синим отмечен цвет границ.

Внимание!
И опять же нельзя задать разный цвет границ для разных ячеек.
А так же невозможно встроить фоновое изображение (рисунок) в границы таблиц.

Примеры

Сделаем для уже существующей нашей таблицы жирную рамку пурпурного (для наглядности) цвета

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif" border="5" bordercolor="#bd1da5">
<tr bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
<tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
красным отмечены необходимые теги
синим отмечена ширина границ
розовым отмечен цвет, который был выбран для границ.

можете вставить этот код, чтобы посмотреть, что получилось.

Шаг 3. Ширина и высота таблицы. Ширина и высота ячеек таблицы.

если вы вставляли код таблицы, чтобы посмотреть, что же получается вы видели следующее:

Резонный вопрос: как увеличить размеры таблицы?
делается это тегами width (для ширины) и height (для высоты)

Форматируется таблица по ширине и высоте в пикселях или в процентах.

В пикселях это прописывается следующим образом:
height="35" width="50"
красным - обозначение тега
синим - значение ширины в пикселях

Часто, особенно в случае с форумами, таблицы удобнее форматировать по ширине в процентах. В этом случае таблица растягивается на процент от всей доступной ширины области, куда ее ставят.

Делается это так:
width="100%"
красным - обозначение тега
синим - значение ширины в процентах

Примеры

Пример 1: Растягиваем таблицу по ширине в процентах.

Добьемся следующего: растянем таблицу по ширине на всю допустимую область, а первой и последней колонке уделим минимум места, оставив большее пространство для колонке по центру.

В код этой таблицы (из кода убраны теги задающие цвет и фон таблицы для наглядности в рассмотрении тегов) вписываем width="100%", чтобы растянуть ее на всю доступную ширину:
<table border=3 width="100%">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
теперь таблица выглядит вот так:

Следующая задача - задать ширину колонкам.
Для этого ищем самые верхние ячейки, с которых начинаются колонки. Как видно, ячейка 1-3 нам не поможет, потому что она идет одной строкой. Нам нужны ячейки 4+7, 5+8 и 6.
Для начала, определимся, насколько широкой должна быть самая большая колонка (а самая большая колонка начинается с ячейки 5+8). Мною было принято решение растянуть ее до 60%. Ищем ее в коде и присваиваем значение:
<table border=3 width="100%">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2" width="60%">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Теперь вспоминаем математику: у нас есть таблица в 100% места, 60% мы уже выделили центральной колонке: 100 - 60 = 40.
у нас осталось 2 колонки, следовательно: 40 / 2 = 20.
Итого: на каждую ячейку нам нужно выделить по 20% места.
<table border=3 width="100%">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="20%">ячейка 4+7</td> <td rowspan="2" width="60%">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Мы достигли желаемого результата:

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

Например, если мы задали всей таблице (таблица состоит из 2-х колонок) ширину 80%, а одной из ячеек в колонке ширину 20%, то очевидно, что вторая будет занимать 60%. (80 - 20 = 60)

Точно так же очевидно, что ширина нижестоящих ячеек будет равна заданной вышестоящим.
просто геометрически невозможно растянуть две разные ячейку из ОДНОЙ И ТОЙ ЖЕ колонки на разную величину. это уже совсем другая таблица получится и таких эффектов мы достигаем с помощью тега colspan - никогда это не путайте!.

Пример 2: Задаем фиксированную высоту и ширину в пикселях.

Сделаем таблицу высотой 500 пкс и шириной 800 пкс, а так же прочими величинами ширины и высоты, отмеченными на рисунке:

Для начала разберемся со всеми характеристиками ширины.
1. Задаем ширину всей таблицы:
<table border=3 width="800">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

2. Задаем ширину первой колонки.
Для этого выбираем самую верхнюю ячейку колонки - ячейка 4+7
<table border=3 width="800">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

3. Тоже самое делаем со второй колонкой. (ячейка 5+8)
<table border=3 width="800">
<tr> <td colspan="3">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

На этом работа с шириной ячеек таблиц закончена!
Почему не вписана ширина последней ячейки?
Потому что очевидно, что 800 - 500 - 150 = 150. Математику нужно знать. =)
Мы могли задать ширину последней ячейки, но тогда не нужно было бы вписывать в тег <table> ширину всей таблицы. Это было бы излишним, ведь очевидно, что, просуммировав ширину всех ячеек, мы получаем ширину всей таблицы.

Теперь необходимо разобраться с высотой таблицы.
Для этого берем самые крайние ячейки: 1-3, 4+7 и 10.

1. Фиксируем по высоте ячейку 1-3 (ее, кстати, можно зафиксировать и через тег tr и через тег td - без разницы, ведь это единственная ячейка в строке):
<table border=3 width="800">
<tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

2. Фиксируем по высоте ячейку 4+7

тут важно отметить, что терез тег строки (tr) нельзя фиксировать высоту, т.к. эта ячейка является объединением 2-х ячеек из разных строк. Ваша таблица от таких "номеров" примет непредсказуемый вид. А, зафиксировав ячейку, мы можем быть уверены, что все, что находится после нее по горизонтали примет такую же высоту.
<table border=3 width="800">
<tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

3. Фиксируем по высоте последнюю строчку.

Для разнообразия ячейку 10 я зафиксирую через тег строки, это позволительно, т.к. в строке нет никаких объединений тегом rowspan
<table border=3 width="800">
<tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

Все, таблица готова.
Теперь можно, например, вставить в нее фоновое изображение размером 800*500:
Код:
<table border=3 width="800" [b]background="http://i051.radikal.ru/0911/a4/f4c815cfcf1d.jpg"[/b]>
        <tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Шаг 4. Выравнивание текста таблицы.

В таблицах можно выравнивать текст, состыковывая его с верхней, с нижней границей или по центру.

Делается это с помощью атрибута valign.

для расположения содержимого ячейки вверху:
valign="top"
для расположения содержимого ячейки внизу:
valign="bottom"
для расположения содержимого ячейки по центру (в обычных ситуациях не применяется, т.к. текст уже находится по умолчанию по центру):
valign="middle"
Примеры

Добьемся следующего результата:

1. "Поднимаем" текст в ячейке 1-3
<table border=3 width="800">
<tr> <td colspan="3" height="100" valign="top">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

2. "Опускаем" текст в ячейках 10, 11 и 12

Как мы видим, эти ячейки находятся в одной строке, следовательно мы можем не вписывать атрибут в каждую ячейку (<td>), а 1 раз прописать его в строке (<tr>).

(а если вам понадобится сразу все надписи во всех ячейках держать сверху или снизу, просто вписывайте атрибут в тег <table>)
<table border=3 width="800">
<tr> <td colspan="3" height="100" valign="top">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
<tr> <td>ячейка 9</td> </tr>
<tr height="100" valign="bottom"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>
Результат:

Шаг 4. Выравнивание ячеек таблицы. Расстояние между ячейками. Отступ текста относительно границ ячеек.

Выравнивание ячеек таблицы и содержимого ячеек осуществляется благодаря атрибутам cellspacing и cellpadding.

cellspacing отвечает за расстояние ячеек относительно друг друга и ширину границ между ними.
Значение этого тега задается в пикселях:
cellspacing="1"
Если вы хотите, чтобы границ между ячейками не было вообще, то необходимо задать для атрибута cellspacing значение "0":
<table cellspacing="0">
....
</table>
С помощью атрибута cellpadding вы можете контролировать отступ содержимого ячеек от границ между ячейками.
Значение этого атрибута тоже задается в пикселях:
cellpadding="5"
Примеры

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

Вот ее исходный код, который мы будем менять:
Код:
<table width="500">
        <tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
        <tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
        <tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>
Пример 1: Убираем границы между ячейками.
Добьемся такого результата:

<table width="500" cellspacing="0">
<tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
<tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
<tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>
можно сравнить результат:
было
стало
Пример 2: Отодвигаем содержимое ячейки от краев.

Добьемся такого результата:

<table width="500" cellspacing="0" cellpadding="10">
<tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
<tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
<tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
<tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>
Теперь сравним:
было
стало
источник

Теги: таблицы, хтмл-таблица, таблица в объявлении, заказать таблицу, table

+2

хмельницкая · Поделиться**101**29.04.2014 10:19:38

sadhaka
ай, спасибо чудесная!)

0

Falou · Поделиться**102**05.05.2014 18:42:41

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

Пример таблицы установлен здесь: http://testprob.rusff.me/
А установить её потом собираемся на этот форум: http://thegrimm.rusff.me/

В общем, конкретно из-за косяка в коде установить её на форум не можем, а найти косяк самостоятельно то же не выходит, как и не выходит переделать код таблицы так, что бы на форуме ничего никуда не съехало.
Помогите пожалуйста.

Отредактировано Falou (05.05.2014 18:43:50)

0

sadhaka · Поделиться**103**05.05.2014 20:22:21

Falou

Код:

<br><br><br>
<center><img src="http://sc.uploads.ru/CfvhT.jpg"></center>

<style> 
#menu {
margin-top: 10px;}

#menu span {
width: 214px;
height: auto;
display: block;
margin: 0;
padding: 0;}

#submenu {
padding: 10px;
width: 400px;}

.submenutext {
display: none;
text-align: center;
height: 210px;}
</style>

<center><table style="width: 600px; height: 230px; background: transparent center no-repeat; margin-top: -300px;" border="0" cellpadding="0" cellspacing="0" >
 <tbody>
  <tr>
   <td valign="middle" align="center" style="width: 224px;">
    <div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
    </div>
   </td>
   <td id="MenuTxT" align="center" valign="middle">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;"><br/>

<center><h2>GRIMM: Imagine the Impossibilities</h2>
<br><br><br><br>
Добро пожаловать в Портлэнд! Задержитесь у нас ненадолго и вы поймете, что хотите остаться здесь навсегда. У нас дружелюбная администрация, готовая всегда помочь, отличные игроки и масса крышесносных идей в голове.  <br>
<b>система игры:</b> эпизодическая<br>
<b>рейтинг:</b> nc-21<br>
Ролевая находится на стадии подготовки к перезапуску: переписывается сюжет, дорабатываются акции, расширяется справочник по существам. Оставайтесь с нами, ну и морально поддерживайте администрацию, мы без вас никуда!
<br>
<b>ВАЖНО:</b> Нам требуются модераторы, особенно по части графики и пиара.
</center>

</div>
     <div id="sm2" class="submenutext"><br/>
<center><h3><b>Полезные Ссылки</b></h3>
<br><br> 
<font size="3" face="Georgia" color="#0d8f32">
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=2#p10" class="tvm" target="">Гостева</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=3" class="tvm" target="">Акции</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=4#p12" class="tvm" target="">Правила</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=5#p13" class="tvm" target="">Сюжет</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=14#p44" class="tvm" target="">Шаблон Анкет</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=8#p35" class="tvm" target="">Занятые Внешности</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=9#p37" class="tvm" target="">Занятые Имена и Фамилии</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=3#p11" class="tvm" target="">Расы</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=9" class="tvm" target="">Пиар</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=10" class="tvm" target="">Партнёрство</a></font>
</center> 


</div>
     <div id="sm3" class="submenutext"><br/>
<center>АМС
</center>

</div>
     <div id="sm4" class="submenutext"><br/>
<br>
BEST PERSON

</div>

<div id="sm5" class="submenutext"><br/>
<br>
ПАРТНЕРЫ

<br>
<br>
<a href="http://top.roleplay.ru/20280" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
<img src="http://img.rpgtop.su/88x31x11x7.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a> <a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=17170' target='_blank'><img src="http://palantir.in/count.php?id=17170&cid=counter2007_6.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></a> <a target="_blank" href="http://tank.mybb.ru" title="Ролевой Каталог 'ТАНКЪ'"><img src="https://forumstatic.ru/files/000e/fd/f7/73767.gif" border="0"></a>

</div>

</div>
</td>
</tr>
</tbody>
</table></center>

0

Ichimaru Gin · Поделиться**104**05.05.2014 20:25:41

опоздал х)

Falou
держите
посмотрите, как встала: http://watahw.rusff.me/

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>


<style>	
#fontab {
  background: url("http://sc.uploads.ru/CfvhT.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
  height: 300px;
}

#menu {
  float: left;
  height: 300px;
  width: 200px;
}

#menu span {
height: auto;
display: block;
margin: 0;
padding: 0;}

#submenu {
  height: 280px;
  padding: 10px;
  width: 470px;
}

.submenutext {
display: none;
text-align: center;
height: 210px;}
</style>

<div id="fontab" align="center">
    <div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://uploads.ru/i/O/o/Q/OoQ3s.png"></span>
    </div>
<table style="border="0" cellpadding="0" cellspacing="0" >
 <tbody>
  <tr>
   <td id="MenuTxT" align="center" valign="middle">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext"><br/>

<center><strong>GRIMM: Imagine the Impossibilities</strong>
<br>
Добро пожаловать в Портлэнд! Задержитесь у нас ненадолго и вы поймете, что хотите остаться здесь навсегда. У нас дружелюбная администрация, готовая всегда помочь, отличные игроки и масса крышесносных идей в голове.  <br>
<b>система игры:</b> эпизодическая<br>
<b>рейтинг:</b> nc-21<br>
Ролевая находится на стадии подготовки к перезапуску: переписывается сюжет, дорабатываются акции, расширяется справочник по существам. Оставайтесь с нами, ну и морально поддерживайте администрацию, мы без вас никуда!
<br>
<font color="maroon"><b>ВАЖНО:</b></font> Нам требуются модераторы, особенно по части графики и пиара.
</center>

</div>
     <div id="sm2" class="submenutext"><br/>
<h3><b>Полезные Ссылки</b></h3>
<br><br> 
<font size="3" face="Georgia" color="#0d8f32">
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=2#p10" class="tvm" target="">Гостева</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=3" class="tvm" target="">Акции</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=4#p12" class="tvm" target="">Правила</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=5#p13" class="tvm" target="">Сюжет</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=14#p44" class="tvm" target="">Шаблон Анкет</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=8#p35" class="tvm" target="">Занятые Внешности</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=9#p37" class="tvm" target="">Занятые Имена и Фамилии</a>
<br><a href="http://thegrimm.rusff.me/viewtopic.php?id=3#p11" class="tvm" target="">Расы</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=9" class="tvm" target="">Пиар</a>
<br><a href="http://thegrimm.rusff.me/viewforum.php?id=10" class="tvm" target="">Партнёрство</a></font>
</div>


     <div id="sm3" class="submenutext"><br/>
АМС

</div>
     <div id="sm4" class="submenutext"><br/>
<br>
BEST PERSON

</div>

<div id="sm5" class="submenutext"><br/>
<br>
ПАРТНЕРЫ

<br>
<br>
<a href="http://top.roleplay.ru/20280" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
<img src="http://img.rpgtop.su/88x31x11x7.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a> <a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=17170' target='_blank'><img src="http://palantir.in/count.php?id=17170&cid=counter2007_6.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></a> <a target="_blank" href="http://tank.mybb.ru" title="Ролевой Каталог 'ТАНКЪ'"><img src="https://forumstatic.ru/files/000e/fd/f7/73767.gif" border="0"></a>

</div>

</div>
</td>
</tr>
</tbody>
</table>
</div>

0

Falou · Поделиться**105**05.05.2014 20:43:27

sadhaka огромное спасибо, я теперь понял в чём была беда.
Ichimaru Gin и вам спасибо большое. )))

0

Фера · Поделиться**106**10.05.2014 09:06:47

1. Ссылка на форум.
http://lifeanimal.0pk.ru/
2. Ширина форума.
800 пикс. Если вдруг ошиблась, то она видна на самом форуме.
3. Рисунок.
Общий вид.

Отдельные элементы

Кнопка.
Кнопка активной вкладки. (на которую нажали)
Текстовое поле.

4. Описание.
Таблица с четырьмя вкладками, подписанными как на картинке. В каждой из вкладок текстовое поле делится на две равные части с заголовками (если можно будет, то заголовки сама впишу), заголовки и названия вкладок написаны шрифтом Georgia (цвет, если что #313318), остальной текст в окошках обычный (как везде на форуме).
Прокрутка во всех окошках нужна, но чтобы появлялась только при необходимости. Окошки в текстовом поле разделяет тоненькая полоска, желательно чтобы она не доходила до границ текстового поля (показано на картинке).
5. Желаемая высота таблицы.
Не более 400 пикс. (размер всей таблицы с учётом кнопок).

Если что-то забыла или написала не так, извините и заранее большое спасибо.

0

Ichimaru Gin · Поделиться**107**10.05.2014 12:27:47

Фера
Демо 10.05.2014 со стилем
Постоянное демо

В объявление

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!-- Таблица -->
<style>
#menu {
  height: 30px;
  margin-bottom: 30px;
  padding: 0;
  text-align: center;
  width: 775px;
}


#menu span {
  background: url("http://sc.uploads.ru/V15UK.png") no-repeat scroll center center rgba(0, 0, 0, 0);
  color: #313318;
  display: inline-block;
  font-family: georgia;
  font-size: 16px;
  height: auto;
  padding: 30px 10px;
  text-align: center;
  width: 150px;
}

#menu .tabactive {
  background: url("http://sa.uploads.ru/ETVDw.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

#MenuTxT {
  background: url("http://sb.uploads.ru/ALQK0.png") no-repeat scroll center center rgba(0, 0, 0, 0);
  font-size: 12px;
  height: 321px;
  margin-bottom: 0;
  text-align: center;
  width: 775px;
}

#submenu {
  height: 300px;
  width: 775px;
}

.submenutext {
  display: none;
  padding-top: 15px;
  text-align: center;
  width: 700px;
}

.subleft {
  float: left;
  vertical-align: top;
  width: 49%;
}

.subright {
  float: right;
  vertical-align: top;
  width: 49%;
}
.subright > h2, .subleft > h2 {
font-family: georgia;
color: #313318;
}

.prokrytka {
  height: 240px;
  margin-top: 40px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 10px;
  text-align: justify;
}
</style>

<table border=0 height="auto" style="background-position: relative;"><tbody>
  <tr>
   <td>
    <div id="menu"><span alt="#sm1" style="cursor: pointer;">Новости</span>
<span alt="#sm2" style="cursor: pointer;">Навигация</span>
<span alt="#sm3" style="cursor: pointer;">АМС</span>
<span alt="#sm4" style="cursor: pointer;">Игра</span>
</div>
   </td>
</tr>
</tbody>
</table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
<div class="subleft">
<h2>Добро пожаловать!1</h2><br>
<div class="prokrytka">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<div class="subright">
<h2>Заголовок 2</h2><br>
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>

     <div id="sm2" class="submenutext"><br/>
<div class="subleft">
<h2>Добро пожаловать!3</h2><br>
<div class="prokrytka">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<div class="subright">
<h2>Заголовок 4</h2><br>
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>

     <div id="sm3" class="submenutext"><br/>
<div class="subleft">
<h2>Добро пожаловать!5</h2><br>
<div class="prokrytka">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<div class="subright">
<h2>Заголовок 6</h2><br>
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>

     <div id="sm4" class="submenutext"><br/>
<div class="subleft">
<h2>Добро пожаловать!7</h2><br>
<div class="prokrytka">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<div class="subright">
<h2>Заголовок 8</h2><br>
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>


</div>
   </td>
</tr>
 </tbody>
</table>

0

Фера · Поделиться**108**10.05.2014 13:15:33

Ichimaru Gin
Большое спасибо :з

0

pons · Поделиться**109**10.05.2014 14:22:15

1. ссылка на форум

но лого в обработке, таблицу сунем туда в пустующую под нее зону

2. ширина форума
962px, таблицу (вместе со вкладками) хорошо бы заиметь на 850px :flirt:

3. добротный рисунок

табличка

1 и основная вкладка

2 вкладка

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

4. границы у таблицы:
нет

6. желаемая высота таблицы
фиксированная 250px

я настолько сама леворукая, что буду ждать хоть вечность эту таблицу

0

Ichimaru Gin · Поделиться**110**10.05.2014 17:37:14

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

0

pons · Поделиться**111**10.05.2014 17:45:41

Ichimaru Gin
да времени до открытия нам еще можно с таблицей потянуть, да и сама я ни в зуб ногой - так что подожду, конечно :love:
а картиночки кину завтра или сегодня попозже, ибо фотошоп сейчас закрыт и некогда пока туда лезть))

0

pons · Поделиться**112**11.05.2014 14:52:02

Ichimaru Gin
пробные кариночки в таблицу, как и просили))

вкладка первая:
кнопка: http://savepic.net/5386802m.png (85x101px)
если будут изменения при наведении/нажатии на кнопку вкладки: http://savepic.net/5431861m.png (85x101px)
простая картинка в центре: http://savepic.net/5424693m.png (200x168px)

вкладка вторая:
кнопка: http://savepic.net/5379637m.png (85x89px)
при наведении/нажатии на кнопку вкладки: http://savepic.net/5435956m.png (85x89px)
простая картинка в центре: http://savepic.net/5424693m.png (200x168px)
админы (трижды эта картинка): http://savepic.net/5419572m.png (76x75px)

и картинки-ссылки справа:
верхняя:
не активная - http://savepic.net/5427767m.png (86x98px)
при наведении - http://savepic.net/5401143m.png (86x98px)
нижняя:
не активная - http://savepic.net/5393975m.png (86x92px)
при наведении - http://savepic.net/5384759m.png (86x92px)

0

Ichimaru Gin · Поделиться**113**14.05.2014 08:08:00

pons

в объявление

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!-- Таблица -->
<style>

#pun-announcement .container {
  padding: 0 !important;
  width: 790px !important;
}

#menu {
  padding: 0;
  text-align: center;
  width: 101px;
  padding: 0;
}


#menu span {
  background: url("http://savepic.net/5431861m.png") no-repeat scroll center center rgba(0, 0, 0, 0);
  color: #313318;
  display: block;
  height: 81px;
  padding: 0;
  text-align: center;
  width: 101px;
}

#menu .tabactive {
  background: url("http://savepic.net/5386802m.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

#MenuTxT {
  border: 0 none;
  padding: 0;
  text-align: center;
}

#submenu {
  height: 180px;
  width: 578px;
  padding: 0;
}

.submenutext {
  display: none;
  font-size: 10px;
  height: 180px;
  text-align: center;
  padding: 0;
}

.ssyl1 {
background:url('http://savepic.net/5427767m.png') no-repeat center center;
display: block;
width: 101px;
height: 81px;
padding: 0;

}

.ssyl1:hover {
background:url('http://savepic.net/5401143m.png') no-repeat center center;
}

.ssyl2 {
background:url('http://savepic.net/5393975m.png') no-repeat center center;
display: block;
width: 101px;
height: 81px;
padding: 0;
}
.ssyl2:hover {
background:url('http://savepic.net/5384759m.png') no-repeat center center;
}

#sm1 {
background: url('http://savepic.net/5424693m.png') center center no-repeat;
  padding: 0;
}

#sm2 {
background: url('http://savepic.net/5424693m.png') center center no-repeat;
  padding: 0;
}

.subleft {
  float: left;
  height: 172px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5px 5px;
  text-align: justify;
  vertical-align: top;
  width: 185px;
}
.subright {
  float: right;
  height: 172px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5px 5px;
  text-align: justify;
  vertical-align: top;
  width: 184px;
}

.prokrytka {
  height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5px;
  text-align: justify;
}
.oams {
  text-align: center;
  padding: 0;
}
.oams img {
  height: 53px;
  width: 53px;
  padding: 0;
}


</style>

<div align="center" style="margin-top:-180px;" class="container" height="300px" width="810px">

<table border=0 height="auto" style="background-position: relative; padding: 0;"><tbody>
  <tr>
  <td width="101" style="padding: 0;">
    <div id="menu"><span alt="#sm1" style="cursor: pointer;"></span>
<span alt="#sm2" style="cursor: pointer;"></span>
</div>
   </td>

   <td id="MenuTxT"  align="center" valign="top"  style="padding: 0;">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;">
<div class="subleft">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
</div>


<div class="subright">
is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text
</div>
</div>

     <div id="sm2" class="submenutext">
<div class="subleft"><center>
<a href="http://watahw.hutt.ru/">ссылка1</a><br>
<a href="http://watahw.hutt.ru/">ссылка2</a><br>
<a href="http://watahw.hutt.ru/">ссылка13</a><br>
<a href="http://watahw.hutt.ru/">ссылка22</a><br>
<a href="http://watahw.hutt.ru/">ссылка12</a><br>
<a href="http://watahw.hutt.ru/">ссылка24</a><br>
<a href="http://watahw.hutt.ru/">ссылка33</a><br>
<a href="http://watahw.hutt.ru/">ссылка27</a><br>
<a href="http://watahw.hutt.ru/">ссылка3</a>
</center></div>


<div class="subright">
<div class="oams">
<a href="http://watahw.hutt.ru/"><img src="http://savepic.net/5419572m.png"></a>
<a href="http://watahw.hutt.ru/"><img src="http://savepic.net/5419572m.png"></a>
<a href="http://watahw.hutt.ru/"><img src="http://savepic.net/5419572m.png"></a>
</div>
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</div>
</div>
</div>

</div>
   </td>
  <td width="101"  style="padding: 0;">
<a class="ssyl1" href="https://support.rusff.me/viewtopic.php?id=2916&p=6#p59684"></a><br>
<a class="ssyl2" href="https://support.rusff.me/viewtopic.php?id=2916"></a>
</td>
</tr>
 </tbody>
</table>
    </div>

+2

pons · Поделиться**114**15.05.2014 09:26:55

Ichimaru Gin
вот спасибо, то что нужно :love: :shine:
пс. и ткните, пжл, где мне и что изменить, чтоб приветствие приподнять, а то и там отступ малость велик
пс2. а можно как-нибудь в этой таблице сделать картинки-вкладок для каждой из них разными (читаем: которые открывают вкладки)? ибо я попыталась сама найти, но таблицы везде другие, а я ни дум-дум в этом

Отредактировано pons (15.05.2014 19:18:55)

0

Ichimaru Gin · Поделиться**115**16.05.2014 10:51:13

pons
ага! кнопки по бокам должны были быть на рамке, теперь понятно) я вижу, вы сами разобрались, как расширить, не нужно переделывать?

Поднять приветствие:
на странице стиля находите:
#pun-status .container {
padding: 0.8em 1em 1em;
}

и заменяете на:

#pun-status .container {
padding: 0 1em 1em;
margin-top: -10px;
}

-10 - поднять наверх, чем больше отрицательное число, тем выше поднимется приветствие.

pons написал(а):

пс2. а можно как-нибудь в этой таблице сделать картинки-вкладок для каждой из них разными (читаем: которые открывают вкладки)?

если речь идет про картинки-ссылки слева, которые открывают вкладки, и вы хотите, чтобы при активной вкладке номер 1 они были зеленые (условно), а при открытой вкладке номер два они были красные, то надо просить sadhak-у. Скорее всего, понадобится дополнительный скрипт.
Если речь не об этом, то еще раз объясните задачу)

0

Nadeshiko Takei · Поделиться**116**31.05.2014 04:37:39

Простите, выполнила сама. Спасибо всё равно)

Отредактировано Nadeshiko Takei (31.05.2014 17:24:59)

0

albar · Поделиться**117**13.06.2014 18:41:10

1. ссылка на форум
http://testzone.anihub.ru/
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
914px
3. добротный рисунок с границами хотя бы в Paint'е:
приблизительно:
http://ipic.su/img/img7/fs/s1.1402695068.jpg
http://ipic.su/img/img7/fs/s2.1402695176.jpg
http://ipic.su/img/img7/fs/s3.1402695104.jpg
4. границы у таблицы: есть/нет
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
Прокрутка только на второй вкладке, где новости от администрации. Размер аватар админов где-то 80*80, модераторы 60*60. Кнопки вкладок картинками с отступами. Точный размер не могу сказать пока, но главное чтобы все влезло х_х
6. желаемая высота таблицы (фиксированная или растягивается по содержимому)
пусть будет где-то 500 px для начала. Можно же будет потом самому изменить ее высоту в случае чего?

Отредактировано albar (14.06.2014 01:37:05)

0

albar · Поделиться**118**15.06.2014 11:51:19

Если что, то таблица все еще актуальна)

0

Ichimaru Gin · Поделиться**119**16.06.2014 20:00:38

albar
здравствуйте, простите за задержку, сейчас сделаю)

0

Ichimaru Gin · Поделиться**120**17.06.2014 00:07:56

albar
Демо

В объявление

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!-- Таблица -->
<style>
/*Высота строки меню*/
#menu {
  height: 30px;
  padding: 0;
  text-align: center;
  width: 864px;
}

/*для отдельного слова менюшки*/
#menu span {
  color: #404040;
  display: inline-block;
  font-family: georgia;
  font-size: 20px;
  height: auto;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
  width: 150px;
}

/*активная менюшка*/
#menu .tabactive {
  border-bottom: 2px solid #FF0000;
}

/*весь текст под меню*/
#MenuTxT {
  font-size: 12px;
  height: 321px;
  margin-bottom: 0;
  text-align: center;
  width: 874px;
}


/*высоту ставить ту же, что выше*/
#submenu {
  height: 300px;
  width: 864px;
}

.submenutext {
  display: none;
  height: 0;
  text-align: center;
  width: 864px;
}

/*свойства всех заголовков*/
.zag {
  font-size: 16px;
  font-weight: bold;
}

/*свойства всех текстовых блоков*/
.simtxt {
  font-size: 11px;
  text-align: justify;
}

/*левая колонка всех вкладок*/
#nahl, #gll, #rekl {
  display: inline-block;
  float: left;
  width: 40%;
}

/*правая колонка всех вкладок*/
#nahr, #glr, #rekr {
  display: inline-block;
  float: right;
  width: 60%;
}


/*свойства всех текстов с прокруткой*/
.prokrytka {
  height: 230px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 10px;
  text-align: justify;
}
</style>

<table border=0 height="auto" style="background-position: relative;"><tbody>
  <tr>
   <td>
    <div id="menu"><span alt="#sm1" style="cursor: pointer;">НАЧАЛО</span>
<span alt="#sm2" style="cursor: pointer;">ГЛАВНОЕ</span>
<span alt="#sm3" style="cursor: pointer;">РЕКЛАМА</span>
</div>
   </td>
</tr>
</tbody>
</table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
<div id="nahl">
<div class="zag">О проекте</div>
<div class ="simtxt">
текст текст текст
</div>
<div class="zag">Навигация</div>
<div class="simnav">
<a href="https://support.rusff.me/viewtopic.php?id=2916&p=6#p60394">ссыль1</a><br>
<a href="https://support.rusff.me/viewtopic.php?id=2916&p=6#p60394">ссыль2</a><br>
<a href="https://support.rusff.me/viewtopic.php?id=2916&p=6#p60394">ссыль3</a><br>
<a href="https://support.rusff.me/viewtopic.php?id=2916&p=6#p60394">ссыль4</a><br>
</div>
</div>

<div id="nahr">
<div class="zag">О мире</div>
<div class ="simtxt">
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>



     <div id="sm2" class="submenutext"><br/>
<div id="gll">
<div class="zag">Администраторы</div>
<img src="http://forum.rmmedia.ru/customavatars/avatar36618_2.gif"><br>
<div class ="simtxt">немного текста1</div>
<img src="http://forum.rmmedia.ru/customavatars/avatar36618_2.gif"><br>
<div class ="simtxt">немного текста2</div>
<div class="zag">Модераторы</div>
<img src="http://www.forumklassika.ru/images/misc/unknown.gif"><img src="http://www.forumklassika.ru/images/misc/unknown.gif"><br>
<div class ="simtxt">немного текста3</div>
</div>

<div id="glr">
<div class="zag">Новости</div>
<div class ="simtxt">
<div class="prokrytka">
 is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>



     <div id="sm3" class="submenutext"><br/>
<div id="rekl">
<div class ="simtxt">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="simcart"><img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg">
</div>
</div>

<div id="rekr">
<div class="zag">Партенры</div>
<div class="simcart"><img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg"> <img src="http://fibistudio.ru/d/307343/d/88x31.jpg">
</div>
</div>
</div>
</div>



</div>
   </td>
</tr>
 </tbody>
</table>

albar написал(а):

Можно же будет потом самому изменить ее высоту в случае чего?

все можно, конечно, если не выйдет - говорите)

+2

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

Информация о пользователе

FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц (2)

Сообщений 101 страница 120 из 286

Поделиться111.10.2013 21:08:44

Поделиться10129.04.2014 10:19:38

Поделиться10205.05.2014 18:42:41

Поделиться10305.05.2014 20:22:21

Поделиться10405.05.2014 20:25:41

Поделиться10505.05.2014 20:43:27

Поделиться10610.05.2014 09:06:47

Поделиться10710.05.2014 12:27:47

Поделиться10810.05.2014 13:15:33

Поделиться10910.05.2014 14:22:15

Поделиться11010.05.2014 17:37:14

Поделиться11110.05.2014 17:45:41

Поделиться11211.05.2014 14:52:02

Поделиться11314.05.2014 08:08:00

Поделиться11415.05.2014 09:26:55

Поделиться11516.05.2014 10:51:13

Поделиться11631.05.2014 04:37:39

Поделиться11713.06.2014 18:41:10

Поделиться11815.06.2014 11:51:19

Поделиться11916.06.2014 20:00:38

Поделиться12017.06.2014 00:07:56