Реклама на сайте (разместить):



Реклама и пожертвования позволяют нам быть независимыми!

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

Материал из Викизнание
Перейти к: навигация, поиск

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

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>

Сортируемые таблицы с объединенными вертикальными ячейками[править]

Если несколько ячеек объединены вертикально, то таблица может сломаться при сортировке, например:

Группа Имя Номер
100 Александр 42
Василий 14
200 Поликарп 33
Иван 54
Дмитрий 21
400 Никанор 31
Вячеслав 67

В этом случае можно либо убрать объединение, либо воспользоваться шаблонами {{CST-block}}, {{CST-head}} и {{CST-end}} (подробнее см. первый шаблон). Также можно использовать вариант ниже, но некоторые столбцы в нем будут сортироваться лишь частично:

Группа
100
Имя Номер
Александр 42
Василий 14
200
Имя Номер
Поликарп 33
Иван 54
Дмитрий 21
400
Имя Номер
Никанор 31
Вячеслав 67
Статью можно улучшить?
✍ Редактировать 💸 Спонсировать 🔔 Подписаться 📩 Переслать 💬 Обсудить
Позвать друзей
Вам также может быть интересно: