Html таблицы (готовые схемы)

Готовые схемы html-таблиц.

Каждая таблица состоит из двух частей:
1) html-код, который можно поместить в приветствие на главной странице: ПА > Оформление > Главная - Общая информация > Приветствие на главной странице (альтернативный вариант: в виджет, либо в html-страницу).
После этого останется заполнить ячейки текстом, изображениями и пр., а затем - сохранить изменения


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;

Ссылку http://i63.servimg.com/u/f63/12/33/62/17/df514.png замените на ссылку фонового изображения


Чтобы изменить цвет контура, в строке

Код:

border: 1px solid #000;

замените #000 на код подходящего цвета.


Чтобы скрыть контур, строку

Код:

border: 1px solid #000;

замените на

Код:

border: 1px solid transparent;

Коды таблиц

Таблицы на 3 колонки

---

Ячейка 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>

BB-код

Код:

[table width="100%" style="border: 1px solid #000; background-color: #fff; border-collapse: collapse;"][tr valign="top"][td colspan="3" style="border: 1px solid #000; background-color: #fff; padding: 10px"]Ячейка 1[/td][/tr][tr valign="top"][td width="66%" colspan="2" style="border: 1px solid #000; background-color: #fff; padding: 10px"]Ячейка 2[/td][td rowspan="2" align="center" valign="middle" style="border: 1px solid #000; background-color: #fff; text-align:center;"]Ячейка 3[/td][/tr][tr valign="top"][td style="border: 1px solid #000; background-color: #fff; padding: 10px"]Ячейка 4[/td][td style="border: 1px solid #000; background-color: #fff; padding: 10px"]Ячейка 5[/td][/tr][/table]

---

Ячейка 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>

---

Ячейка 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>

---

Ячейка 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>

---

Ячейка 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 колонки

---

Ячейка 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>

---

Ячейка 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>

---

Ячейка 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>

---

Ячейка 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>

---

Ячейка 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>