Участник:Gevron/Таблицы: различия между версиями
Gevron (обсуждение | вклад) Нет описания правки |
Gevron (обсуждение | вклад) м (→Сворачивание таблицы: убрано в другой раздел (но без примера)) |
||
(не показано 20 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
{{Содержание}} | |||
<pre> | |||
{| class="wikitable" style="width:50%;" | |||
! Заголовок 1 | |||
! Заголовок 2 | |||
|- | |||
| Ячейка 1 | |||
| Ячейка 2 | |||
|} | |||
</pre> | |||
{| class="wikitable" style="width:50%;" | |||
! Заголовок 1 | |||
! Заголовок 2 | |||
|- | |||
| Ячейка 1 | |||
| Ячейка 2 | |||
|} | |||
Таблица состоит из следующих синтаксических элементов, каждый из которых следует писать на новой строке: | |||
* <code><nowiki>{|</nowiki></code> — открывает таблицу. | |||
** Все остальные элементы должны идти только после него. | |||
** Можно указать класс. | |||
** Можно указать стиль. | |||
** Можно указать идентификатор. | |||
* <code><nowiki>!</nowiki></code> — заголовок таблицы. | |||
** Можно использовать несколько подряд. | |||
** Можно указать класс. | |||
** Можно указать стиль. | |||
** Можно указать идентификатор. | |||
** Можно добавить содержимое для его отображения. | |||
* <code><nowiki>|</nowiki></code> — ячейка таблицы. | |||
** Можно использовать несколько подряд. | |||
** Можно указать класс. | |||
** Можно указать стиль. | |||
** Можно указать идентификатор. | |||
** Можно добавить содержимое для его отображения. | |||
* <code><nowiki>|-</nowiki></code> — разделитель строк таблицы. | |||
** Делит ячейки и заголовки по строкам. | |||
** Можно указать класс. | |||
** Можно указать стиль. | |||
** Можно указать идентификатор. | |||
* <code><nowiki>|}</nowiki></code> — закрывает таблицу. | |||
** Все остальные элементы должны идти только перед ним. | |||
== Начало таблицы == | |||
Любая таблица начинается с пустой строки кодом <code>{|</code>. | |||
К нему может быть добавлены… | |||
* <code>class="''название_класса''"</code> — классы, влияющие на оформление и функционал таблицы; | |||
* <code>id="название идентификатора"</code> — идентификатор, который мог бы влиять на оформление, но это не настроено и потому не влияет; | |||
* <code>style="''название-стиля:значение;''"</code> — т. н. внутристрочные стили, характерные для всего тела таблицы и частично наследуемые строками и ячейками самой таблицы. | |||
Может быть использовано несколько классов одновременно, для чего они указываются через пробел. Порядок классов может иметь значение! | |||
Доступные функциональные классы: | |||
* <code>sortable</code> — включает сортировку для таблицы. <u>Требует правильной разметки обычных ячеек и заглавных!</u> Настоятельно не рекомендуется из-за обилия нюансов использования! | |||
* <code>mw-collapsible</code> — включает сворачиваемость таблицы. Предполагается, что первая строка будет только из заглавных ячеек, а остальные строки будут только из простых ячеек. Не рекомендуется использовать новичкам. | |||
** <code>mw-collapsed</code> — делает сворачиваемую таблицу свёрнутой изначально. '''Не должно быть использовано без спроса!''' | |||
* <code>sticky-head</code> — делает весь заголовок или хотя бы первую строку плавающей, что может быть полезно для длинных таблиц, где важно постоянно видеть заголовок, например тут: [[броня]]. Так же имеет дополнительное стили специально для заголовков подобных в статье о броне. | |||
Доступные общие стилевые классы: | |||
* <code>wikitable</code> — создаёт простую табличку с аккуратными тонкими границами. Рекомендуется в большинстве случаев. Не совместимо с классом <code>items-table</code>. | |||
* <code>items-table</code> — создаёт сложную табличку с упоротыми жирными границами. Рекомендуется для списка предметов. Не совместимо с классом <code>wikitable</code>. | |||
** Классы-схемы окраски указанные в разделе [[#Цветовые классы|§Цветовые классы]]. Только один класс на выбор. | |||
** <code>regular</code> — убирает автоматическое изменение стилей первой в строке ячейки. | |||
** <code>emag-table</code> — делает текст во стором столбце центрированным. | |||
** <code>weapon-table</code> / <code>armor-table</code> — делает текст во всех ячейках кроме последней центрированным и жирным. На данный момент нет разницы между тем какой класс из двух указывать. | |||
** <code>proto-table</code> — то же что и предыдущий класс, но также меняет фон каждой третьей ячейки в строке. | |||
Идентификатор может быть указан одновременно только один. Название идентификатора можно использовать в дальнейшем в качестве [[Шаблон:Якорь|якоря]], несмотря на то что специализированный шаблон вызванный перед таблицей или в первой ячейке будет полезнее. | |||
Стили могут быть использованы как самостоятельно так и дополнять или переписывать стили применяемые классами. Стилей может быть указано несколько без ограничений, разделяемых друг от друга точкой с запятой <code>;</code> и желательно пробелом для удобочитаемости. Значение каждого стиля указывается через двоеточие после его название. Например, таблица с шириной в половину ширины страницы будет вызвана так: <code style="white-space: nowrap;">{| style="width:50%;"</code> | |||
=== Цветовые классы === | |||
{| class="items-table" | {| class="items-table" | ||
! Стиль !! Код !! Описание | ! Стиль !! Код !! Описание | ||
|- | |- | ||
| Общий || ''none'' || Если указан только <code>items-table</code> | | Общий || ''none'' || Если указан только <code>items-table</code> | ||
|- class=" | |- class="colors-secure" | ||
| | ! Ячейка-заголовок !! colspan="2" | Охранный цветовой стиль | ||
|- class=" | |- class="colors-secure" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Security</code> || Если указан набор классов <code>items-table colors-Security</code> | ||
|- class=" | |- class="colors-science" | ||
| | ! Ячейка-заголовок !! colspan="2" | Научный цветовой стиль | ||
|- class=" | |- class="colors-science" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Science</code> || Если указан набор классов <code>items-table colors-Science</code> | ||
|- class=" | |- class="colors-service" | ||
| | ! Ячейка-заголовок !! colspan="2" | Сервисный цветовой стиль | ||
|- class=" | |- class="colors-service" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Service</code> || Если указан набор классов <code>items-table colors-Service</code> | ||
|- class=" | |- class="colors-engine" | ||
| | ! Ячейка-заголовок !! colspan="2" | Инженерный цветовой стиль | ||
|- class=" | |- class="colors-engine" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Engineering</code> || Если указан набор классов <code>items-table colors-Engineering</code> | ||
|- class=" | |- class="colors-command" | ||
| | ! Ячейка-заголовок !! colspan="2" | Командный цветовой стиль | ||
|- class=" | |- class="colors-command" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Command</code> || Если указан набор классов <code>items-table colors-Command</code> | ||
|- class=" | |- class="colors-medik" | ||
| | ! Ячейка-заголовок !! colspan="2" | Медицинский цветовой стиль | ||
|- class=" | |- class="colors-medik" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Medical</code> || Если указан набор классов <code>items-table colors-Medical</code> | ||
|- class=" | |- class="colors-suply" | ||
| | ! Ячейка-заголовок !! colspan="2" | Снабжающий цветовой стиль | ||
|- class=" | |- class="colors-suply" | ||
| Марининский || <code>colors-marine</code> || Если указан набор классов <code>items-table colors- | | Ячейка 1-го столбца'' || <code>colors-Supply</code> || Если указан набор классов <code>items-table colors-Supply</code> | ||
|- class=" | |- class="colors-lava" | ||
| | ! Ячейка-заголовок !! colspan="2" | Планетарный цветовой стиль | ||
|- class=" | |- class="colors-lava" | ||
| | | Ячейка 1-го столбца'' || <code>colors-Lavaland</code> || Если указан набор классов <code>items-table colors-Lavaland</code> | ||
|- class="colors-synth" | |||
! Ячейка-заголовок !! colspan="2" | Синтетический цветовой стиль | |||
|- class="colors-synth" | |||
| Ячейка 1-го столбца'' || <code>colors-Synthetic</code> || Если указан набор классов <code>items-table colors-Synthetic</code> | |||
|- class="colors-antag" | |||
! Ячейка-заголовок !! colspan="2" | Антагонисткий цветовой стиль | |||
|- class="colors-antag" | |||
| Ячейка 1-го столбца'' || <code>colors-Antagonist</code> || Если указан набор классов <code>items-table colors-Antagonist</code> | |||
|- class="colors-cult" | |||
! Ячейка-заголовок !! colspan="2" | Культистский цветовой стиль | |||
|- class="colors-cult" | |||
| Ячейка 1-го столбца'' || <code>colors-Cultist</code> || Если указан набор классов <code>items-table colors-Cultist</code> | |||
|- class="colors-ratvar" | |||
! Ячейка-заголовок !! colspan="2" | Ратваровский цветовой стиль | |||
|- class="colors-ratvar" | |||
| Ячейка 1-го столбца'' || <code>colors-Ratvar</code> || Если указан набор классов <code>items-table colors-Ratvar</code> | |||
|- class="colors-xenom" | |||
! Ячейка-заголовок !! colspan="2" | Ксеноморфный цветовой стиль | |||
|- class="colors-xenom" | |||
| Ячейка 1-го столбца'' || <code>colors-Xenomorph</code> || Если указан набор классов <code>items-table colors-Xenomorph</code> | |||
|- class="colors-marine" | |||
! Ячейка-заголовок !! colspan="2" | Марининский цветовой стиль | |||
|- class="colors-Marine" | |||
| Ячейка 1-го столбца'' || <code>colors-marine</code> || Если указан набор классов <code>items-table colors-Marine</code> | |||
|- class="colors-wizard" | |||
! Ячейка-заголовок !! colspan="2" | Волшебный цветовой стиль | |||
|- class="colors-wizard" | |||
| Ячейка 1-го столбца'' || <code>colors-Wizard</code> || Если указан набор классов <code>items-table colors-Wizard</code> | |||
|- class="colors-abductor" | |||
! Ячейка-заголовок !! colspan="2" | Похитительский цветовой стиль | |||
|- class="colors-abductor" | |||
| Ячейка 1-го столбца'' || <code>colors-Abductor</code> || Если указан набор классов <code>items-table colors-Abductor</code> | |||
|} | |||
Если вас не устраивает цветовая гамма, или вам нужны иные комбинации цветов, обращайтесь к участнику [[user:Gevron|Геврону]] по удобным вам каналам связи. | |||
== Строки и ячейки == | |||
=== Объединение ячеек по строкам === | |||
Объединять ячейки можно по строкам с помощью <code>colspan</code>. | |||
<pre> | |||
{| class="wikitable" | |||
! colspan="2" | Заголовок 1 | |||
|- | |||
| Ячейка 1 | |||
| Ячейка 2 | |||
|} | |||
</pre> | |||
{| class="wikitable" | |||
! colspan="2" | Заголовок 1 | |||
|- | |||
| Ячейка 1 | |||
| Ячейка 2 | |||
|} | |||
=== Объединение ячеек по столбцам === | |||
Объединять по столбцам — с помощью <code>rowspan</code>. | |||
<pre> | |||
{| class="wikitable" | |||
! rowspan="2" | Заголовок 1 | |||
! Заголовок 2 | |||
|- | |||
| Ячейка 2 | |||
|} | |||
</pre> | |||
{| class="wikitable" | |||
! rowspan="2" | Заголовок 1 | |||
! Заголовок 2 | |||
|- | |||
| Ячейка 2 | |||
|} | |||
=== Разные цвета строк === | |||
<pre> | |||
{| class="items-table colors-secure" | |||
! width="20%" | Заголовок первого столбца | |||
! Заголовок второго столбца | |||
|- | |||
| Ячейка первого столбца, второй строки | |||
| Ячейка второго столбца, второй строки | |||
|- class="colors-suply" | |||
| Ячейка первого столбца, третьей строки | |||
| Ячейка второго столбца, третьей строки | |||
|} | |||
</pre> | |||
{| class="items-table colors-secure" | |||
! width="20%" | Заголовок первого столбца | |||
! Заголовок второго столбца | |||
|- | |||
| Ячейка первого столбца, второй строки | |||
| Ячейка второго столбца, второй строки | |||
|- class="colors-suply" | |||
| Ячейка первого столбца, третьей строки | |||
| Ячейка второго столбца, третьей строки | |||
|} | |||
=== Титульная ячейка === | |||
Мы можем задать титульное оформление для ячейки отличной от первой в строке. Для этого используется класс <code>capital</code>. | |||
<pre> | |||
{| class="items-table colors-command" | |||
! width="20%" | Заголовок первого столбца | |||
! Заголовок второго столбца | |||
|- | |||
| Ячейка первого столбца, второй строки | |||
| class="capital" | Ячейка второго столбца, второй строки | |||
|- | |||
| Ячейка первого столбца, третьей строки | |||
| Ячейка второго столбца, третьей строки | |||
|} | |||
</pre> | |||
{| class="items-table colors-command" | |||
! width="20%" | Заголовок первого столбца | |||
! Заголовок второго столбца | |||
|- | |||
| Ячейка первого столбца, второй строки | |||
| class="capital" | Ячейка второго столбца, второй строки | |||
|- | |||
| Ячейка первого столбца, третьей строки | |||
| Ячейка второго столбца, третьей строки | |||
|} | |||
=== Отключение титульных ячеек === | |||
Или наоборот убрать оформление первого столбца используя класс <code>regular</code>. В этом случае, класс можно указать для всей таблицы. | |||
<pre> | |||
{| class="items-table colors-lava" style="width:40%;" | |||
! Заголовок первого столбца | |||
|- | |||
| class="regular"| Ячейка первого столбца, второй строки | |||
|- | |||
| Ячейка первого столбца, третьей строки | |||
|} | |||
</pre> | |||
{| class="items-table colors-lava" style="width:40%;" | |||
! Заголовок первого столбца | |||
|- | |||
| class="regular"| Ячейка первого столбца, второй строки | |||
|- | |||
| Ячейка первого столбца, третьей строки | |||
|} | |} |
Текущая версия от 23:13, 12 мая 2023
{| class="wikitable" style="width:50%;" ! Заголовок 1 ! Заголовок 2 |- | Ячейка 1 | Ячейка 2 |}
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 1 | Ячейка 2 |
Таблица состоит из следующих синтаксических элементов, каждый из которых следует писать на новой строке:
{|
— открывает таблицу.- Все остальные элементы должны идти только после него.
- Можно указать класс.
- Можно указать стиль.
- Можно указать идентификатор.
!
— заголовок таблицы.- Можно использовать несколько подряд.
- Можно указать класс.
- Можно указать стиль.
- Можно указать идентификатор.
- Можно добавить содержимое для его отображения.
|
— ячейка таблицы.- Можно использовать несколько подряд.
- Можно указать класс.
- Можно указать стиль.
- Можно указать идентификатор.
- Можно добавить содержимое для его отображения.
|-
— разделитель строк таблицы.- Делит ячейки и заголовки по строкам.
- Можно указать класс.
- Можно указать стиль.
- Можно указать идентификатор.
|}
— закрывает таблицу.- Все остальные элементы должны идти только перед ним.
Начало таблицы
Любая таблица начинается с пустой строки кодом {|
.
К нему может быть добавлены…
class="название_класса"
— классы, влияющие на оформление и функционал таблицы;id="название идентификатора"
— идентификатор, который мог бы влиять на оформление, но это не настроено и потому не влияет;style="название-стиля:значение;"
— т. н. внутристрочные стили, характерные для всего тела таблицы и частично наследуемые строками и ячейками самой таблицы.
Может быть использовано несколько классов одновременно, для чего они указываются через пробел. Порядок классов может иметь значение!
Доступные функциональные классы:
sortable
— включает сортировку для таблицы. Требует правильной разметки обычных ячеек и заглавных! Настоятельно не рекомендуется из-за обилия нюансов использования!mw-collapsible
— включает сворачиваемость таблицы. Предполагается, что первая строка будет только из заглавных ячеек, а остальные строки будут только из простых ячеек. Не рекомендуется использовать новичкам.mw-collapsed
— делает сворачиваемую таблицу свёрнутой изначально. Не должно быть использовано без спроса!
sticky-head
— делает весь заголовок или хотя бы первую строку плавающей, что может быть полезно для длинных таблиц, где важно постоянно видеть заголовок, например тут: броня. Так же имеет дополнительное стили специально для заголовков подобных в статье о броне.
Доступные общие стилевые классы:
wikitable
— создаёт простую табличку с аккуратными тонкими границами. Рекомендуется в большинстве случаев. Не совместимо с классомitems-table
.items-table
— создаёт сложную табличку с упоротыми жирными границами. Рекомендуется для списка предметов. Не совместимо с классомwikitable
.- Классы-схемы окраски указанные в разделе §Цветовые классы. Только один класс на выбор.
regular
— убирает автоматическое изменение стилей первой в строке ячейки.emag-table
— делает текст во стором столбце центрированным.weapon-table
/armor-table
— делает текст во всех ячейках кроме последней центрированным и жирным. На данный момент нет разницы между тем какой класс из двух указывать.proto-table
— то же что и предыдущий класс, но также меняет фон каждой третьей ячейки в строке.
Идентификатор может быть указан одновременно только один. Название идентификатора можно использовать в дальнейшем в качестве якоря, несмотря на то что специализированный шаблон вызванный перед таблицей или в первой ячейке будет полезнее.
Стили могут быть использованы как самостоятельно так и дополнять или переписывать стили применяемые классами. Стилей может быть указано несколько без ограничений, разделяемых друг от друга точкой с запятой ;
и желательно пробелом для удобочитаемости. Значение каждого стиля указывается через двоеточие после его название. Например, таблица с шириной в половину ширины страницы будет вызвана так: {| style="width:50%;"
Цветовые классы
Стиль | Код | Описание |
---|---|---|
Общий | none | Если указан только items-table
|
Ячейка-заголовок | Охранный цветовой стиль | |
Ячейка 1-го столбца | colors-Security |
Если указан набор классов items-table colors-Security
|
Ячейка-заголовок | Научный цветовой стиль | |
Ячейка 1-го столбца | colors-Science |
Если указан набор классов items-table colors-Science
|
Ячейка-заголовок | Сервисный цветовой стиль | |
Ячейка 1-го столбца | colors-Service |
Если указан набор классов items-table colors-Service
|
Ячейка-заголовок | Инженерный цветовой стиль | |
Ячейка 1-го столбца | colors-Engineering |
Если указан набор классов items-table colors-Engineering
|
Ячейка-заголовок | Командный цветовой стиль | |
Ячейка 1-го столбца | colors-Command |
Если указан набор классов items-table colors-Command
|
Ячейка-заголовок | Медицинский цветовой стиль | |
Ячейка 1-го столбца | colors-Medical |
Если указан набор классов items-table colors-Medical
|
Ячейка-заголовок | Снабжающий цветовой стиль | |
Ячейка 1-го столбца | colors-Supply |
Если указан набор классов items-table colors-Supply
|
Ячейка-заголовок | Планетарный цветовой стиль | |
Ячейка 1-го столбца | colors-Lavaland |
Если указан набор классов items-table colors-Lavaland
|
Ячейка-заголовок | Синтетический цветовой стиль | |
Ячейка 1-го столбца | colors-Synthetic |
Если указан набор классов items-table colors-Synthetic
|
Ячейка-заголовок | Антагонисткий цветовой стиль | |
Ячейка 1-го столбца | colors-Antagonist |
Если указан набор классов items-table colors-Antagonist
|
Ячейка-заголовок | Культистский цветовой стиль | |
Ячейка 1-го столбца | colors-Cultist |
Если указан набор классов items-table colors-Cultist
|
Ячейка-заголовок | Ратваровский цветовой стиль | |
Ячейка 1-го столбца | colors-Ratvar |
Если указан набор классов items-table colors-Ratvar
|
Ячейка-заголовок | Ксеноморфный цветовой стиль | |
Ячейка 1-го столбца | colors-Xenomorph |
Если указан набор классов items-table colors-Xenomorph
|
Ячейка-заголовок | Марининский цветовой стиль | |
Ячейка 1-го столбца | colors-marine |
Если указан набор классов items-table colors-Marine
|
Ячейка-заголовок | Волшебный цветовой стиль | |
Ячейка 1-го столбца | colors-Wizard |
Если указан набор классов items-table colors-Wizard
|
Ячейка-заголовок | Похитительский цветовой стиль | |
Ячейка 1-го столбца | colors-Abductor |
Если указан набор классов items-table colors-Abductor
|
Если вас не устраивает цветовая гамма, или вам нужны иные комбинации цветов, обращайтесь к участнику Геврону по удобным вам каналам связи.
Строки и ячейки
Объединение ячеек по строкам
Объединять ячейки можно по строкам с помощью colspan
.
{| class="wikitable" ! colspan="2" | Заголовок 1 |- | Ячейка 1 | Ячейка 2 |}
Заголовок 1 | |
---|---|
Ячейка 1 | Ячейка 2 |
Объединение ячеек по столбцам
Объединять по столбцам — с помощью rowspan
.
{| class="wikitable" ! rowspan="2" | Заголовок 1 ! Заголовок 2 |- | Ячейка 2 |}
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 2 |
Разные цвета строк
{| class="items-table colors-secure" ! width="20%" | Заголовок первого столбца ! Заголовок второго столбца |- | Ячейка первого столбца, второй строки | Ячейка второго столбца, второй строки |- class="colors-suply" | Ячейка первого столбца, третьей строки | Ячейка второго столбца, третьей строки |}
Заголовок первого столбца | Заголовок второго столбца |
---|---|
Ячейка первого столбца, второй строки | Ячейка второго столбца, второй строки |
Ячейка первого столбца, третьей строки | Ячейка второго столбца, третьей строки |
Титульная ячейка
Мы можем задать титульное оформление для ячейки отличной от первой в строке. Для этого используется класс capital
.
{| class="items-table colors-command" ! width="20%" | Заголовок первого столбца ! Заголовок второго столбца |- | Ячейка первого столбца, второй строки | class="capital" | Ячейка второго столбца, второй строки |- | Ячейка первого столбца, третьей строки | Ячейка второго столбца, третьей строки |}
Заголовок первого столбца | Заголовок второго столбца |
---|---|
Ячейка первого столбца, второй строки | Ячейка второго столбца, второй строки |
Ячейка первого столбца, третьей строки | Ячейка второго столбца, третьей строки |
Отключение титульных ячеек
Или наоборот убрать оформление первого столбца используя класс regular
. В этом случае, класс можно указать для всей таблицы.
{| class="items-table colors-lava" style="width:40%;" ! Заголовок первого столбца |- | class="regular"| Ячейка первого столбца, второй строки |- | Ячейка первого столбца, третьей строки |}
Заголовок первого столбца |
---|
Ячейка первого столбца, второй строки |
Ячейка первого столбца, третьей строки |