Техническая поддержка сервиса 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

Поделиться**201**05.12.2014 18:25:22

Здравствуйте, я хотела узнать, можете ли вы подправить уже готовую таблицу?

0

Opium · Поделиться**202**05.12.2014 18:43:52

Акта
Думаю можем, или в крайнем случае переделать можно всегда.

0

Поделиться**203**05.12.2014 18:56:00

1) Нужно сделать расстояние побольше между словами: "сюжет", "квесты", "конкурсы"
2) Убрать на всех слайдах надписи сверху
4) Сместить баннер ниже, под слайды
5) Установить размер изображения. То бишь, когда я вставляю аватар, он должен стать такого же размера как и эта картинка "ты"
И чуть чуть ее повыше сделать.

В хтмл-низ

Код:

<!--Контейнер-->
                              <script type="text/javascript">
$(document).ready(function() {
$("td.submenutext").hide();
$("td.submenutext:first").show();
$(".menuButton").click(function() {
    $(".menuButton").removeClass("tabactive");
    $(this).addClass("tabactive");
    var activeDiv = $(this).attr("alt");

    $("td.submenutext *").hide(600)
    $("td.submenutext").hide(1200)
    $("td."+activeDiv).show(1200)
    $("td."+activeDiv+" *").show(600)
    return false; });
});
</script>

В объявления

Код:

<!--Верхние ссылки-->
<center>
  <div id="link"> 
   <a href=" http://vion.rusff.me/viewtopic.php?id=79">Сюжет</a>
   <a href="http://vvion.ru/viewforum.php?id=24">Квесты</a>
   <a href="http://vvion.ru/viewforum.php?id=17">Конкурсы</a>
  </div>
</center>
<!--END Верхние ссылки-->

<table width="780px" style="
    margin-left: 2%;
">
    <tbody><tr>
<!--Картинка "новости"-->
   <td width="40%" align="center" height="30"><div id="name">Для гостей</div></td>
<!--END Картинка "новости"-->
    <td width="60%" align="center" height="30">
    <!-- Кнопки меню -->
    <div id="menu"> <b>
    <span alt="#sm1" class="menuButton tabactive">Новости</span>
    <span alt="#sm2" class="menuButton">Навигация</span>
    <span alt="#sm3" class="menuButton">В игре</span>
    <span alt="#sm4" class="menuButton">Баннеры</span>
               </b>
        </div>
    </td>
    </tr>
    <tr>
    <td width="40%" align="center" valign="top">
<div align="center" style="overflow: auto; overflow-x: hidden; width:98%; height: 100px; margin-top: 2px; padding: 1px;">
<!--Текст "Новости"-->
<center>текст</center>
<!--END Текст "новости"-->
</div>
<br>
    <!--Картинка "Администрация"-->
<center><div id="name">Администрация</div></center>
   <!--END Картинка "Администрация"-->
<div align="center" style="overflow: auto; overflow-x: hidden; width:98%; height: 120px; margin-top: 2px; padding: 1px;">
  <!--Список "Администрация"-->
<center>
<a href="/viewtopic.php?id=78#p109" target="_blank"><span><img src=" http://savepic.org/5298747.jpg" alt="" title="Вакантно!" border="0"></span></a>
<a href="/viewtopic.php?id=78#p109 " target="_blank"><span><img src="http://savepic.org/5298747.jpg  " alt="" title="Вакантно!" border="0"></span>
</span></a>
</center>
  <!--END Список "Администрация"--></div>
    
    </td>
    <td width="60%" align="center" id="MenuTxT" valign="top" style="height: 300px;">
    <div id="submenu" width="60%">
    <table width="100%"><tbody><tr>
         <td id="sm1" class="submenutext" style="display: table-cell;">
    <!-- Картинка "Новости" -->
    <div style="display: block;"><center><div id="name">На форуме</div></center>
    <!-- END Картинка меню -->
<div align="center" style="height: 130px; width: 98%; padding: 10px; overflow-x: auto;">

<!-- Текст "На форуме" -->
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


    <!-- END Текст "На форуме" -->

</div>
</div>
<a href="http://top.roleplay.ru/22902" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
<img src="http://img.rpgtop.su/rpgtop1.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a>
    </td>

            <td id="sm2" class="submenutext" style="display: none;">
<div>
    <!-- Картинка "Навигация" -->
<center><div id="name">Для новичков</div></center>
    <!-- END Картинка "Навигация" -->
<br style="display: inline-block;">
<div align="center" style="height: 200px; width: 98%; overflow-x: auto; padding: 0px;">

<div id="nav">
<!-- Ссылки -->

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


<center><div id="name">Для игроков</div></center>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


<!-- END Ссылки -->
</div>
</div>

</div>

    </td><td id="sm3" class="submenutext" style="display: none;">
    <div>
    <!-- Картинка "В игре" -->
<center><div id="name">Погода и время</div></center>
    <!-- END  Картинка "В игре" -->
<br>
<div align="center" style="height: 145px; width: 98%; overflow-x: auto; padding: 0px;">
    <!-- Текст "В игре" -->
<center>текст</center>
    <!-- END Текст "В игре" -->
</div>
</div>
    </td>
    </div></td>
         <td id="sm4" class="submenutext" style="display: none;">
    <div>

<div align="center" style="height: 250px; width: 98%; overflow-x: auto; padding: 0px;">
    <!-- Картинка "Баннеры" -->
<center><div id="name">Партнёры</div></center>
    <!-- END Картинка "Баннеры" -->
    <!-- Текст "Баннеры" -->
<a href="http://lns.rolbb.ru/" alt="Коты-Воители. Лес Новых Судеб. С вами с 2011 года"><img src="http://s6.uploads.ru/tRDkx.gif" ></a> <a href="http://cwmor.rolbb.ru/" target="blank"><img src="http://s5.uploads.ru/Pmw31.gif"></a><a target="_blank" href="http://www.misteria7.com/" title="Мистерия ждет Вас!"><img src="http://i39.servimg.com/u/f39/17/26/24/34/0bm10.gif" border="0"></a>
    <!-- END Текст "Баннеры" -->
</div>
</div>
    </td>
         
    </tr></tbody></table>
    </div>
    </td>
    </tr>
    </tbody></table>

Отредактировано Акта (05.12.2014 18:58:40)

0

Opium · Поделиться**204**05.12.2014 19:03:55

Акта
Лучще дайте ссылку на форум, так как играют роль и шрифты и общие настройки.

0

Поделиться**205**05.12.2014 19:06:59

Opium
Вион: зов сердца
Вот, ловите

0

Opium · Поделиться**206**05.12.2014 19:32:37

Акта написал(а):

1) Нужно сделать расстояние побольше между словами: "сюжет", "квесты", "конкурсы"

У вас в стиле есть настройки div#link , добавьте им :

word-spacing: 50px;

50 - интервал между словами.

Акта написал(а):

2) Убрать на всех слайдах надписи сверху

В стиля для div#name
допишите

display: none;

и не будет отображаться, но вам удобнее будет ориентироваться при изменении информации в объявлении.
правда в этом случае пропадет и "Администрация", и "Гостей".
Если они вам нужны, то тексте объявления нужно вручную стирать названия слайдеров.

... смотрю дальше

0

Поделиться**207**05.12.2014 19:34:08

Opium
О.О
Честно, я вообще не знаю, что где находится.

0

Opium · Поделиться**208**05.12.2014 20:53:53

Акта
Посмотрите форум.

+1

Noel · Поделиться**209**09.12.2014 19:54:48

1. http://indestructible.rusff.me
2. 800
3.

Картинка

4. границы у таблицы: есть/нет
5. доп.элементы
6. желаемая высота таблицы
Фиксируемая. 450

0

Ichimaru Gin · Поделиться**210**12.12.2014 23:33:40

Noel
Демо

В объявление:

Код:

<style>
#pun-announcement h2 span {
  display: none !important;
}
.kartinki {
  text-align: center;
}
.kartinki img {
  display: inline-block;
  max-height: 50px;
  padding: 0 !important;
  width: 250px;
}
.prokrytka {
  overflow-x: visible;
  overflow-y: scroll;
  padding: 0 5px 5px 0 !important;
  text-align: justify !important;
}
.tekstovy {
  text-align: justify !important;
}
.block1 div {
  display: inline-block;
  margin: 10px;
  text-align: center;
  vertical-align: top;
  width: 234px;
}

.block1 .prokrytka {
  height: 200px;
}
.block1 .kartinki img {
  height: 200px;
  max-height: none;
  width: 75px;
}
.ssylki {
  text-align: center;
}
.ssylki a {
  border-right: 1px solid;
  padding: 0 5px;
  text-decoration: none;
}
.ssylki a:last-child {
  border-right: medium none;
}
.blok2 {
  margin-top: 10px;
  text-align: center;
}
.blok2 div {
  display: inline-block;
  vertical-align: top;
}
.blok2 .prokrytka {
  height: 145px;
  width: 200px;
}
.blok2 .tekstovy {
  height: 145px;
  padding: 0 5px;
  width: 540px;
}
</style>
     <div id="obyava">
  <div class="kartinki">
<img src="http://savepic.su/4576135.png">
<img src="http://savepic.su/4576135.png">
<img src="http://savepic.su/4576135.png">
  </div>
<div class="block1">
 <div class="prokrytka">
Мышлению статика присуще мысленное приостанавливание всеобщего движения. Мышление динамика, наоборот, включается лишь после того, когда статический объект удаётся представить себе движущимся.

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

Динамик же, наоборот, думает и говорит о мире динамики, а своим витальным кольцом склонен пребывать в малоподвижной, статической жизни. Собственная активность осторожна, выжидательна, он действует только в том случае, когда уверен, что больше некому. Или некого послать или нельзя доверить, никто другой не справится. Но о том, что именно следует делать или не делать — говорится много. Цель — мысленная активация, программирование окружающих. 
 </div>
  <div class="kartinki">
<img src="http://savepic.su/4576135.png">
<img src="http://savepic.su/4576135.png">
<img src="http://savepic.su/4576135.png">
  </div>
 <div class="tekstovy">
Статику присущи некоторые трудности в обнаружении тенденций – до той поры, пока эти тенденции не превысят некий довольно значительный порог, существенно меняющий всю картину; динамик же, напротив, как раз тенденции и замечает в первую очередь. В то же время динамик может упускать из внимания какие-то детали стабильной общей картины. Здесь следует учитывать, что большее внимание к деталям и нюансам реального мира присуще в первую очередь сенсорикам, а обладателям 
 </div>
</div>

  <div class="ssylki">
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка1</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка2</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка3</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка4</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка5</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка6</a>
<a href="http://watahw.hutt.ru/viewtopic.php?id=2#p11">Проверка7</a>
  </div>
<div class="blok2">
  <div class="prokrytka">
Следующий признак, который мы рассмотрим, носит название «статика – динамика». К сожалению, этот признак многие соционики тоже понимают по-разному. С моей точки зрения, наличие у ТИМа признака «статика» дает человеку склонность видеть каждую наличную ситуацию вне особой связи с предыдущими и последующими событиями, как бы в виде ряда фотографий (если его восприятие опирается в наибольшей степени на визуальную репрезентативную систему, говоря в терминологии, принятой в нейролингвистическом программировании). Благодаря этому свойству статик получает возможность прочувствовать, увидеть или исследовать наличное состояние или ситуацию во всей его мгновенной полноте, не отвлекаясь на его историческую, меняющуюся во времени составляющую.

Динамик же, наоборот, мало способен к восприятию текущей ситуации в стабильном виде, поскольку воспринимает происходящее как цепь взаимосвязанных и взаимоперетекающих одно в другое событий. Такое восприятие больше похоже не на ряд фотографий, а на видеозапись. Когда-то при обсуждении в одной из компьютерных сетей вопроса об отличиях статика (т.е. человека, ТИМ которого обладает признаком «статика») от динамика мне пришел в голову такой образ: если течение событий представить в виде реки, то статик выглядит подобно человеку, стоящему на берегу и наблюдающему за игрой воды, света и теней на ее поверхности, а динамик, находясь в воде, плывет вместе с рекой, не имея возможности отстраниться от ее внутренних изменений. 
  </div>
 <div class="tekstovy">
Признак «динамика» имеют ТИМы, у которых функция T находится в одной из позиций ментального кольца модели А, то есть либо в позициях блока Эго, либо в позициях блока Супер-Эго. Можно предположить, что наличие интуиции времени в ментальном кольце приводит к тому, что динамику легче осознавать процессы, связанные с течением времени, чем статику. Напомним, что отнесение функций ментального кольца к сознательным, а функций витального кольца к бессознательным довольно условно, это всего лишь тенденция, реализация которой зависит от множества причин не столько соционического, сколько психологического характера. Однако динамические изменения в событиях, ситуациях, людях и т.д., как правило, замечаются динамиками раньше, чем эти изменения успевает воспринять статик. 
 </div>
</div>
     </div>

Размер картинок регулируется стилем, если картинки будут другой высоты\ширины и растянутся, и вы не разберетесь, как поменять размер, обращайтесь.

P.S.: А вообще на будущее, предоставляйте, пожалуйста, шаблоны картинок.

0

Noel · Поделиться**211**13.12.2014 10:54:17

Ichimaru Gin
Благодарю.
И прошу прощения, про картинки учту!

0

Nicole · Поделиться**212**14.12.2014 20:11:27

1. http://runawayhanter.rusff.me

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

3. http://savepic.su/4559513.png

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

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

6. желаемая высота таблицы (1100х245)

0

Ichimaru Gin · Поделиться**213**16.12.2014 20:51:04

Nicole
Временное Демо

В объявление:

Код:

<div class="vse">

   <div class="odin">
<div class="amc"><h3>AMC</h3>
С самого начала следует заметить, что в этой книге речь пойдет о Трансформации. Идеи нагуализма, изложенные в известных книгах Карлоса Кастанеды
</div>

<div class="news"><h3>NEWS</h3>
<div class="opis">
позволили сделать принципиально важное в этом отношении допущение. А именно: тип восприятия определяет тип энергообмена существа с окружающей средой. Более того, можно даже сказать, что тип восприятия и есть тип доминирующего энергообмена. 
позволили сделать принципиально важное в этом отношении допущение. А именно: тип восприятия определяет тип энергообмена существа с окружающей средой. Более того, можно даже сказать, что тип восприятия и есть тип доминирующего энергообмена. 
позволили сделать принципиально важное в этом отношении допущение. А именно: тип восприятия определяет тип энергообмена существа с окружающей средой. Более того, можно даже сказать, что тип восприятия и есть тип доминирующего энергообмена. 
</div>
</div>
   </div>

   <div class="dwa">
<div class="nav">
<div class="nav1">
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка3</a>
</div>
<div class="cub"><h3>Куб</h3>
Поскольку изменение режима восприятия 
</div>
<div class="nav1">
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Кнопка3</a>
</div>
</div>
<div class="ocher"><h3>Очередность постов</h3>
<div class="opis">
Поскольку изменение режима восприятия — феномен, доступный продуцированию, исследованию и развитию. Значит, надо просто выяснить, что именно мы должны сделать со своим восприятием, дабы изменения коснулись Поскольку изменение режима восприятия — феномен, доступный продуцированию, исследованию и развитию. Значит, надо просто выяснить, что именно мы должны сделать со своим восприятием, дабы изменения коснулись
</div>
</div>
   </div>

   <div class="tri">
<div class="amc"><h3>Активисты</h3>
На первый взгляд, это теоретическое положение кажется не столь уж важным в нашей повседневной практике, но именно оно дает нам возможность впервые взглянуть на саму идею 
</div>
<div class="news"><h3>Прямой эфир</h3>
<div class="opis">
Трансформации человеческой природы не с точки зрения религиозных концепций или метафизических упований мистиков и оккультистов прежних эпох, а с точки зрения естественнонаучной (а значит, рациональной и прагматичной) парадигмы. Наконец мы можем рассуждать о реальных способах осуществления этого грандиозного, определяющего судьбу человеческого вида проекта. Наконец определились пути и подходы, в рамках которых можно исследовать прежде фантастическую тему и сдвинуться с мертвой точки, на которой застыла наша цивилизация, стремящаяся компенсировать свою беспомощность в деле самопознания бесконечной экспансией технократического духа. 
</div>
</div>
   </div>

     </div>

<style>
.vse {
  height: 245px;
  left: 50%;
  margin-left: -550px;
  position: absolute;
  text-align: center;
  top: 364px;
  width: 1100px;
}

.odin, .dwa, .tri {
  float: left;
}

.vse h3 {
  color: #4b2e0d;
  font-family: "Book Antiqua","Georgia","Times New Roman",Times,serif;
  font-size: 12pt;
  font-variant: small-caps;
  font-weight: bold;
  text-shadow: 1px 1px 1px #9c98c0;
}

.nav1 a {
  background: linear-gradient(to bottom, rgb(187, 192, 243), rgba(104, 92, 140, 0.81)) repeat scroll 0 0 transparent;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgb(72, 67, 126);
  display: inline-block;
  margin: 2px;
  padding: 4px 5px;
  text-align: center;
  width: auto;
}

.opis {
  padding: 5px;
}

.odin {
  vertical-align: top;
  width: 300px;
}

.amc{
height: 145px;
}
.news {
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.dwa {
  vertical-align: top;
  width: 500px;
}

.nav {
  height: 100px;
  width: 500px;
}

.nav1 {
  float: left;
  height: 100px;
  width: 210px;
}

.cub {
  float: left;
  height: 100px;
  width: 80px;
}
.ocher{
width: 500px;
height: 145px;
vertical-align: top;
}
.tri{
  width: 300px;
vertical-align: top;
}
</style>

+1

Mevill · Поделиться**214**24.12.2014 13:56:52

Здравствуйте, прошу сделать мне таблицу.
1. Ссылка: http://pastheroes.f-rpg.ru/
2. Ширина форума: 900px
3. Пример изображением:

Спойлер

4. Границы у таблицы: есть/нет
5. Доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом: Прокрутка подписана, изображения обозначены своим размером (60/70/80px)
6. Желаемая высота таблицы (фиксированная или растягивается по содержимому):
Фиксированная. 393px.

0

Irisviel · Поделиться**215**24.12.2014 19:19:33

1. Ссылка http://soslow.mybb.ru/
2. Ширина форума: 850px
3. Пример изображения:

4. Границы у таблицы: нет
5. Доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом:
Самая первая строка со слоганом форума - обычный текст, который, скорее всего, поменяется, так что неважно, что вы там напишете.
Названия столбцов можно делать любым шрифтом, нужный подберу по факту.
Картинки админов будут ссылками на профили.

Картинки админов

Фон таблицы

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

Отредактировано Irisviel (24.12.2014 23:39:25)

0

Opium · Поделиться**216**25.12.2014 12:44:13

Irisviel
Ваша таблица, если что пишите, будем править.

Код:

<div class='taba'>
<div class='slog'>Здесь  будет город сад....</div>
  <div class='odin'>
     <div class='text'> АДМИНИСТРАЦИЯ</div>
     <div class='amc'>
    <center>
<a href="ваша ссылка"><img src='http://sf.uploads.ru/3grN5.png'></a>
<a href="ваша ссылка"><img src='http://sf.uploads.ru/7z9yW.png'></a>
<a href="ваша ссылка"><img src='http://sf.uploads.ru/wBeu9.png'></a>
   </center>
     </div>
  </div>
  <div class='dwa'>
     <div class='text'> В ИГРЕ</div>
     <div class='text2'>Для выбора цвета перемещайте вертикальный ползунок, а затем нажмите на цветовую ячейку слева, чтобы получить цветовой код HTML для желаемого оттенка.<br>

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

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

Вы можете начать работу, используя свой собственный цвет, записав его цветовой код в верхнем поле ввода.</div>
  </div>
  <div class='tri'>
     <div class='text'> НАВИГАЦИЯ</div>
     <div class='nav'><center>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка3</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка4</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка5</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка6</a>
     </center>
     </div>
  </div>
</div>

<style>
@import "http://webfonts.ru/import/constantine.css";

.nav a {
  display: inline-block;
  margin: 2px;
  padding: 4px 5px;
  text-align: center;
font-variant: small-caps;
font-weight: normal;
font-size: 1.5em;
}

.text2 {
width: 270px;
color: #F7DEEC;
text-align: center;
font-weight: normal;
padding:10px 5px 10px 5px;
}

.text {
color: #F7DEEC;
font-family: 'Constantine';
text-align: center;
text-shadow: 1px 1px 2px black, 0 0 1em red; /* Параметры тени */
font-variant: small-caps;
font-weight: normal;
font-size: 1.5em;
padding: 10px 0px 10px 0px;
}

.amc {
width: 230px;
}

.slog {
width: 700px;
color: #F7DEEC;
font-family: 'Constantine';
text-align: center;
text-shadow: 1px 1px 2px black, 0 0 1em red; /* Параметры тени */
font-variant: small-caps;
font-weight: normal;
font-size: 1.5em;
padding: 10px 0px 10px 0px;

}
.odin {
float: left;
width: 230px;
}

.dwa{
float: left;
width: 270px;
}

.tri {
float: left;
width: 200px;
}

.taba{
background-image: url('http://sf.uploads.ru/10th8.jpg');
background-repeat: no-repeat;
width: 700px;
height: 400px;
}
</style>

0

Opium · Поделиться**217**25.12.2014 16:26:31

Mevill
Ваша табличка в процессе.

0

Opium · Поделиться**218**25.12.2014 21:25:48

Mevill

Код:

<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: 0px;
  padding: 0;
  text-align: center;
  width: 880px;
}


#menu span {
background: linear-gradient(to bottom, rgb(234, 236, 247), rgba(216, 210, 234, 0.81)) repeat scroll 0 0 transparent;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgb(72, 67, 126);
  color: #313318;
  display: inline-block;
  font-family: georgia;
  font-size: 12px;
  height: 20px;
  padding: 5px 5px;
  text-align: center;
  width: 150px;
}

#menu .tabactive {
background: linear-gradient(to bottom, rgb(187, 192, 243), rgba(104, 92, 140, 0.81)) repeat scroll 0 0 transparent;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgb(72, 67, 126);

}

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

#submenu {
  height: 340px;
  width: 880px;
}

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

.sostav {
  display: inline-block;
  vertical-align: top;
  width: 39%;
}

.amc2 {
height: 165px;
}

.amc2 img{
box-shadow: 1px 1px 2px rgb(72, 67, 126);
margin-top: 20px;
}

.amc img{
box-shadow: 1px 1px 2px rgb(72, 67, 126);
margin-top: 10px;
}

.opis {
  display: inline-block;
  vertical-align: top;
  width: 59%;
}

.opis1 {
height: 140px;
padding: 0px;
overflow-x: hidden;
}

.igrok {
display: inline-block;
vertical-align: top;
width: 59%;
}

.info {
display: inline-block;
vertical-align: top;
width: 39%;
}

.zag {
font-variant: small-caps;
font-size: 1.4em;
color: rgb(13, 13, 87);
text-shadow: 1px 1px 2px black, 0 0 1em rgb(64, 76, 132);
padding-bottom: 5px;
}

.vklad {
display: inline-block;
vertical-align: top;
width: 49%;
}

.navi {
display: inline-block;
vertical-align: top;
width: 19%;
}

.navi a {
  display: inline-block;
  margin: 2px;
  padding: 4px 5px;
  text-align: center;
font-variant: small-caps;
font-weight: normal;
font-size: 1.3em;
}

.novic {
display: inline-block;
vertical-align: top;
width: 39%;
}

</style>

<table border=0 height="auto" style="background-position: relative;"><tbody>
  <tr>
   <td>
    <div id="menu">
<span alt="#sm1" style="cursor: pointer;">Вкладка1</span>
<span alt="#sm2" style="cursor: pointer;">Вкладка2</span>
<span alt="#sm3" style="cursor: pointer;">Вкладка3</span>
<span alt="#sm4" style="cursor: pointer;">Вкладка4</span>
<span alt="#sm5" style="cursor: pointer;">Вкладка5</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='sostav'>
<div class='amc'>
<div class='zag'>Администрация</div>
<img src='http://2.firepic.org/2/images/2014-12/25/dwf4yx1i35um.jpg'>
<img src='http://2.firepic.org/2/images/2014-12/25/dwf4yx1i35um.jpg'>
<img src='http://2.firepic.org/2/images/2014-12/25/dwf4yx1i35um.jpg'>
</div>
<div class='amc'>
<div class='zag'>Модераторы</div>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
<img src='http://6.firepic.org/6/images/2014-12/25/s0gfg3tdgav4.jpg'>
</div>
</div>
<div class='opis'>
<div class='zag'>О форуме</div>
<div class='opis1'>
Жили-были старик со старухой.
Вот и говорит старик старухе:
— Поди-ка, старуха, по коробу поскреби, по сусеку помети, не наскребешь ли муки на колобок.
зяла старуха крылышко, по коробу поскребла, по сусеку помела и наскребла муки горсти две.
Замесила муку на сметане, состряпала колобок, изжарила в масле и на окошко студить положила.
Колобок полежал, полежал, взял да и покатился — с окна на лавку, с лавки на пол, по полу к двери, прыг через порог — да в сени, из сеней на крыльцо, с крыльца на двор, со двора за ворота, дальше и дальше.
Жили-были старик со старухой.
Вот и говорит старик старухе:
— Поди-ка, старуха, по коробу поскреби, по сусеку помети, не наскребешь ли муки на колобок.
Взяла старуха крылышко, по коробу поскребла, по сусеку помела и наскребла муки горсти две.
Замесила муку на сметане, состряпала колобок, изжарила в масле и на окошко студить положила.
Колобок полежал, полежал, взял да и покатился — с окна на лавку, с лавки на пол, по полу к двери, прыг через порог — да в сени, из сеней на крыльцо, с крыльца на двор, со двора за ворота, дальше и дальше.
</div>
<div class='zag'>О форуме</div>
<div class='opis1'>
Жили-были старик со старухой.
Вот и говорит старик старухе:
— Поди-ка, старуха, по коробу поскреби, по сусеку помети, не наскребешь ли муки на колобок.
зяла старуха крылышко, по коробу поскребла, по сусеку помела и наскребла муки горсти две.
Замесила муку на сметане, состряпала колобок, изжарила в масле и на окошко студить положила.
Колобок полежал, полежал, взял да и покатился — с окна на лавку, с лавки на пол, по полу к двери, прыг через порог — да в сени, из сеней на крыльцо, с крыльца на двор, со двора за ворота, дальше и дальше.
Жили-были старик со старухой.
Вот и говорит старик старухе:
— Поди-ка, старуха, по коробу поскреби, по сусеку помети, не наскребешь ли муки на колобок.
Взяла старуха крылышко, по коробу поскребла, по сусеку помела и наскребла муки горсти две.
Замесила муку на сметане, состряпала колобок, изжарила в масле и на окошко студить положила.
Колобок полежал, полежал, взял да и покатился — с окна на лавку, с лавки на пол, по полу к двери, прыг через порог — да в сени, из сеней на крыльцо, с крыльца на двор, со двора за ворота, дальше и дальше.
</div>
</div>
</div>

     <div id="sm2" class="submenutext"><br/>
<div class='navi'>
<div class='zag'>Навигация</div>
<center>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка3</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка4</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка5</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка6</a>
     </center>
</div>
<div class='navi'>
<div class='zag'>Навигация</div>
<center>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка3</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка4</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка5</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка6</a>
     </center>
</div>
<div class='navi'>
<div class='zag'>Навигация</div>
<center>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка1</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка2</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка3</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка4</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка5</a><br>
<a href="http://watahw.hutt.ru/search.php?action=show_unanswered">Ссылка6</a>
     </center>
</div>
<div class='novic'>
<div class='zag'>Новичкам</div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>

     <div id="sm3" class="submenutext"><br/>
<div class='igrok'>
<div class='amc2'>
<div class='zag'>Активные участники</div>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
</div>
<div class='amc2'>
<div class='zag'>Лучшие игроки</div>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
<img src='http://4.firepic.org/4/images/2014-12/25/k8uo1twxi2dx.jpg'>
</div>
</div>
<div class='info'>
<div class='amc2'>
<div class='zag'>В игре </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
<div class='amc2'>
<div class='zag'>Погода</div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>
</div>

     <div id="sm4" class="submenutext"><br/>
<div class='vklad'>
<div class='amc2'>
<div class='zag'>Активные конкурсы </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
<div class='amc2'>
<div class='zag'>Завершенные конкурсы </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>
<div class='vklad'>
<div class='amc2'>
<div class='zag'>Победители конкурсов </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
<div class='amc2'>
<div class='zag'>О конкурсах </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>
</div>

     <div id="sm5" class="submenutext"><br/>
<div class='vklad'>
<div class='amc2'>
<div class='zag'>Парнеры </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
<div class='amc2'>
<div class='zag'>Банерообмен </div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>
<div class='vklad'>
<div class='amc2'>
<div class='zag'>Каталоги</div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
<div class='amc2'>
<div class='zag'>О рекламе</div>
Самый верный способ глубоко окунуться в HTML и CSS и быстро продвинуться - это курсы. Полное погружение гарантирую. В основе курса - опыт искушенных практиков веб-дизайна и самые современные знания в наглядной и понятной форме.
</div>
</div>
</div>

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

+2

Opium · Поделиться**219**26.12.2014 08:22:04

Mevill
Код подправлен, прокрутка прописана.

0

Irisviel · Поделиться**220**29.12.2014 07:35:40

Opium
Благодарю! Скажите еще, что нужно подкрутить, чтобы в навигации между ссылками не было такого большого расстояния и как цвет ссылок сделать не такими, какие они у меня на форуме по умолчанию стоят, а белыми?

0

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

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

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

Объявление

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

О форуме

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

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

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

Сообщений 201 страница 220 из 286

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

Поделиться20105.12.2014 18:25:22

Поделиться20205.12.2014 18:43:52

Поделиться20305.12.2014 18:56:00

Поделиться20405.12.2014 19:03:55

Поделиться20505.12.2014 19:06:59

Поделиться20605.12.2014 19:32:37

Поделиться20705.12.2014 19:34:08

Поделиться20805.12.2014 20:53:53

Поделиться20909.12.2014 19:54:48

Поделиться21012.12.2014 23:33:40

Поделиться21113.12.2014 10:54:17

Поделиться21214.12.2014 20:11:27

Поделиться21316.12.2014 20:51:04

Поделиться21424.12.2014 13:56:52

Поделиться21524.12.2014 19:19:33

Поделиться21625.12.2014 12:44:13

Поделиться21725.12.2014 16:26:31

Поделиться21825.12.2014 21:25:48

Поделиться21926.12.2014 08:22:04

Поделиться22029.12.2014 07:35:40