Elite Dangerous Wiki
Advertisement
Elite Dangerous Wiki
3225
страниц

Основные принципы создания таблиц приведён здесь:

Все классы оформления таблиц описаны в CSS

При создании таблицы и применения классов оформления не забывайте про то, что существует светлая и тёмная темы оформления wiki — всегда проверяйте как работает в той, и в другой теме.

Стили оформления таблиц

Простая таблица без форматирования

{| 
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4
|-
|+ Заголовок таблицы
|-
! <span title="Всплывающее сообщение" style="cursor:help;">Хар-ка 5</span> !! Хар-ка 6
! class="unsortable" | Хар-ка 7<ref name="Сноска 4"/>
! data-sort-type="number" | Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7[1] Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

wikitable

Простая таблица class="wikitable"

{| class="wikitable"
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4
|-
|+ Заголовок таблицы
|-
! <span title="Всплывающее сообщение" style="cursor:help;">Хар-ка 5</span> !! Хар-ка 6
! class="unsortable" | Хар-ка 7<ref name="Сноска 4"/>
! data-sort-type="number" | Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7[1] Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

eStationTable

Пример таблицы class="eStationTable":

{| class="eStationTable" style="font-size: 0.95m"
|-
|+ Заголовок таблицы
|-
! class="eStationTable-header" | Хар-ка 1
! class="eStationTable-header" | Хар-ка 2
! class="eStationTable-header" | Хар-ка 3
|-
| 2E || 2.50 || 46
|-
| 2D || 1.00 || 41
|-
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3
2E 2.50 46
2D 1.00 41

dataAdminTable

dataAdminTable без сортировки (в работе)

Пример таблицы характеристик без сортировки (простая):

{| class="dataAdminTable" style="font-size: 0.95m"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4 !! Хар-ка 5 !! Хар-ка 6 !! Хар-ка 7 !! Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7 Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

dataAdminTable с сортировкой

Пример таблицы характеристик с сортировкой:

{| class="dataAdminTable sortable" style="font-size: 0.95m"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4
! <span title="Всплывающее сообщение" style="cursor:help;">Хар-ка 5</span> !! Хар-ка 6
! class="unsortable" | Хар-ка 7<ref name="Сноска 4">Сноска 4</ref>
! data-sort-type="number" | Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7[1] Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

Таблица характеристик с сортировкой, сворачиваемая

Вариант таблицы с сортировкой, сворачиваемый, по умолчанию развёрнут:

{| class="dataAdminTable sortable mw-collapsible" style="font-size: 90%"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4
! <span title="Всплывающее сообщение" style="cursor:help;">Хар-ка 5</span> !! Хар-ка 6
! class="unsortable" | Хар-ка 7<ref name="Сноска 4"/>
! data-sort-type="number" | Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7[1] Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

Если необходимо сделать свёрнутую таблицу, то необходимо указать параметр mw-collapsed.
Для развёрнутой таблицы необходимо указать параметр mw-uncollapsed.


EliteStyleTable

Это упрощённый класс таблиц, сделанный на базе dataAdminTable.

EliteStyleTable без сортировки

Пример таблицы характеристик без сортировки (простая):

{| class="EliteStyleTable"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4 !! Хар-ка 5 !! Хар-ка 6 !! Хар-ка 7 !! Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || 222 || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || 333 || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || 444 || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || 555 || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7 Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 222 1 980
2D 1.00 41 7.20 0.75 5.40 333 5 930
2C 1.30 51 8.00 0.50 5.00 444 17 800
2B 2.00 61 8.80 0.45 3.96 555 53 410

EliteStyleTable с сортировкой

Пример таблицы EliteStyleTable с сортировкой:

{| class="EliteStyleTable sortable"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1 !! Хар-ка 2 !! Хар-ка 3 !! Хар-ка 4
! <span title="Всплывающее сообщение" style="cursor:help;">Хар-ка 5</span> !! Хар-ка 6
! class="unsortable" | Хар-ка 7<ref name="Сноска 4">Сноска 4</ref>
! data-sort-type="number" | Хар-ка 8
|-
| 2E || 2.50 || 46 || 6.40 || 1.00 || 6.40 || Найти || 1 980
|-
| 2D || 1.00 || 41 || 7.20 || 0.75 || 5.40 || Найти || 5 930
|-
| 2C || 1.30 || 51 || 8.00 || 0.50 || 5.00 || Найти || 17 800
|-
| 2B || 2.00 || 61 || 8.80 || 0.45 || 3.96 || Найти || 53 410
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4 Хар-ка 5 Хар-ка 6 Хар-ка 7[1] Хар-ка 8
2E 2.50 46 6.40 1.00 6.40 Найти 1 980
2D 1.00 41 7.20 0.75 5.40 Найти 5 930
2C 1.30 51 8.00 0.50 5.00 Найти 17 800
2B 2.00 61 8.80 0.45 3.96 Найти 53 410

EliteStyleTable простой перечень

Пример таблицы EliteStyleTable с простым перечнем:

{| class="EliteStyleTable sortable"
|-
|+ Заголовок таблицы
|-
! Объект
! Характеристика или описание объекта
|-
| style="text-align:left" | Наименование_1
| описание_объекта_1
|-
| style="text-align:left" | Наименование_2
| описание_объекта_2
|-
| style="text-align:left" | Наименование_3
| описание_объекта_3
|}
Заголовок таблицы
Объект Характеристика или описание объекта
Наименование_1 описание_объекта_1
Наименование_2 описание_объекта_2
Наименование_3 описание_объекта_3

EliteStyleTable с вертикальным текстом

Таблица класса EliteStyleTable без сортировки с вертикальным текстом

{| class="EliteStyleTable" style="width: 100%; border:none;"
|+ Заголовок таблицы
|-
! scope="row" style="width: 40%;" | Наименование строк
! scope="col" | <span class="rotated-text"><span class="rotated-text__inner">Вертикальный текст 1</span></span>
! scope="col" | <span class="rotated-text"><span class="rotated-text__inner">Вертикальный текст 2</span></span>
! scope="col" | <span class="rotated-text"><span class="rotated-text__inner">Вертикальный текст 3</span></span>
! scope="col" | <span class="rotated-text"><span class="rotated-text__inner">Вертикальный текст 4</span></span>
|-
! scope="row" style="text-align:left" | Наименование_1
| style="text-align:center;" | <span style="color: red; ">🛇</span>
| style="text-align:center;" | <span style="color: green; ">✔</span>
| style="text-align:center;" | <span style="color: red; ">🛇</span>
| style="text-align:center;" | <span style="color: grey; ">н/д</span>
|-
! scope="row" style="text-align:left" | Наименование_2
| style="text-align:center;" | <span style="color: green; ">✔</span>
| style="text-align:center;" | <span style="color: grey; ">н/д</span>
| style="text-align:center;" | <span style="color: green; ">✔</span>
| style="text-align:center;" | <span style="color: grey; ">н/д</span>
|}

Приведёт вот к такому виду:

Заголовок таблицы
Наименование строк Вертикальный текст 1 Вертикальный текст 2 Вертикальный текст 3 Вертикальный текст 4
Наименование_1 🛇 🛇 н/д
Наименование_2 н/д н/д

Таблица class="description-table"

Пример таблицы class="description-table":

{| class="description-table" style="font-size: 0.95m"
|-
|+ Заголовок таблицы
|-
! class="description-table-header" | Хар-ка 1
! class="description-table-header" | Хар-ка 2
! class="description-table-header" | Хар-ка 3
|-
| 2E || 2.50 || 46
|-
| 2D || 1.00 || 41
|-
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4
2E 2.50 46 111
2D 1.00 41 222

ModificationTable

Пример таблицы class="ModificationTable":

{| class="ModificationTable"
|-
|+ Заголовок таблицы
|-
! Хар-ка 1
! Хар-ка 2
! Хар-ка 3
|-
| 2E || 2.50 || 46
|-
| 2D || 1.00 || 41
|}

Приведёт вот к такому виду:

Заголовок таблицы
Хар-ка 1 Хар-ка 2 Хар-ка 3
2E 2.50 46
2D 1.00 41

SpecificationTable

SpecificationTable без сортировки

Пример таблицы class="SpecificationTable" без сортировки:

{| class="SpecificationTable"
! style="text-align: center;" | Вид характеристики
! style="text-align: center; width: 15%;" | Хар-ка 1
! style="text-align: center; width: 15%;" | Хар-ка 2
! style="text-align: center; width: 15%;" | Хар-ка 3
! style="text-align: center; width: 15%;" | Хар-ка 4
|-
| style="text-align: left;" | Вид характеристики 1 || Данные 1-1 || Данные 1-2 || Данные 1-3 || Данные 1-4
|-
| style="text-align: left;" | Вид характеристики 2 || Данные 2-1 || Данные 2-2 || Данные 2-3 || Данные 2-4
|-
| style="text-align: left;" | Вид характеристики 3 || Данные 3-1 || Данные 3-2 || Данные 3-3 || Данные 3-4
|}

Приведёт вот к такому виду:

Заголовок таблицы
Вид характеристики Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4
Вид характеристики 1 Данные 1-1 Данные 1-2 Данные 1-3 Данные 1-4
Вид характеристики 2 Данные 2-1 Данные 2-2 Данные 2-3 Данные 2-4
Вид характеристики 3 Данные 3-1 Данные 3-2 Данные 3-3 Данные 3-4

SpecificationTable с сортировкой

Пример таблицы class="SpecificationTable" с сортировкой:

{| class="SpecificationTable sortable"
! style="text-align: center;" | Вид характеристики
! style="text-align: center; width: 15%;" | Хар-ка 1
! style="text-align: center; width: 15%;" | Хар-ка 2
! style="text-align: center; width: 15%;" | Хар-ка 3
! style="text-align: center; width: 15%;" | Хар-ка 4
|-
| style="text-align: left;" | Вид характеристики 1 || Данные 1-1 || Данные 1-2 || Данные 1-3 || Данные 1-4
|-
| style="text-align: left;" | Вид характеристики 2 || Данные 2-1 || Данные 2-2 || Данные 2-3 || Данные 2-4
|-
| style="text-align: left;" | Вид характеристики 3 || Данные 3-1 || Данные 3-2 || Данные 3-3 || Данные 3-4
|}

Приведёт вот к такому виду:

Заголовок таблицы
Вид характеристики Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4
Вид характеристики 1 Данные 1-1 Данные 1-2 Данные 1-3 Данные 1-4
Вид характеристики 2 Данные 2-1 Данные 2-2 Данные 2-3 Данные 2-4
Вид характеристики 3 Данные 3-1 Данные 3-2 Данные 3-3 Данные 3-4

SpecificationTable с сортировкой, сворачиваемая

Вариант таблицы class="SpecificationTable" с сортировкой, сворачиваемый, по умолчанию развёрнут:

{| class="SpecificationTable sortable mw-collapsible" style="width: 100%; border:none;"
|-
|+ Заголовок таблицы
|-
! Вид характеристики
! style="width: 15%;" | Хар-ка 1
! style="width: 15%;" | Хар-ка 2
! style="width: 15%;" | Хар-ка 3
! style="width: 15%;" | Хар-ка 4
|-
| style="text-align: left;" | Вид характеристики 1 || Данные 1-1 || Данные 1-2 || Данные 1-3 || Данные 1-4
|-
| style="text-align: left;" | Вид характеристики 2 || Данные 2-1 || Данные 2-2 || Данные 2-3 || Данные 2-4
|-
| style="text-align: left;" | Вид характеристики 3 || Данные 3-1 || Данные 3-2 || Данные 3-3 || Данные 3-4
|}

Приведёт вот к такому виду:

Заголовок таблицы
Вид характеристики Хар-ка 1 Хар-ка 2 Хар-ка 3 Хар-ка 4
Вид характеристики 1 Данные 1-1 Данные 1-2 Данные 1-3 Данные 1-4
Вид характеристики 2 Данные 2-1 Данные 2-2 Данные 2-3 Данные 2-4
Вид характеристики 3 Данные 3-1 Данные 3-2 Данные 3-3 Данные 3-4


Примечания

  1. 1,0 1,1 1,2 1,3 1,4 Сноска 4
Advertisement