Перейти к содержанию

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

Материал из Викиверситета

Стандартное оформление таблиц в Викиверситете достигается использованием нескольких стандартных 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

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

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

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

{| class="wide"
...
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3


Отличается от 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


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

См. также

[править]