Викиверситет:Оформление таблиц
Стандартное оформление таблиц в Викиверситете достигается использованием нескольких стандартных 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 |} |
|
Все последующие классы таблиц определены только в русском Викиверситете.
standard
правитьПохож на wikitable, но имеет следующие отличия:
- без цвета фона, то есть таблица обычно имеет белый фон страницы;
- другой цвет заголовочных ячеек;
- ячейки более узкие по вертикали;
- отсутствие отступов вокруг таблицы.
{| class="standard" |- !Заголовок 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 |} |
|
simple
правитьЭтот класс меняет только сетку границ между ячейками, делая её такой же как в standard
; он имеет смысл только с ненулевым border
. Сравните:
просто border
{| border="1"
|
с классом simple :
{| class="simple" border="1"
|
Классы оформления ячеек
править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
|}
|
|
Чтобы сделать последнюю строку в таблице (например, строку итогов) несортируемой, добавьте к ней класс sortbottom:
{| class="wikitable sortable"
! Имя !! Число
|-
| Юрий || 1.85
|-
| Андрей || 1.89
|-
| Сергей || 1.72
|- class="sortbottom"
! ''Средне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 и остальные классы сворачивания первоначально появились в английском разделе и затем были скопированы во многие другие проекты Фонда.
См. также
править- Викиверситет:Как делать таблицы
- Подробное объяснение вики-форматирования таблиц
- Шаблоны {{НумерацияТаблицы}} и {{Автонумерация}} для автоматической нумерации строк таблицы