Help:Таблицы

What links here (2) →

Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, т. е. информацию в них можно рассортировать неким образом, например, по дате или алфавиту.

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

Расширение SimpleTable

Простейший способ с минимумом «шумовых» символов и с соблюдением модели «строка таблицы=строка текста» — это использование расширения SimpleTable и тега «tab».

Этот же способ удобно применять для копипасты простых таблиц из Excel’я и подобных программ — нужно только написать <tab sep=tab>. Если, однако, таблица содержит объединённые ячейки или специфичные стили ячеек, то способ не подходит, и нужно смотреть в сторону #Импорт таблиц из внешних приложений в вики-синтаксис.

Например,

<tab class=wikitable sep=spaces head=top>
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
Дневная_температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная_температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные_часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые_дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура_воды     19     18      18    18  19   20    21     23    20      18      18     18
</tab>

Месяцы:	январь	февраль	март	апрель	май	июнь	июль	август	сентябрь	октябрь	ноябрь	декабрь
Дневная_температура	21	21	22	23	25	27	29	28	26	24	22	20
Ночная_температура	15	15	15	16	17	17	18	17	16	15	15	14
Солнечные_часы/день	6	6	7	8	9	9	9	8	7	7	6	6
Дождливые_дни/месяц	6	4	3	2	2	1	0	0	2	5	6	7
Температура_воды	19	18	18	18	19	20	21	23	20	18	18	18

Атрибуты тега «tab», обрабатываемые самим SimpleTable:

sep

Символ-сепаратор колонок:

tab: символ табуляции
space: пробел
spaces: один или несколько пробелов или символов табуляции
comma: запятая
bar: вертикальная черта «|»
Другие: Есть возможность определить как разделитель любую последовательность символов. Скажем, sep="%%" разобьёт строчку по двойному символу процента.

head

этот атрибут, если есть, указывает, где распологается заголовок таблицы.

top: верхняя запись
left: первая колонка
topleft: и верхняя запись и первая (левая) колонка таблицы.

Также принимаются все атрибуты, которые можно указать в стандартном синтаксисе вики-таблиц, например:

class: Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам.

Чтобы не видеть убогие стандартные HTML-рамочки, рекомендуется всегда использовать class="wikitable".

Чтобы применить стиль к ячейкам, нужно определить класс .className td. Например, чтобы выровнять все ячейки по левому краю, нужно добавить на страницу следующий текст:

<html><style>.classname td { text-align: right; }</style></html>

border: Толщина границ, попадает в HTML-атрибут таблицы. Подобные границы выглядят убого, лучше используйте класс simpletable.
cellpadding: Ширина поля между значениями ячеек и границами ячеек.

И наконец, добавляя к class слово sortable, можно делать динамически сортируемые таблицы:

EMP_NO	DEPT_NO	PRO_NO	EMP_BDATE	EMP_SAL	EMP_BONUS
2441	1	155	1955	16000.00	14000.00
2442	1	20	1960	14000.00	NULL
2443	1	NULL	1960	16000.00	13000.00
2452	1	155	NULL	15000.00	14000.00
2453	1	234	NULL	17000.00	NULL
2444	2	177	1970	17000.00	16000.00

Таблицы в стандартном синтаксисе MediaWiki

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

Пример: Таблица с одной строкой пишется так:

{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}

В Wiki4Intranet это будет выглядеть так:

Ячейка 1

Ячейка 2

Ячейка 3

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

Пример: Таблица в две строки пишется так:

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}

В Wiki4Intranet это будет выглядеть так:

Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2

Таблица в три строки пишется так:

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

А в Wiki4Intranet это будет выглядеть так:

Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

И так далее.

Табличные рамки

Вид рамки, как и другие параметры таблицы, можно указать сразу после {|. Не забудьте, что между ними и атрибутом должен быть пробел.

Однако, вместо border=1 рекомендуется опять-таки просто использовать class=wikitable — выглядит куда симпатичнее.

Пример: Для последней таблицы рамку можно создать так:

border=1

class=wikitable

Код

{| border=1
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

{| class=wikitable
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

Результат

Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Заголовки

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

Пример:

Для последней таблицы можно написать так:

{| class=wikitable
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Первый столбец	Второй столбец	Третий столбец
Первая строчка	Ячейка 2*1	Ячейка 3*1
Вторая строчка	Ячейка 2*2	Ячейка 3*2
Третья строчка	Ячейка 2*3	Ячейка 3*3

Запись в одну строчку

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

Пример: Для последней таблицы можно написать так:

{| class=wikitable
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Первый столбец	Второй столбец	Третий столбец
Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Выравнивание содержимого ячейки

Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: text-align и vertical-align. text-align можно указать в таблице, строке или отдельных ячейках, тогда как vertical-align можно задать только отдельным строкам или ячейкам.

Вы вводите

Вы получаете

{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}

A	B	C
D	E	F
G	H	I

Объединённые ячейки

В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.

Для слияния ячеек по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.

Пример: Вертикальное слияние двух ячеек пишется так:

{| class=wikitable
 |Ячейка 1
 |rowspan=2 |Ячейка 2, растянута
 |Ячейка 3
 |-
 |Ячейка 4
 |Ячейка 5
 |}

Выглядеть это будет так:

Ячейка 1	Ячейка 2, растянута	Ячейка 3
Ячейка 4	Ячейка 2, растянута	Ячейка 5

Для горизонтального слияния используется атрибут colspan=n.

Пример:

{| class=wikitable
 |Ячейка 1
 |colspan=2 |Ячейка 2, растянута
 |-
 |Ячейка 3
 |Ячейка 4
 |Ячейка 5
 |}

Выглядит это так:

Ячейка 1	Ячейка 2, растянута
Ячейка 3	Ячейка 4	Ячейка 5

«Раскраска» таблиц

Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:

для отдельного слова — <font color="#ABCDEF">Teкст</font>;
для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>,

где «ABCDEF» — индекс цвета в Таблице цветов.

Пример:
Для "раскраски" текста пишут так:
{| class=wikitable
 |Ячейка 1*1
 |Здесь цветное только <font color="#FF00FF">одно</font> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Ячейка 1*1	Здесь цветное только одно слово.	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	А здесь выделен цветом длинный-длинный абзац.
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в Таблице цветов.

Пример:
Для "раскраски" одной ячейки пишется так:
{| class=wikitable
 |Ячейка 1*1
 |bgcolor=#FFCC00|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor=#CCFF00|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Вложенные таблицы

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

Пример:
{| border=1
 |Ячейка 1
 |
 {| border=2
 |Ячейка A
 |-
 |Ячейка B
 |}
 |Ячейка 3
 |}

Выглядеть это будет так:

Ячейка 1

Ячейка A

Ячейка B

Ячейка 3

Название таблицы

Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.

Пример:
{| border=1
 |+ Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}

Выглядеть это будет так:

Очень длинное-длинное название таблицы.
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Ширина таблицы

Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width.

Пример:
{| 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
 |}

Выглядеть это будет так:

Таблица 1
Ячейка 1*1 - long - long- long- long- long	Ячейка 1*2
Ячейка 1*3	Ячейка 1*4

Таблица 2
Ячейка 2*1	Ячейка 2*2
Ячейка 2*3	Ячейка 2*4

Импорт таблиц из внешних приложений в вики-синтаксис

Иногда возникает задача импорта сложных таблиц из Office-приложений (MS Word, MS Excel, Open Office).

«Сложные» таблицы — это таблицы, имеющие различные стили ячеек и/или объединённые ячейки.

С помощью wikEd — просто, но некрасиво

Используем Firefox, Chrome или Safari.
Включаем wikEd, если оный выключен (кнопочка с карандашом в правом верхнем углу страницы).
Делаем Copy-Paste таблицы в статью.
Нажимаем кнопку [W] — Wikify, выглядит она так: .

Ручками — сложнее, но красивее

Нужно:

добиться сохранения таблицы в HTML-формате (например, скопировать таблицу из MS Excel в MS Word, сохранить в формате «web-page filtered»).
«Почистить» таблицу от лишних тэгов и атрибутов с помощью программы Tidy. Примерный вызов Tidy для HTML таблицы из сохраненной из «MS Word» следующий:

tidy -raw -i -m -wrap 256 -bare --word-2000 yes %1

Вставить полученную (очищенную и отформатированную) HTML-таблицу в статью.

Таблицы в машинописном стиле без форматирования

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

                                       Климатическая таблица

Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
--------------------------------------------------------------------------------------------------
Дневная температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура воды     19     18      18    18  19   20    21     23    20      18      18     18

Help:Таблицы

Contents

Расширение SimpleTable

Таблицы в стандартном синтаксисе MediaWiki

Табличные рамки

Заголовки

Запись в одну строчку

Выравнивание содержимого ячейки

Объединённые ячейки

«Раскраска» таблиц

Вложенные таблицы

Название таблицы

Ширина таблицы

Импорт таблиц из внешних приложений в вики-синтаксис

С помощью wikEd — просто, но некрасиво

Ручками — сложнее, но красивее

Таблицы в машинописном стиле без форматирования