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

Тамиль

Окей, уже не актуально.-.

Отредактировано Тамиль (13.12.2013 00:19:31)

0

Vladimir

Мне кажется, стоит FAQ по созданию таблиц - стоит спрятать под спойлер.

0

sadhaka

Vladimir
Сделано )

0

Vladimir

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

Vladimir
Сделано )

о, отлично))) Ато слишком много вниз матать приходилось))))

0

Алексиэль

1. Ссылка на форум
http://guildgosu.ru
2. Ширина форума
800
3. Добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

4. Границы у таблицы: есть

0

slastnicova · [1993-10-20]

Алексиэль

Код:

<table style=" width: 100%; border: 2px solid #000;">
<tr>
<td colspan="2" style="text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
</tr>
<tr>
<td style="width: 50%; text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
<td style="width: 50%; text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
</tr>
</table>

Отредактировано slastnicova (12.12.2013 11:07:52)

+1

Алексиэль

slastnicova
Благодарю

0

pika.

кажется разобралась самостоятельно

Доброго времени суток ;3
sadhaka
у меня наверное к вам вопрос, ибо вы мне часто помогали О_о
я наткнулась на такую табличку тут, вроде пояснения есть, но я что-то не то намутила, как обычно ._.
пояснялка тут
Проблемы возникли именно в высоте, ширине таблицы и маринге для элементов.
Ссылка на форум.

Отредактировано pika. (17.12.2013 19:13:47)

0

himmel

Доброго вечера!)

1. ссылка на форум:
на стадии разработки.

2. ширина форума:
точно также, всё делается, но изменять ширину/высоту умеем)

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
http://i053.radikal.ru/1312/53/31d5ae092d1c.jpg

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

0

slastnicova · [1993-10-20]

himmel
В html-низ:

<script src="http://tomorrowpeople.f-rpg.ru/files/0013/66/37/19829.js"></script>
<script>
$('#slider #main').bxSlider({
prevSelector: '#slider #prev',
prevImage: 'ссылка на изображение стрелочки влево',
nextSelector: '#slider #next',
nextImage: 'ссылка на изображение стрелочки вправо',
pager: false,
auto: false,
});
</script>

сама таблица:

<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
<div>
<table><tr><td>
Содержание первой ячейки
ССЫЛКИ
</td>
<td>
Содержание второй ячейки
АДМИН СОСТАВ
</td></tr></table>
</div>
<div>
<table><tr><td>
Содержание первой ячейки
ИНФОРМАЦИЯ
</td></tr></table>
</div>
<div>
<table><tr><td>
Содержание первой ячейки
БАННЕРЫ
</td>
<td>
Содержание второй ячейки
ИНФО
</td></tr></table>
</div>
</div></td>
<td id="next"></td>
</tr><tr>
</table>

во второе окно стиля:

/* слайдер в объявление */
#slider {
margin: 0 auto;
margin-left: 0px;
}
#slider #main {
height: 200px;/*высота слайдера*/
width: 800px; /*ширина слайдера*/
background: url('картинка на фон') no-repeat top center #ccc;
}
#slider #main div {
height: 100%;
}
#slider .bx-window table {
height: 100%;
width: 100%;
border-spacing: 0;
}
#slider .bx-window table td {
width: auto;
height: auto;
text-align: center;
}

это фон цветом

+1

himmel

slastnicova
огромное спасибо))

0

rose-

1. ссылка на форум:
пробник - http://amalityan.rusff.me/ таблица на пробнике старая
2. ширина форума: вообще у тела ширина 858px, так что наверное у таблицы такая же будет или чуть уже..
3. добротный рисунок:

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

первое окно

второе окно

третье и четвёртое окно

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

0

Ichimaru Gin

rose-
Здравствуйте, переделал вашу, поэтому немного не так, как заказывали - третье окно тоже двумя колонками, жаль было ссылки удалять, если все-таки сделать третье окно сплошным текстом - скажите, там не сложно.

ДЕМО 23.01.14

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

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

Код:

<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 {
margin-top: -380px;
width: 900px;
height: 60px;
}

#menu span {
text-align:center;
display:inline-block;
color:#4b7277;
font-size: 0em;
margin: 0px 10px;
padding: 0px;
background:transparent url() no-repeat;
}

#menu .tabactive {
color: #4b7277;
font-size: 0em;
text-align: center;
    background:transparent url() no-repeat;
}

#submenu {
padding: 16px;
margin-top: -125px;
height: 204px;
text-align: center;
margin-left: -15px;
font-size: 12px;
width: 639px;
    background:transparent url() no-repeat;}
}

.submenutext {
display: none; 
height: 10px;
}
</style>

<center><table border=0 width="900px" height="100px" style="text-align: center; background-position: relative;  margin-left: -30px;"><tbody>
  <tr>
   <td>
    <div id="menu"><span alt="#sm1" style="cursor: pointer;"><img src="http://s7.uploads.ru/VUlfu.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://s7.uploads.ru/1tZAl.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://s6.uploads.ru/fLGh3.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://s7.uploads.ru/oWYUG.png"></span></div>
   </td>
</tr>
</table>
<table border=0 width="865px" height="100px" style="text-align: justify; background-position: relative; margin-left: -30px; margin-top: -280px;"><tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;"><br/>
<table style="width: 865px; margin-left: -100px; "><tr>
<td  style="width: 30%;" valign=top>
<img src="http://s6.uploads.ru/TRlaB.png" width="180" height="120"><br>
<b>АКТИВИСТЫ</b> <br>
ИГРОК ПОСТ<br>
<img src="http://s6.uploads.ru/TRlaB.png" width="95" height="45"><img src="http://s6.uploads.ru/TRlaB.png" width="95" height="45">
</td>
<td  style="width: 70%;">
<font color="#6b9994"><a href="http://dyingtolive.rusff.me/profile.php?id=4" target="blank"><img src="http://s6.uploads.ru/TRlaB.png" width="95" height="45"></a> <a href="http://dyingtolive.rusff.me/profile.php?id=3" target="blank"><img src="http://s7.uploads.ru/LPF2o.png"width="95" height="45" ></a> <a href="http://dyingtolive.rusff.me/profile.php?id=63" target="blank"><img src="http://s7.uploads.ru/yPGsR.png" width="95" height="45"></a> <a href="http://dyingtolive.rusff.me/profile.php?id=226" target="blank"><img src="http://s7.uploads.ru/fDJ5N.png"width="95" height="45" ></a> <a href="http://dyingtolive.rusff.me/profile.php?id=228" target="blank"><img src="http://s6.uploads.ru/FCj5X.png"width="95" height="45" ></a> <a href="http://dyingtolive.rusff.me/profile.php?id=79" target="blank"><img src="http://s7.uploads.ru/Ijg3D.png" width="95" height="45"></a> <br><br>
<i>
<span style="font:bold italic  9pt Palatino Linotype;">Почувствуй приближение зимы и окунись в предновогоднюю атмосферу
на TVD: Dying to Live!
Хотите погрузиться в мистический и полный загадок мир, где у вас появится прекрасная возможность воплотить все идеи, растворив тонкую грань между фантазией и реальностью? Тогда не стоит раздумывать, скорее присоединяйтесь к нам! </br>
Мы очень ждем Вас: Софи Деверо, неповторимый охотник Джереми Гилберт, таинственный профессор Уэс Максфилд, а так же персонажи, представленные в акциях <a href="http://dyingtolive.rusff.me/viewtopic.php?id=1171" class="postlink" target="_blank" rel="nofollow"><font face="Palatino Linotype" size="2" color="#6fa9a3">"Magic and blood in New Orleans"</font></a>,  <a href="http://dyingtolive.rusff.me/viewtopic.php?id=21" class="postlink" target="_blank" rel="nofollow"><font face="Palatino Linotype" size="2" color="#6fa9a3">"Need you right now"</font></a>, <a href="http://dyingtolive.rusff.me/viewtopic.php?id=367" class="postlink" target="_blank" rel="nofollow"><font face="Palatino Linotype" size="2" color="#6fa9a3">"We Own the Night in New Orleans"</font></a> и <a href="http://dyingtolive.rusff.me/viewtopic.php?id=875" class="postlink" target="_blank" rel="nofollow"><font face="Palatino Linotype" size="2x" color="#6fa9a3">"The Cursed One"</font></a> </i></font></br></br>
<img src="http://s4.uploads.ru/k9dmJ.png" border="0" /> <a href="http://top.roleplay.ru/19107" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
 <img src="http://img.rpgtop.su/88x31x11x3.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a> <img src="http://s5.uploads.ru/pmQa5.png" border="0" /></font>
</td>
</tr>
</table>
</div>
     <div id="sm2" class="submenutext"><table style="width: 100%;"><tr>
<td style="width: 45%" valign="top"><font color="#6b9994"><font face="Palatino Linotype" style="font-size: 13px;"><b>MYSTIC FALLS.</b></br>
<i>После известий о похищенном лекарстве, Сайлас невероятно зол и теперь то он точно не остановится ни перед чем в попытке найти неизвестного, кто увел у него из-под носа крайне необходимое лекарство.
А поэтому нашу бравую команду из Мистик Фоллс ожидает продолжение знакомства с первым бессмертным и его манипуляциями уже в стенах колледжа, куда решил наведаться Безликий за необходимыми ему ответами. Ну что же, посмотрим, как быстро удастся ребятам убедить преследователя в своей невиновности, пока первыми жертвами не станут ни в чем не повинные студенты.</i></font></font> 
</td>

<td style="width: 45%" valign="top"><font color="#6b9994"><font face="Palatino Linotype" style="font-size: 13px;"><b>NEW ORLEANS.</b></br>
<i> Хейли встречается с первородным и рассказывает ему о своей беременности, но древнему вполне хватает заботы об оставшихся в живых гибридах и проблем со своим протеже в городе - Марселем. Софи Деверо связывается с Клаусом и рассказывает древнему о том, что творится в Орлеане. Ведьмы, путем шантажа, заставляют первородного пойти на сделку и помочь им свергнуть правление Марселя, которое будет не так уж и просто подавить. На его сторону переходит и Кол и Кэтрин, а она, к слову, внезапно оказывается живой, и теперь у Никлауса появится возможность вновь создать свою армию гибридов, только будет ли для него это так просто?</i></font></font> 
</td>
</tr>
</table>
</div>
     <div id="sm3" class="submenutext"><br/>
<table style="width: 640px; color: #769fa4 !important;"><tr><td style="width: 45%" valign="top">
 <font size="2"><b> ДЛЯ ГОСТЕЙ: </b> </font></br>
 <a href="http://dyingtolive.rusff.me/viewtopic.php?id=12" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">ПРАВИЛА</font></a></br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=32" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">АКЦИИ</font></a> </br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=11" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">СЮЖЕТ</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=34" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ШАБЛОНЫ АНКЕТ</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=9" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ГОСТЕВАЯ</font></a> </br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=15" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">СПИСОК ЗАНЯТЫХ ИМЕН / ФАМИЛИЙ</font></a></br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=13" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ЗАНЯТЫЕ ВНЕШНОСТИ</font></a> </br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=10" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">КАНДИДАТЫ НА УДАЛЕНИЕ</font></a></br>
 
</td>

<td style="width: 45%" valign="top">
 <font size="2" face="Palatino Linotype;"> <b>ИГРОКАМ:</b> </font></br>
  <a href="http://dyingtolive.rusff.me/viewtopic.php?id=30" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">НОВОСТНАЯ КОЛОНКА</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=205" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">СПИСОК ДОЛЖНИКОВ</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=32" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ВОПРОСЫ / ПРЕДЛОЖЕНИЯ</font></a></br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=41" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ЛИЧНОЕ ЗВАНИЕ</font></a></br>   
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=13" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ЗАНЯТЫЕ ВНЕШНОСТИ</font></a></br> 
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=50" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">ЗАПИСЬ НА ЭПИЗОДЫ</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=49" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">ПОИСК ПАРТНЕРА</a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=33" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">БАНК DYING TO LIVE</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=200" class="postlink" target="_blank" rel="nofollow"><font size="2" face="Palatino Linotype;">ВЫБОР АКТИВИСТОВ</font></a></br>  
<a href="http://dyingtolive.rusff.me/viewtopic.php?id=14" class="postlink" target="_blank" rel="nofollow"><font size="2"  face="Palatino Linotype;">ЖЕРТВОПРИНОШЕНИЕ 5 ВЕЧЕРОВ</font></a> </br>
</font></font>
</td>
</tr>
</table>
</div>
     
     <div id="sm5" class="submenutext"><br/><br/>
<a href=http://tumultfeelings.rusff.me/><img src="http://savepic.su/1181254m.gif" border="0" alt="TVD: tumult feelings"width=88  height=31 border></a>
<a href="http://californiadreamin.rusff.me/"><img src="http://s1.uploads.ru/i/LkDQP.gif"></a>
<a href="http://alarmme.ru/" title="Alarm with LA me" target=_blank> <img src="http://uploads.ru/i/c/j/Z/cjZiL.gif"></a" border="0" alt="LA me"></a>
<a href="http://roadsofar.ru/" target=_blank><img src="http://www.imageup.ru/img70/sam-_-dean-pranks-supernat623785.gif" width="88" height="31" border="0" alt="Road so far"></a>
<a href="http://omerta.rusff.me/" target="_blank"><img src="http://uploads.ru/i/u/c/X/ucXVZ.gif"></a>  </a> <a href="http://dragony.rusff.me/" title="FRPG: DEAR AGONY" target="_blank"><img src="http://s1.uploads.ru/i/S9ayk.gif"></a> <a href='http://realmiami.rusff.me/'><img src='http://s019.radikal.ru/i625/1206/1e/abdcf2f1fecc.gif'></img></a> <a target="_blank" href="http://breatheoflife.rusff.me//"><img src="http://s2.uploads.ru/DiFkx.gif" WIDTH="88" HEIGHT="31" BORDER="0"></a> <a href="http://sango.rusff.me" target=_blank><img src="http://s2.uploads.ru/GAWE1.gif" border="0" title="SAN DIEGO" width=88 height=31></a> <a href="http://charlottesweb.ru/" target="_blank" title="Все нити ведут к нам!" > <img src="http://s3.uploads.ru/LOkAl.gif" border="0"alt="Charlotte's Web" width=88 height=31></a>
<a href="http://ewl.rusff.me" title="Everything we loved" target="_blank"><img src="http://s1.uploads.ru/DUHST.gif" border="0" width="88" height="31"> <a href="http://afterarena.rusff.me" target="_blank" ><img src="http://s2.uploads.ru/lCBjY.gif" border="0" alt="»The Hunger Games: After arena" /></a> <a href="http://afterdawn.rolbb.ru/" target=_blank> <img src="http://forumstatic.ru/files/0012/a0/31/19021.png" border="0" alt="After Dawn"></a> <a href="http://tvdlad.rusff.me/"><img src="http://s2.uploads.ru/TePMO.gif" border="0" alt="tvd: life after death"></a>
<a href="http://soullove.ru/" target=_blank> <img src="http://s5.uploads.ru/xOJbU.gif" border="0" alt="The Vampire Diaries | Soul Love"></a>
<a href="http://teenwolf.rolfor.ru/"><img src="http://s5.uploads.ru/t/Km8S5.gif" border="0" width="88" height="31" title=" Teen Wolf: bloody bargain"></a>
<a href="http://realboston.ru/"><img src="http://savepic.org/4035478.gif"></a>
<a href="http://hysteria.maroderi.ru" target="_blank"><img src="http://savepic.net/3870375m.png" border="0" alt="Hysteria"></a>
<a href="http://supernaturalbrothers.ru" target=_blank title="Ныряй в Сверхъестественное!)))"><img src="http://s1.uploads.ru/i/Xc2mT.gif"></a>
<a href="http://riptide.rusff.me/" target="_blank"><img src="http://2.firepic.org/2/images/2013-10/22/irdjqwrtdy0a.gif" title="RIPTIDE - переверни ролевой мир!"></a>
<a href="http://tastethekiss.rusff.me" title="" target="_blank"><img src="http://s7.uploads.ru/feyDJ.gif" border="0" ></a>
<a href="http://dccrisis.rusff.me/"><img src="http://s4.uploads.ru/7Paic.jpg" border="0" /></a>
<a href="http://cheesecake.rusff.me" title="испробуй нашего чизкейка"><img src="http://s6.uploads.ru/5HKDY.gif"></a>
</div>

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

+1

rose-

Ichimaru Gin
благодарю)

0

madnyaska · [1994-08-07]

1. Ссылка
2. 800px
3.

таблица

4. Границы: Желательно чтобы были, но их цвет и ширину можно было бы регулировать + цвет колонок.

0

Ichimaru Gin

madnyaska
DEMO 25.01.2014
(без вашей верхней панели, если при установке будет кривить, пишите)

В объявление

Код:

<style>
#pun-announcement .container {
    padding: 0px !important;
}
#narutoTBL {
width: 800px;
height: 166px;
}
#narutoTD {
border: 2px solid rgb(167, 86, 54);
background: url("http://forumstatic.ru/files/0013/66/99/19868.png") #fff;
border-radius: 20px;
width: 250px;
height: 166px;
padding: 10px;
}
#narutoDIV {
overflow-x: hidden;
overflow-y: scroll;
border: none;
height: 166px;
}
</style>
<table id=narutoTBL>
<tr>
<td id=narutoTD>
<div id=narutoDIV>
Итачи получив серьезные ранения нанесенные своим братом, был брошен на произвол судьбы. Если бы не подоспевшие медики, то старший Учиха наверняка бы погиб. Саске остался в неведении, он продолжил свой путь, но встреча с братом вновь состоялась, именно в этот момент Саске узнал правду о Конохе, о правительстве и, конечно же, о своем брате. Далее следует Война Шиноби, в которой Братья принимают участие. В то время, когда Саске встал в строй с Наруто, Итачи помогал Пяти Каге в битве с Мадарой. Все биджу были вызволены из десятихвостого и вскоре запечатаны в сосуды. Наруто смог одолеть Обито, но лишь из-за своего дара убеждать, он смог вернуть того самого Обито, которым он был очень давно, а именно, вернул ему надежду на мир без воин. Мадара был побежден Учихой Итачи, а после запечатан специальным отрядом. С медицинской помощью смогли спасти Неджи, который был серьезно ранен в бою. Так и закончилась война, но потери, которая она с собой принесла – не восполнить. Обито пообещал сам себе, что не вернется на свой путь, который нес за собой только беды и разрушения. Учиха смог вернуться обратно в Коноху, лишь благодаря доброте Наруто, он смог найти себя в этой деревне, а так же найти поддержу у Узумаки. Сакура стала главным врачом в деревне, Тсунаде же пошла в совет, решив, что вполне справиться со своей новой должностью. Прошло некоторое время, и Наруто вновь уступил свое место будущего Каге Обито, решив, что он не только достоин этой должности, но и первым зародил в себе желание им стать. За время правления новым Каге, были восстановлена деревня, которая пострадала от последствий войны, многие нам знакомые персонажи обзавелись семьями и постепенно начали забывать о тех разрушениях, что чуть ли не погубили их жизни. Но волнения во многих странах все еще были, понадобилось много времени, чтобы все оправились после ужасных событий в их жизни. Деревни вновь забрали себе ранее принадлежащих им биджу, а так же во многих странах были пополнены коллекции артефактов, которые были получены во время войны, в том числе Гунбаи Учихи Мадары. Данный артефакт был оставлен в храме клана Учиха. Меч Палача был отдан обратно на родину, он должен был перейти к достойному такого оружия человеку. Орочимару вернувшись к жизни, решил почти незаметно вернуться обратно в свою лабораторию. 
</div>
</td>
<td  id=narutoTD>
    <center><!-- Ротатор Банеров местного разлива -->
        <a  id="Mbanners" href="Ссылка перехода по клику на 1-й банер" target="_blank" ><img height="31" weight="88" border="1" src="Ссылка на 1-ю картинку банера" ></a>
        <script language="javascript">
        var sek = 5000;  // Время отображения
        imgArray = new Array (
           "http://www.snapsnap.ru/i/misterywrw.gif","Ссылка перехода по клику на банер",
           "http://s5.uploads.ru/G1B7m.gif","Ссылка перехода по клику на банер",
           "http://s41.radikal.ru/i093/1104/f6/308ac35ea75f.png","Ссылка перехода по клику на банер",
           "http://radikale.ru/data/upload/ba193/4efc3/f3875d949f.gif","Ссылка перехода по клику на банер",

        "End");var i=Math.round(Math.random()*((imgArray.length-3)/2))*2;banners(i);
        function banners(i) {
        if(  i >= imgArray.length-1){i=0};
        $("#Mbanners img").attr("src",imgArray[i]);
        $("#Mbanners").attr("href",imgArray[i+1]);
        i+=2;j = i;timerID = setTimeout("banners(j)",sek);}
        </script></center>
</td>
<td id=narutoTD>
<div id=narutoDIV>
Итачи получив серьезные ранения нанесенные своим братом, был брошен на произвол судьбы. Если бы не подоспевшие медики, то старший Учиха наверняка бы погиб. Саске остался в неведении, он продолжил свой путь, но встреча с братом вновь состоялась, именно в этот момент Саске узнал правду о Конохе, о правительстве и, конечно же, о своем брате. Далее следует Война Шиноби, в которой Братья принимают участие. В то время, когда Саске встал в строй с Наруто, Итачи помогал Пяти Каге в битве с Мадарой. Все биджу были вызволены из десятихвостого и вскоре запечатаны в сосуды. Наруто смог одолеть Обито, но лишь из-за своего дара убеждать, он смог вернуть того самого Обито, которым он был очень давно, а именно, вернул ему надежду на мир без воин. Мадара был побежден Учихой Итачи, а после запечатан специальным отрядом. С медицинской помощью смогли спасти Неджи, который был серьезно ранен в бою. Так и закончилась война, но потери, которая она с собой принесла – не восполнить. Обито пообещал сам себе, что не вернется на свой путь, который нес за собой только беды и разрушения. Учиха смог вернуться обратно в Коноху, лишь благодаря доброте Наруто, он смог найти себя в этой деревне, а так же найти поддержу у Узумаки. Сакура стала главным врачом в деревне, Тсунаде же пошла в совет, решив, что вполне справиться со своей новой должностью. Прошло некоторое время, и Наруто вновь уступил свое место будущего Каге Обито, решив, что он не только достоин этой должности, но и первым зародил в себе желание им стать. За время правления новым Каге, были восстановлена деревня, которая пострадала от последствий войны, многие нам знакомые персонажи обзавелись семьями и постепенно начали забывать о тех разрушениях, что чуть ли не погубили их жизни. Но волнения во многих странах все еще были, понадобилось много времени, чтобы все оправились после ужасных событий в их жизни. Деревни вновь забрали себе ранее принадлежащих им биджу, а так же во многих странах были пополнены коллекции артефактов, которые были получены во время войны, в том числе Гунбаи Учихи Мадары. Данный артефакт был оставлен в храме клана Учиха. Меч Палача был отдан обратно на родину, он должен был перейти к достойному такого оружия человеку. Орочимару вернувшись к жизни, решил почти незаметно вернуться обратно в свою лабораторию. 
</div>
</td>
</tr>
</table>

Границы и фон колонок:

#narutoTD {
border: 2px solid rgb(167, 86, 54);
background: url("http://forumstatic.ru/files/0013/66/99/19868.png") #fff;
border-radius: 20px;
width: 250px;
height: 166px;
padding: 10px;
}

Толщина границы, цвет границы;
цвет фона, ссылка на картинку фона. (если нужен только цвет, вот этот кусок url("http://forumstatic.ru/files/0013/66/99/19868.png") целиком удалить)

Ротатор стоит вот этот: Ротатор баннеров по кругу там заполнение хорошо расписано.

+1

madnyaska · [1994-08-07]

Ichimaru Gin
Спасибо за ваш труд

0

Алексиэль

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

slastnicova написал(а):
Алексиэль
Выделить код
<table style=" width: 100%; border: 2px solid #000;">
<tr>
<td colspan="2" style="text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
</tr>
<tr>
<td style="width: 50%; text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
<td style="width: 50%; text-align: center;">
<img src="ссылка"><br>
Туточки текста
</td>
</tr>
</table>

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

0

summer

Алексиэль
Можно задать высоту css селектором (высоту ячейки не поддерживают старые версии ИЕ и Оперы). Дайте адрес форума, на котором стоит таблица.

0

Алексиэль

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

Алексиэль
Можно задать высоту css селектором (высоту ячейки не поддерживают старые версии ИЕ и Оперы). Дайте адрес форума, на котором стоит таблица.

http://guildgosu.ru вот

0

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

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

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

Объявление

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

О форуме

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

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

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

Сообщений 21 страница 40 из 286

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

Поделиться2103.12.2013 22:37:31

Поделиться2207.12.2013 14:18:28

Поделиться2307.12.2013 18:22:37

Поделиться2407.12.2013 18:27:29

Поделиться2511.12.2013 23:33:04

Поделиться2612.12.2013 07:59:01

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

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

Поделиться2919.12.2013 21:18:06

Поделиться3020.12.2013 15:07:44

Поделиться3120.12.2013 15:18:12

Поделиться3222.01.2014 15:55:00

Поделиться3323.01.2014 02:29:29

Поделиться3423.01.2014 14:52:07

Поделиться3525.01.2014 03:05:04

Поделиться3625.01.2014 07:34:12

Поделиться3725.01.2014 18:01:25

Поделиться3829.01.2014 09:22:21

Поделиться3929.01.2014 09:49:25

Поделиться4029.01.2014 09:59:26