ЭБФ:Оформление таблиц
Стандартное оформление таблиц в ЭБФ достигается использованием нескольких стандартных CSS классов.
Содержание
Классы оформления таблиц
wikitable
shared.css: <syntaxhighlight lang="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; } </syntaxhighlight>
Создаёт таблицу с тонкими границами между всеми ячейками, сероватым цветом фона и серыми заголовками. Универсальный класс, определёный прямо в движке 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>