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

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск
↱ ВП:ОТ

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

Классы оформления таблиц[править | править вики-текст]

wikitable[править | править вики-текст]

shared.css:

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

Положение на странице[править | править вики-текст]

По умолчанию таблица класса wikitable располагается слева без обтекания. Чтобы установить обтекание, необходимо добавить параметр align="right" или align="left". Для создания отступа между границей таблицы и текстом статьи следует добавить параметр style="margin-left:1em" (если align="right") или style="margin-right:1em" (если align="left").

Пример
{| class="wikitable" align="right" style="margin-left:1em"
|-
! Заголовок 1 || Заголовок 2
|-
| Ячейка 1-1 || Ячейка 1-2
|-
| Ячейка 2-1 || Ячейка 2-2
|}
Текст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьи.

Текст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьи.
Результат
Заголовок 1 Заголовок 2
Ячейка 1-1 Ячейка 1-2
Ячейка 2-1 Ячейка 2-2

Текст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьи.

Текст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьиТекст статьи.

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

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: цвет;" (см. таблицу цветов). Рекомендуется использовать эту возможность только если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.

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 и остальные классы сворачивания первоначально появились в английском разделе и затем были портированы во многие другие проекты Фонда.

См. также[править | править вики-текст]