ЭБФ:Оформление таблиц

Материал из Большой Форум
Перейти к: навигация, поиск

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

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 Щ 211
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>

См. также