Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» совет админамавтор лексей2222 Июль 14th 2024, 09:47
» На форуме Пропали кнопки модерации тем
автор лексей2222 Июль 1st 2024, 20:26
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
» Как убрать подпись о редактировании записи
автор Фея Май 9th 2024, 21:11
» Пакеты Forum 2x2
автор Dana Domirani Май 6th 2024, 14:11
» Как поменять вид нумерации страниц тем?
автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
Html таблицы (готовые схемы)
Страница 1 из 1
Html таблицы (готовые схемы)
Готовые схемы html-таблиц.
Установка
Каждая таблица состоит из двух частей:1) html-код, который можно поместить в приветствие на главной странице: ПА > Оформление > Главная - Общая информация > Приветствие на главной странице (альтернативный вариант: в виджет, либо в html-страницу).
После этого останется заполнить ячейки текстом, изображениями и пр., а затем - сохранить изменения
![Html таблицы (готовые схемы) 1b4d6bf97745t](http://s60.radikal.ru/i167/1102/6a/1b4d6bf97745t.jpg)
2) код css, который необходимо скопировать в Па > Оформление > Цвета > Каскадная таблица стилей CSS
- Код:
table.tbglav {
border-collapse: collapse;
}
table.tbglav td {
border: 1px solid #000;
background-color: #fff;
padding: 3px;
}
- Настройки CSS таблицы:
Чтобы залить фон ячеек не цветом, а изображением, замените в исходном коде строку- Код:
background-color: #fff;
- Код:
background: #fff url(http://i63.servimg.com/u/f63/12/33/62/17/df514.png) top left repeat;
Чтобы изменить цвет контура, в строке- Код:
border: 1px solid #000;
Чтобы скрыть контур, строку- Код:
border: 1px solid #000;
- Код:
border: 1px solid transparent;
Коды таблиц
Таблицы на 3 колонки
вариант I
Ячейка 1 | ||
Ячейка 2 | Ячейка 3 | |
Ячейка 4 | Ячейка 5 |
HTML
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="3">Ячейка 1</td>
</tr>
<tr valign="top">
<td width="66%" colspan="2">Ячейка 2</td>
<td rowspan="2" align="center" valign="middle">Ячейка 3</td>
</tr>
<tr valign="top">
<td>Ячейка 4</td>
<td>Ячейка 5</td>
</tr>
</table>
вариант II
Ячейка 1 | ||
Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="3">Ячейка 1</td>
</tr>
<tr valign="top">
<td rowspan="2" align="center" valign="middle">Ячейка 2</td>
<td>Ячейка 3</td>
<td rowspan="2" align="center" valign="middle">Ячейка 4</td>
</tr>
<tr valign="top">
<td>Ячейка 5</td>
</tr>
</table>
вариант III
Ячейка 1 | Ячейка 2 | Ячейка 3 |
Ячейка 4 | Ячейка 5 | |
Ячейка 6 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td width="25%">Ячейка 1</td>
<td rowspan="2" align="center" valign="middle" style="border: 1px solid #000; background-color: #fff; text-align:center;">Ячейка 2</td>
<td width="25%">Ячейка 3</td>
</tr>
<tr valign="top">
<td>Ячейка 4</td>
<td>Ячейка 5</td>
</tr>
<tr valign="top">
<td colspan="3">Ячейка 6</td>
</tr>
</table>
вариант IV
Ячейка 1 | ||
Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | ||
Ячейка 6 | Ячейка 7 | Ячейка 8 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="3">Ячейка 1</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 2</td>
<td>Ячейка 3</td>
<td width="33%">Ячейка 4</td>
</tr>
<tr valign="top">
<td colspan="3">Ячейка 5</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 6</td>
<td>Ячейка 7</td>
<td width="33%">Ячейка 8</td>
</tr>
</table>
Ячейка 1 | ||
Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | Ячейка 7 |
Ячейка 8 | Ячейка 9 | Ячейка 10 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="3">Ячейка 1</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 2</td>
<td>Ячейка 3</td>
<td width="33%">Ячейка 4</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 5</td>
<td>Ячейка 6</td>
<td width="33%">Ячейка 7</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 5</td>
<td>Ячейка 6</td>
<td width="33%">Ячейка 7</td>
</tr>
<tr valign="top">
<td width="33%">Ячейка 8</td>
<td>Ячейка 9</td>
<td width="33%">Ячейка 10</td>
</tr>
</table>
вариант V
Ячейка 1 | Ячейка 2 | |
Ячейка 3 | Ячейка 4 | Ячейка 5 |
Ячейка 6 | Ячейка 7 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="2">Ячейка 1</td>
<td width="33%">Ячейка 2</td>
</tr>
<tr valign="top">
<td>Ячейка 3</td>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
</tr>
<tr valign="top">
<td>Ячейка 6</td>
<td colspan="2">Ячейка 7</td>
</tr>
</table>
Таблицы на 4 колонки
вариант I
Ячейка 1 | Ячейка 2 | ||
Ячейка 3 | Ячейка 4 | Ячейка 5 | |
Ячейка 6 | Ячейка 7 | Ячейка 8 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="3">Ячейка 1</td>
<td rowspan="3" align="center" valign="middle">Ячейка 2</td>
</tr>
<tr valign="top">
<td width="25%">Ячейка 3</td>
<td width="25%">Ячейка 4</td>
<td width="25%">Ячейка 5</td>
</tr>
<tr valign="top">
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>
вариант II
Ячейка 1 | |||
Ячейка 2 | Ячейка 3 | Ячейка 4 | |
Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td colspan="4" align="center" valign="middle">Ячейка 1</td>
</tr>
<tr valign="top">
<td align="center" valign="middle">Ячейка 2</td>
<td colspan="2">Ячейка 3</td>
<td align="center" valign="middle">Ячейка 4</td>
</tr>
<tr valign="top">
<td align="center" valign="middle">Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td align="center" valign="middle">Ячейка 8</td>
</tr>
</table>
вариант III
Ячейка 1 | Ячейка 2 | Ячейка 3 | |
Ячейка 4 | |||
Ячейка 5 | Ячейка 6 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td width="20%">Ячейка 1</td>
<td rowspan="3" align="center" valign="middle">Ячейка 2</td>
<td colspan="2" rowspan="2">Ячейка 3</td>
</tr>
<tr valign="top">
<td>Ячейка 4</td>
</tr>
<tr valign="top">
<td>Ячейка 5</td>
<td colspan="2">Ячейка 6</td>
</tr>
</table>
вариант IV
Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | |||
Ячейка 6 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td rowspan="3" align="center" valign="middle">Ячейка 1</td>
<td rowspan="3" align="center" valign="middle">Ячейка 2</td>
<td rowspan="3" align="center" valign="middle">Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr valign="top">
<td>Ячейка 5</td>
</tr>
<tr valign="top">
<td>Ячейка 6</td>
</tr>
</table>
вариант V
Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | ||
Ячейка 7 |
- Код:
<table class="tbglav" width="100%">
<tr valign="top">
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr valign="top">
<td colspan="2">Ячейка 5</td>
<td colspan="2">Ячейка 6</td>
</tr>
<tr valign="top">
<td colspan="4">Ячейка 7</td>
</tr>
</table>
![Html таблицы (готовые схемы) Userba12](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
![-](https://illiweb.com/empty.gif)
» Проблемы после вставки HTML таблицы.
» Как изменить цвет фона таблицы на html-странице?
» Готовые стили
» Готовые скрипты
» Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!
» Как изменить цвет фона таблицы на html-странице?
» Готовые стили
» Готовые скрипты
» Падающий снег, гирлянды (готовые скрипты) и прочие украшения для Нового года!
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения