Википедия:Оформление таблиц



ВП:ОТ

При создании таблиц желательно придерживаться стандартного стиля оформления. В Википедии это реализовано с помощью CSS классов, добавленных в файл Mediawiki:Common.css.

Укажите в первой строке параметр class="имя_класса", и таблица будет оформлена стандартным образом.

править Основные классы

править standard

Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр border тоже необязателен.

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

править simple

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

{| border=1

{| class="simple" border=1

Все вышеперечисленные классы также добавляют небольшое пустое расстояние слева и справа к каждой ячейке (padding-left:0.2em; padding-right:0.2em).

править wikitable/prettytable

Также поддерживаются классы wikitable/prettytable из английской Википедии. У этих классов пустое расстояние добавляется в каждую ячейку со всех сторон (padding:0.2em). В остальном wikitable практически идентичен standard, а prettytable отличается цветом заголовка таблицы.

править Javascript классы

Эти дополнительные классы добавляют таблицам интерактивность и зависят от кода в Mediawiki:Common.js.

править collapsible

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

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

править sortable и unsortable

Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому классу, например:

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

Чтобы сделать столбец несортируемым, добавьте класс unsortable к выбранной ячейке в заголовке таблицы. Подробнее см. m:Help:Sorting (англ.).

править Выделение ячеек

Любую ячейку таблицы или всю строку можно подсветить или затенить, для этого нужно для ячейки или строки задать параметр class="тип_выделения".

Существуют два стандартных класса подсветки и два типа затенения.

Для того чтобы сделать фон ячейки прозрачным, используйте class="transparent".

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

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

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