Просмотр исходного текста страницы Справка:Таблицы

{{Справочная навигация}}

==== Простейшая таблица ====
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается с вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется её содержание.

'''Пример:'''
{|
|Исходный код таблицы с одной строкой:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть так:
|-
|
 <pre>{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}</pre>
|
 {| cellspacing="10"
|&nbsp;
|&nbsp;
|}
|
 {|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}
|}

Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.

'''Пример:'''
{|
|Исходный код таблицы в две строки:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть так:
|-
|
 <pre>{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}</pre>
|
 {| cellspacing="10"
|&nbsp;
|&nbsp;
|}
|
 {|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}
|}
 
{|
|Таблица в три строки пишется так:
|&nbsp;
|А В «Вики-КОБ» это будет выглядеть так:
|-
|
 <pre>{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
|&nbsp;
|&nbsp;
|}
|
 {|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
|}

И так далее.

==== Табличные рамки ====
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.

'''Толщина линий''' рамки задаётся атрибутом <code>border="n"</code>, где «n» — толщина линии:

{|
|Исходный код:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть следующим образом:
|-
 | <pre>{| border="1"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
 |&nbsp;
 |&nbsp;
 |}
|
 {| border="1"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
|}

Изменять оформление рамки таблицы также можно с помощью атрибута <code>class</code>. Как правило, рекомендуется использовать <code>class="wikitable"</code>:

{|
|Исходный код:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть следующим образом:
|-
 | <pre>{| class="wikitable"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
 |&nbsp;
 |&nbsp;
 |}
|
 {| class="wikitable"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
|}

==== Заголовки ====
Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.

'''Пример:'''
{|
|Для последней таблицы можно написать так:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть следующим образом:
|-
|
 <pre>{| border="1"
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
 |&nbsp;
 |&nbsp;
 |}
|
 {| border="1" 
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}
|}

В классе <code>"wikitable"</code> заголовки подсвечиваются:

{|
|Для последней таблицы можно написать так:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть следующим образом:
|-
|
 <pre>{| class="wikitable"
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
 |&nbsp;
 |&nbsp;
 |}
|
 {| class="wikitable"
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}
|}

==== Запись в одну строчку ====
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их дополнительной вертикальной чертой.

'''Пример:'''
{|
|Исходный код:
|&nbsp;
|В «Вики-КОБ» это будет выглядеть следующим образом:
|-
| <pre>{| border="1"
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}</pre>
|
 {| cellspacing="10"
|&nbsp;
|&nbsp;
|}
|
{| border="1"
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}
|}

==== Объединение ячеек ====
В вики-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали.
Для объединения по вертикали применяется атрибут ''rowspan="n"'', где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.

'''Пример:'''
{|
 |Вертикальное объединение двух ячеек пишется так:
 |&nbsp;||&nbsp;||&nbsp;||&nbsp;
 |Выглядеть это будет так:
 |-
 |<pre>{| border="1"
 |Ячейка 1 
 |rowspan="2" |Ячейка 2, объединяет два ряда таблицы
 |Ячейка 3
 |- 
 |Ячейка 4
 |Ячейка 5
 |}</pre>
 |&nbsp;||&nbsp;||&nbsp;||&nbsp;
 |
 {| border="1"
  |Ячейка 1 
  |rowspan="2" |Ячейка 2, объединяет два ряда таблицы
  |Ячейка 3
  |- 
  |Ячейка 4
  |Ячейка 5
  |}
 |}

Для объединения по горизонтали используется атрибут ''colspan="n"''.
 '''Пример:'''
 <nowiki>{| border="1"
 |Ячейка 1 
 |colspan="2" |Ячейка 2, объединяет два столбца
 |-
 |Ячейка 3 
 |Ячейка 4
 |Ячейка 5
 |}</nowiki>
Выглядит это так:
 {| border="1"
 |Ячейка 1 
 |colspan="2" |Ячейка 2, объединяет два столбца
 |-
 |Ячейка 3 
 |Ячейка 4
 |Ячейка 5
 |}

==== «Раскраска» таблиц ====
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
* для отдельного слова — <nowiki><span style="color:#ABCDEF">Tекст</span></nowiki>;
* для длинного текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>,
где «ABCDEF» — индекс цвета в Таблице цветов.
 '''Пример:'''
 Для "раскраски" текста пишут так:
 <nowiki>{| border="1"
 |Ячейка 1*1
 |Здесь цветное только <span style="color:#FF00FF">одно</span> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}</nowiki>
В «Вики-КОБ» это будет выглядеть следующим образом:
 {| border="1"
 |Ячейка 1*1
 |Здесь цветное только <span style="color:#FF00FF">одно</span> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

Сделать '''цветную ячейку''' можно с помощью атрибута <code>bgcolor="#rrggbb"</code>, где «rrggbb» обозначает, как вы уже, наверное, догадались, индекс цвета в [[Справка:Таблица цветов|таблице цветов]].
 '''Пример:'''
 Для «раскраски» одной ячейки пишется так:
 <nowiki>{| border="1"
 |Ячейка 1*1
 |bgcolor="#FFCC00"|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor="#CCFF00"|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}</nowiki>
В «Вики-КОБ» это будет выглядеть следующим образом:
 {| border="1"
 |Ячейка 1*1
 |bgcolor="#FFCC00"|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor="#CCFF00"|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}


==== Вложенные таблицы ====
Для создания таблицы внутри уже имеющейся, надо вписать в нужном месте фигурную скобку с вертикальной черточкой, как при написании обычной таблицы. Обратите внимание, что горизонтальной черточки в начале строки '''не должно''' быть. Не забудьте также закрыть внутреннюю таблицу.
 '''Пример:'''
 <nowiki>{| border="1"
 |Ячейка 1
 |
 {| border="2"
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}</nowiki>
Выглядеть это будет так:
{| border="1"
 |Ячейка 1
 |
 {| border="2"
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}

Таким способом длинную узкую таблицу можно оформить более элегантно. Например, вы решили, что ваша таблица будет лучше смотреться, если её расположить в виде трёх рядом расположенных отдельных табличек. Сначала напишите код таблицы из одной строки, но с пятью столбцами:
{|
|
 <pre>{|
 |Столбец 1
 |Столбец 2
 |Столбец 3
 |Столбец 4
 |Столбец 5
 |}</pre>
|В 1, 3 и 5 столбцах будут располагаться сами таблицы, а 2 и 4 предназначены для пробелов между ними.
|}

Разделите свою длинную таблицу на три равных части, оформите их как отдельные таблицы с соответствующими атрибутами и вставьте вместо записей «Столбец 1», «Столбец 3» и «Столбец 5».

Вместо записей «Столбец 2» и «Столбец 4» вставьте знак вынужденного пробела. Если расстояние между таблицами вам покажется узковатым, то добавьте ещё значки вынужденного пробела (отделяя их друг от друга двумя вертикальными чёрточками).

{|
 |<pre>{|
 |
 {| class="wikitable"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 1-1||Ячейка 1-2
  |-
  |Ячейка 1-3||Ячейка 1-4
  |-
  |Ячейка 1-5||Ячейка 1-6
  |-
  |Ячейка 1-7||Ячейка 1-8
  |-
  |Ячейка 1-9||Ячейка 1-10
  |-
  |Ячейка 1-11||Ячейка 1-12
  |}
 |&nbsp;||&nbsp;
 |
 {| class="wikitable"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 3-1||Ячейка 3-2
  |-
  |Ячейка 3-3||Ячейка 3-4
  |-
  |Ячейка 3-5||Ячейка 3-6
  |-
  |Ячейка 3-7||Ячейка 3-8
  |-
  |Ячейка 3-9||Ячейка 3-10
  |-
  |Ячейка 3-11||Ячейка 3-12
  |}
 |&nbsp;||&nbsp;
 |
 {| class="wikitable"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 5-1||Ячейка 5-2
  |-
  |Ячейка 5-3||Ячейка 5-4
  |-
  |Ячейка 5-5||Ячейка 5-6
  |-
  |Ячейка 5-7||Ячейка 5-8
  |-
  |Ячейка 5-9||Ячейка 5-10
  |-
  |Ячейка 5-11||Ячейка 5-12
  |}
 |}</pre>
 |&nbsp;||&nbsp;||&nbsp;||&nbsp;
 | valign="top"|
 {|
  |
  {| class="wikitable"
   !Заголовок 1||Заголовок 2
   |-
   |Ячейка 1-1
   |Ячейка 1-2
   |-
   |Ячейка 1-3
   |Ячейка 1-4
   |-
   |Ячейка 1-5
   |Ячейка 1-6
   |-
   |Ячейка 1-7
   |Ячейка 1-8
   |-
   |Ячейка 1-9
   |Ячейка 1-10
   |-
   |Ячейка 1-11
   |Ячейка 1-12
   |}
 |&nbsp;||&nbsp;
 |
 {| class="wikitable"
  !Заголовок 1||Заголовок 2
  |-
 |Ячейка 3-1
 |Ячейка 3-2
 |-
 |Ячейка 3-3
 |Ячейка 3-4
 |-
 |Ячейка 3-5
 |Ячейка 3-6
 |-
 |Ячейка 3-7
 |Ячейка 3-8
 |-
 |Ячейка 3-9
 |Ячейка 3-10
 |-
 |Ячейка 3-11
 |Ячейка 3-12
 |}
|&nbsp;||&nbsp;
 |
 {| class="wikitable"
 !Заголовок 1||Заголовок 2
 |-
 |Ячейка 5-1
 |Ячейка 5-2
 |-
 |Ячейка 5-3
 |Ячейка 5-4
 |-
 |Ячейка 5-5
 |Ячейка 5-6
 |-
 |Ячейка 5-7
 |Ячейка 5-8
 |-
 |Ячейка 5-9
 |Ячейка 5-10
 |-
 |Ячейка 5-11
 |Ячейка 5-12
 |}
|}
|}

==== Название таблицы ====
Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными вики-атрибутами.
 '''Пример:'''
 <nowiki>{| border="1"
 |+ Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}</nowiki>
Выглядеть это будет так:
 {| border="1"
 |+ Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}

==== Ширина таблицы и столбцов ====
Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, независимо от их содержания. Для фиксации ширины таблицы применяется атрибут ''width''. В атрибуте можно использовать как процентное соотношение ("75%"), так и кол-во пикселей ("300px").
 '''Пример:'''
 <nowiki>{| border="1" width="75%"
 |+Таблица 1
 |Ячейка 1*1 - long - long- long- long- long
 |Ячейка 1*2
 |-
 |Ячейка 1*3
 |Ячейка 1*4
 |}</nowiki>
 <nowiki>{| border="1" width="75%"
 |+Таблица 2
 |Ячейка 2*1
 |Ячейка 2*2
 |-
 |Ячейка 2*3
 |Ячейка 2*4
 |}</nowiki>

Выглядеть это будет так:
 {| border="1" width="75%"
 |+Таблица 1
 |Ячейка 1*1 - long - long- long- long- long
 |Ячейка 1*2
 |-
 |Ячейка 1*3
 |Ячейка 1*4
 |}
 {| border="1" width="75%"
 |+Таблица 2
 |Ячейка 2*1
 |Ячейка 2*2
 |-
 |Ячейка 2*3
 |Ячейка 2*4
 |}

С помощью этого же атрибута можно регулировать '''ширину отдельных столбцов''':

 '''Пример:'''
 <nowiki>{| border="1" width="75%"
 |+Таблица 1
 | width="40%"|Ячейка 1*1 - long - long- long- long- long
 | width="20%"|Ячейка 1*2 - long - long- long- long- long
 | width="40%"|Ячейка 1*3 - long - long- long- long- long
 |-
 |Ячейка 1*4
 |Ячейка 1*5
 |Ячейка 1*6
 |}</nowiki>

{| border="1" width="75%"
 |+Таблица 1
 | width="40%"|Ячейка 1*1 - long - long- long- long- long
 | width="20%"|Ячейка 1*2 - long - long- long- long- long
 | width="40%"|Ячейка 1*3 - long - long- long- long- long
 |-
 |Ячейка 1*4
 |Ячейка 1*5
 |Ячейка 1*6
 |}

Для задания определённой ширины ячейки с '''вложенной таблицей''' следует указать для неё атрибут ''width'', но закрыть этот атрибут вертикальной чёрточкой:
{| width="80%"
 |
 <nowiki>{| border="1"
 |Ячейка 1
 | width="50%"|
 {| border="2"
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}</nowiki>
|&nbsp;||&nbsp;||&nbsp;||&nbsp;
{| border="1" width="60%"
 |Ячейка 1
 | width="50%"|
 {| border="2"
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}
|}