Викиверситет:Оформление таблиц

Стандартное оформление таблиц в Викиверситете достигается использованием нескольких стандартных CSS-классов.

Классы оформления таблиц

wikitable

table.wikitable {
 margin: 1em 1em 1em 0;
 background: #f9f9f9;
 border: 1px #aaa solid;
 border-collapse: collapse;
}
.wikitable th,
.wikitable td {
 border: 1px #aaa solid;
 padding: 0.2em;
}
.wikitable th {

 background: #f2f2f2;
 text-align: center;
}
.wikitable caption {
 font-weight: bold;
}

Создаёт таблицу с тонкими границами между всеми ячейками, сероватым цветом фона и серыми заголовками. Универсальный класс, определёный прямо в движке MediaWiki.

 
{| class="wikitable"
|-
!Заголовок 1||Заголовок 2 
|-
|Ячейка 1*1||Ячейка 2*1
|-
|Ячейка 1*2||Ячейка 2*2
|-
|Ячейка 1*3||Ячейка 2*3
|}

Заголовок 1	Заголовок 2
Ячейка 1*1	Ячейка 2*1
Ячейка 1*2	Ячейка 2*2
Ячейка 1*3	Ячейка 2*3

Все последующие классы таблиц определены только в русском Викиверситете.

standard

Похож на wikitable, но имеет следующие отличия:

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

 
{| class="standard"
|-
!Заголовок 1||Заголовок 2
|-
|Ячейка 1*1||Ячейка 2*1
|-
|Ячейка 1*2||Ячейка 2*2
|-
|Ячейка 1*3||Ячейка 2*3
|}

Заголовок 1	Заголовок 2
Ячейка 1*1	Ячейка 2*1
Ячейка 1*2	Ячейка 2*2
Ячейка 1*3	Ячейка 2*3

wide

Отличается от standard только тем, что растягивает таблицу на всю ширину страницы.

{| class="wide"
...

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

tiles

Отличается от standard отсутствием линий сетки и затенением обычных ячеек. Не используйте его для таблиц, к которым можно применить какой-нибудь из двух предыдущих стилей без потери наглядности. Примером оправданного применения может быть, например, таблица Менделеева.

{| class="tiles"
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|-
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
|}

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

simple

Этот класс меняет только сетку границ между ячейками, делая её такой же как в standard; он имеет смысл только с ненулевым border. Сравните:

просто border

{| border="1"

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

с классом simple:

{| class="simple" border="1"

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2
Ячейка 1*3	Ячейка 2*3	Ячейка 3*3

Классы оформления ячеек

	highlight	bright	shadow	dark
заголовок
обычная ячейка

Также в русском Викиверситете есть два класса подсветки и два типа затенения отдельных ячеек, при этом классы подсветки придают разные цвета заголовочным «!» и обычным «|» ячейкам.

Эти классы можно добавлять к строке для подсветки сразу всех ячеек строки.

|- class="bright"
| ...
| ...

Или к отдельно взятой ячейке; если нужно просто отменить цвет, заданный в строке, используйте класс transparent.

|-
|class="bright"| ...
|class="highlight"| ...

Например:


\|-class="dark"		\|class="highlight"
\|-class="bright"	\|class="transparent"

Для заголовков рекомендуется использовать подсветку highlight, при необходимости выделить более важный заголовок — bright. Если есть необходимость понизить важность заголовка, можно использовать затенение.

Для выделения групп обычных ячеек рекомендуется использовать затенение (сначала shadow, при необходимости — dark). Если нужно выделить одну-две ячейки, можно использовать подсветку.

Если в какой-то ячейке требуется задать определённый цвет фона, задавайте его вот так: style="background-color: цвет;" (см. таблицу цветов). Рекомендуется использовать эту возможность только если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.

Проверка классов ячеек в вашем браузере

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

ячейка
	#FFFFFF
highlight	#FFFFEE
bright	#FFEECC
shadow	#F0F0F0
dark	#CCCCCC

ячейка в строке
	#FFFFFF
highlight	#FFFFEE
bright	#FFEECC
shadow	#F0F0F0
dark	#CCCCCC

	#EEEEFF
заголовок
highlight	#EEEEFF
bright	#CCCCFF
shadow	#F0F0F0
dark	#CCCCCC

	#EEEEFF
заголовок в строке
highlight	#EEEEFF
bright	#CCCCFF
shadow	#F0F0F0
dark	#CCCCCC

Kлассы интерактивности таблиц

Эти дополнительные классы добавляют таблицам интерактивность с помощью JavaScript.

collapsible

Тема
Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1*1	Ячейка 2*1	Ячейка 3*1
Ячейка 1*2	Ячейка 2*2	Ячейка 3*2

Позволяет «сворачивать» таблицу, оставляя лишь заголовки, например {| class="wikitable collapsible"

Подробнее см. Викиверситет:Сворачивающиеся блоки.

sortable

Позволяет сортировать столбцы таблицы.

Чтобы сделать столбец несортируемым, добавьте класс unsortable к выбранной ячейке в заголовке таблицы:

{| class="standard sortable"
|-
! Латиница || Кириллица || class="unsortable" | Цифры
|-
| D || Г || 3 
|-
| E || Щ || 2
|-
| F || Б || 11
|}

Латиница	Кириллица	Цифры
D	Г	3
E	Щ	2
F	Б	11

Чтобы сделать последнюю строку в таблице (например, строку итогов) несортируемой, добавьте к ней класс sortbottom:

{| class="wikitable sortable"
! Имя !! Число
|-
| Юрий || 1.85
|-
| Андрей || 1.89
|-
| Сергей || 1.72
|- class="sortbottom"
! ''Среднеe:'' !! 1.82'''
|}

Имя	Число
Юрий	1.85
Андрей	1.89
Сергей	1.72
Среднеe:	1.82

Тип сортировки столбца определяется каждый раз заново при нажатии на кнопку сортировки и зависит от текущего содержимого самой верхней ячейки. К примеру, если в этой ячейке пусто, то столбец будет отсортирован как массив строк (где «8» > «122»), несмотря на содержимое следующих ячеек. Это исправляется добавлением в начало ячейки невидимого значения для сортировки (например, <span style="display:none">0</span> , или при помощи шаблона {{~}}), либо использованием параметра data-sort-value.

Подробнее о сортировке см. m:Help:Sorting(англ.).

Реализация классов

wikitable первоначально появился в английском разделе Википедии, был скопирован в несколько других разделов и через несколько лет в rev:48842 был добавлен в MediaWiki.

~~prettytable~~ также существовал в английском разделе и был идентичен wikitable за исключением цвета заголовка, позже был массово убран. В нашем проекте признан устаревшим, но вероятно всё ещё используется на некоторых страницах.

Остальные классы оформления таблиц и ячеек были придуманы и реализованы только в русском разделе.

sortable и остальные классы сортировки реализованы в MediaWiki (см. wikibits.js).

collapsible и остальные классы сворачивания первоначально появились в английском разделе и затем были скопированы во многие другие проекты Фонда.

См. также

Викиверситет:Как делать таблицы
Подробное объяснение вики-форматирования таблиц
Шаблоны {{НумерацияТаблицы}} и {{Автонумерация}} для автоматической нумерации строк таблицы