Содержание |
Классы оформления таблиц
Все нижеперечисленные классы добавляют небольшое пустое расстояние слева и справа к каждой ячейке (padding-left:0.2em; padding-right:0.2em
).
wikitable
Стандартный класс, создающий таблицу с тонкими границами между всеми ячейками и с подсвеченными заголовками. Также добавляет вертикальные отступы внутри ячеек (padding-top:0.2em; padding-bottom:0.2em
).
{| class="wikitable" |- !Заголовок 1||Заголовок 2||Заголовок 3 |- |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 |- |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 |- |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 |} |
|
standard
Наиболее часто встречающийся класс таблиц в русскоязычном разделе Википедии. Идентичен wikitable за исключением вертикальных отступов.
Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи.
{| class="standard" |- !Заголовок 1||Заголовок 2||Заголовок 3 |- |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 |- |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 |- |Ячейка 1*3||Ячейка 2*3||Ячейка 3*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 |}
Заголовок 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"
|
Классы оформления ячеек
Любую ячейку таблицы или всю строку можно подсветить или затенить, для этого нужно для ячейки или строки задать параметр class="тип_выделения"
.
Существуют два стандартных класса подсветки и два типа затенения.
для заголовка | для обычной ячейки | |
---|---|---|
highlight | ||
bright | ||
shadow | ||
dark |
Для того чтобы сделать фон ячейки прозрачным, используйте class="transparent"
.
- Для заголовков рекомендуется использовать подсветку
highlight
, при необходимости выделить более важный заголовок —bright
. Если есть необходимость понизить важность заголовка, можно использовать затенение. - Для выделения групп обычных ячеек рекомендуется использовать затенение (сначала
shadow
, при необходимости —dark
). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Если в какой-то ячейке требуется задать определённый цвет фона, задавайте его вот так: style="background-color: цвет;"
(см. таблицу цветов). Рекомендуется использовать эту возможность только если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.Обзор российского рынка банковской цифровизации: импортозамещение, искусственный интеллект и собственные экосистемы
Следующие таблицы (класса standard
) предназначены для проверки того, что описанные выше классы правильно обрабатываются вашим браузером. В левых столбцах использован указанный класс, в правых цвет задан стилем оформления прямо в коде страницы. Цвета слева и справа должны совпадать.
ячейка | |
#FFFFFF | |
highlight | #FFFFEE |
bright | #FFEECC |
shadow | #F0F0F0 |
dark | #CCCCCC |
ячейка в строке | |
#FFFFFF | |
highlight | #FFFFEE |
bright | #FFEECC |
shadow | #F0F0F0 |
dark | #CCCCCC |
заголовок | |
#EEEEFF | |
---|---|
highlight | #EEEEFF |
bright | #CCCCFF |
shadow | #F0F0F0 |
dark | #CCCCCC |
заголовок в строке | |
#EEEEFF | |
---|---|
highlight | #EEEEFF |
bright | #CCCCFF |
shadow | #F0F0F0 |
dark | #CCCCCC |
Kлассы интерактивности таблиц
Эти дополнительные классы добавляют таблицам интерактивность с помощью JavaScript.
collapsible
Тема | ||
---|---|---|
Заголовок 1 | Заголовок 2 | Заголовок 3 |
Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому классу, например {| class="standard collapsible"
sortable
Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому классу, например:
{| class="standard sortable" |- !Латиница||Кириллица||class="unsortable"|Цифры |- | D || Г || 3 |- | E || Щ || 2 |- | F || Б || 11 |} |
|
Чтобы сделать столбец несортируемым, добавьте класс unsortable к выбранной ячейке в заголовке таблицы.
Реализация классов
wikitable первоначально появился в английском разделе Википедии, был скопирован в несколько других разделов и через несколько лет в rev:48842 был добавлен прямо в MediaWiki.
prettytable также существовал в английском разделе и был идентичен wikitable за исключением цвета заголовка. В настоящее время признан устаревшим и массово заменяется на wikitable bottom.
Остальные классы оформления таблиц и ячеек были придуманы и используются только в русскоязычном разделе Википедии.
sortable и остальные классы сортировки определены в MediaWiki.
collapsible и остальные классы сворачивания присутствуют во многих проектах Фонда, но конкретная реализация может различаться.