Wiki12:Таблицы
Ошибка скрипта: Модуля «Shortcut» не существует. Таблица — форма представления информации, облегчающая её визуальное восприятие. Состоит из строк, столбцов и ячеек.
Исходный код
Начальный пример
Элементы
| Код | Функция | Примечания | |
|---|---|---|---|
{| |
Начало кода таблицы | После него можно указать класс таблицы и параметры её оформления (стиль). Пример:{| class="..." style="...; ...; "
| |
|+ |
Заголовок таблицы | Располагается в следующей строчке кода таблицы после его начала. Пример:{|
|+ Название таблицы
Не стоит использовать для этих целей другие элементы, они не обозначают заголовок таблицы в той же мере. Если заголовок не нужен, то размещать его код необязательно. Подробнее здесь. | |
|- |
Разделитель строк |
После него можно указать стиль сразу для всех ячеек, входящих в следующую строку. На приведённом примере стиль применится для ячеек 1-1 и 1-2: | |
! |
Начало ячейки заголовка столбца | Начало первой ячейки в строке заголовков столбцов при горизонтальном расположении кода и начало всех ячеек заголовков при вертикальном расположении кода. Примеры аналогичны примерам элемента | (начало ячейки), только вместо него будет !
Заголовки столбцов оформляются при необходимости. Подробнее здесь. | |
!! |
Разделитель ячеек заголовков столбцов | Используется при горизонтальном оформлении кода. Пример:! Столбец 1 !! Столбец 2 !! Столбец 3
| |
|
|
|
| |
|| |
Разделитель ячеек | Используется при горизонтальном оформлении кода. Пример см. выше. | |
|} |
Окончание кода таблицы | Пример:| Ячейка 1 || Ячейка 2 |} |
Классы
Имеется несколько возможных классов для оформления таблицы: wikitable, standard, wide.
| Заголовок столбца 1 | Заголовок столбца 2 | |
|---|---|---|
| Заголовок строки 1 | Содержимое ячейки 1-1 | Содержимое ячейки 1-2 |
| Заголовок строки 2 | Содержимое ячейки 2-1 | Содержимое ячейки 2-2 |
| Заголовок столбца 1 | Заголовок столбца 2 | |
|---|---|---|
| Заголовок строки 1 | Содержимое ячейки 1-1 | Содержимое ячейки 1-2 |
| Заголовок строки 2 | Содержимое ячейки 2-1 | Содержимое ячейки 2-2 |
| Заголовок столбца 1 | Заголовок столбца 2 | |
|---|---|---|
| Заголовок строки 1 | Содержимое ячейки 1-1 | Содержимое ячейки 1-2 |
| Заголовок строки 2 | Содержимое ячейки 2-1 | Содержимое ячейки 2-2 |
Вертикальное и горизонтальное оформление
Оформление кода разное, результат одинаковый:
{| class="wikitable"
! Столбец 1
! Столбец 2
! Столбец 3
|-
| Ячейка 1-1
| Ячейка 1-2
| Ячейка 1-3
|-
| Ячейка 2-1
| Ячейка 2-2
| Ячейка 2-3
|}
|
{| class="wikitable"
! Столбец 1 || Столбец 2 || Столбец 3
|-
| Ячейка 1-1 || Ячейка 1-2 || Ячейка 1-3
|-
| Ячейка 2-1 || Ячейка 2-2 || Ячейка 2-3
|}
|
|
Пример таблицы с описанием параметров
Образец таблицы с использованием класса wikitable:
Шаблон:Demo
Аналогичная по оформлению таблица без класса wikitable:
Шаблон:Demo
Описание параметров
В заголовке кода таблицы:
background: var(--background-color-neutral-subtle, #f8f9fa);— цвет фона ячеек.border: 1px solid var(--border-color-base, #a2a9b1);— граница вокруг таблицы толщиной 1 пиксель в виде непрерывной линии и цветом #a2a9b1.border-collapse: collapse;— одна общая граница между ячейками.margin-top: 1.0em; margin-bottom:1.0em;— отступы от таблицы сверху и снизу (поля).
Для отдельных ячеек:
border-bottom: 1px solid var(--border-color-base, #a2a9b1);— нижняя граница заголовков 1 и 2 (аналогично для ячеек 1-2).background: var(--background-color-neutral, #eaecf0);— цвет фона заголовков 1 и 2.border-right: 1px solid var(--border-color-base, #a2a9b1);— правая граница заголовка 1, общая с заголовком 2 (аналогично для ячеек 1, 3).padding: 0.2em 0.4em 0.2em 0.4em;— отступы от верхней, правой, нижней и левой границы заголовка 1 (аналогично для всех остальных ячеек).
Избегайте собственноручной стилизации таблиц по возможности.
Заголовки
Заголовок таблицы
Заголовки столбцов
Заголовки строк
Таблица с сортировкой данных в столбце
Выравнивание
Выравнивание содержимого по горизонтали
Можно указать выравнивание влево, вправо и по центру отдельных ячеек, целых строк и таблицы в целом: Шаблон:Demo Шаблон:Demo Шаблон:Demo
Указать выравнивание для отдельных целых столбцов подобным образом нельзя, но существуют шаблоны Шаблон:Tlx и Шаблон:Tlx, упрощающие создание таблиц с разным выравниванием по горизонтали в разных столбцах.
Выравнивание содержимого по вертикали
Выравнивание таблицы и её обтекание
Примечание: параметр clear в заголовке кода таблицы запрещает ей обтекать изображения и другие таблицы. Во многих случаях в нём нет необходимости (можно убрать).
| Слева без обтекания |
|---|
{| class="wikitable" style="clear:left;"
|-
| Текст ячейки
|}
|
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
| Слева с обтеканием |
|---|
{| class="wikitable" style="float:left; margin-right:0.8em; clear:left;"
|-
| Текст ячейки
|}
|
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
| Справа без обтекания |
|---|
{| class="wikitable" style="float:right; clear:right;"
|-
| Текст ячейки
|}<div style="clear:both;"></div>
|
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
| Справа с обтеканием |
|---|
{| class="wikitable" style="float:right; margin-left:0.8em; clear:right;"
|-
| Текст ячейки
|}
|
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
| Посередине без обтекания |
|---|
{| class="wikitable" style="margin:auto; clear:both;"
|-
| Текст ячейки
|}
|
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Несколько таблиц рядом
Слева
| Таблица 1 |
| Таблица 2 |
| Таблица 2 |
| Таблица 3 |
| Таблица 3 |
| Таблица 3 |
Шаблон:Clear
Примечание: чтобы добавить обтекание группы таблиц текстом, необходимо в конце последней таблицы удалить Шаблон:Lang-ref и добавить к ней отступ как у первых двух таблиц (margin-right:1.4em;).
{| class="wikitable" style="float:left; margin-right:1.4em; clear:left;"
|-
| Таблица 1
|}
{| class="wikitable" style="float:left; margin-right:1.4em;"
|-
| Таблица 2
|-
| Таблица 2
|}
{| class="wikitable" style="float:left;"
|-
| Таблица 3
|-
| Таблица 3
|-
| Таблица 3
|}
{{clear}}
Шаблон:^ Справа
Исходный код в целом соответствует примеру выше, только необходимо поменять float:left на float:right, margin-right на margin-left и clear:left на clear:right.
Списки в таблице
Маркированный или нумерованный список начинается с новой строчки кода: Шаблон:Demo
Объединение ячеек
Горизонтальное (объединение столбцов) Шаблон:Demo
Вертикальное (объединение строк) Шаблон:Demo
Одновременное (объединение как строк, так и столбцов) Шаблон:Demo
Цвета
Для задания цвета используется атрибут style, с помощью которого можно задавать цвет как текста (style=color:#RRGGBB;), так и фона (style=background-color:#RRGGBB;), где #RRGGBB — шестнадцатеричный код цвета. Вместо шестнадцатеричной кодировки можно использовать названия цветов.
Шаблон:См. также
Цвет фона
Меняя расположение атрибута style, можно задавать цвет фона как отдельных ячеек, так и целых строк. Шаблон:Demo Шаблон:Demo
Можно поменять цвет фона и таблицы в целом, разместив атрибут style в её шапке. Однако при этом заголовок сохраняет стандартный фон. Шаблон:Demo
Цвет текста
Можно задавать цвет текста как для отдельных ячеек, так и для целых строк. Шаблон:Demo Шаблон:Demo
Можно задавать цвет текста для всей таблицы, разместив атрибут style в её шапке. Шаблон:Demo
Можно задавать цвет отдельных слов в ячейке. Шаблон:Demo
Примечание: этот метод годится и тогда, когда текст не размещён в таблице. Шаблон:Demo
Размер шрифта
Шаблон:См. также
Размер шрифта следует задавать в процентах от нормального. (Технически возможно, но нежелательно задавать его в следующих единицах: em, ex, pt, px.) Размер шрифта не должен быть меньше 85 %. Примечание: при указании единицы измерения, включая проценты, пробел между ней и числом недопустим (95%).
Без изменения размера:
{| class="wikitable"
| Столбец | Столбец |
|---|---|
| Текст ячейки | Текст ячейки |
| Текст ячейки | Текст ячейки |
С размером шрифта 85 % во всех ячейках таблицы:
{| class="wikitable" style="font-size:85%;"
| Столбец | Столбец |
|---|---|
| Текст ячейки | Текст ячейки |
| Текст ячейки | Текст ячейки |
Отдельных ячеек: Шаблон:Demo
Границы ячеек
Если этот параметр указан в заголовке кода таблицы, то он применится только к одной внешней границе таблицы. Для установки границ между ячейками, его необходимо прописывать для каждой ячейки.
Шаблон:^ Скрытие отдельных границ между ячейками Шаблон:Demo
Ширина таблицы и столбцов
Указывается в %, em. Не следует указывать в px. Шаблон:Demo
Виды таблиц
Стандартная
|
{| class="wikitable"
|-
! Столбец 1 || Столбец 2
|-
| Ячейка 1-1 || Ячейка 1-2
|-
| Ячейка 2-1 || Ячейка 2-2
|}
|
Сортируемая
У такой таблицы заголовки столбцов обязательны. Полную документацию см. в m:Help:Sorting.
| Алфавит | Числа | С указанием ключа сортировки | Несортируемый столбец |
|---|---|---|---|
| А | 2 млрд | 2 млрд | A |
| Б | 3 | 3 | B |
| В | 4 тыс. | 4 тыс. | C |
| Г | 1 млн | 1 млн | D |
| Итог | 2 001 004 003 | 2 001 004 003 | — |
{| class="wikitable sortable"
|-
! Алфавит !! Числа !! С указанием ключа сортировки !! class="unsortable" | Несортируемый столбец
|-
| А || 2 млрд || data-sort-value="2000000000" | 2 млрд || A
|-
| Б || 3 || 3 || B
|-
| В || 4 тыс. || data-sort-value="4000" | 4 тыс. || C
|-
| Г || 1 млн || data-sort-value="1000000" | 1 млн || D
|- <!-- ЭТО НЕСОРТИРУЕМАЯ СТРОКА -->
! Итог !! 2 001 004 003 !! 2 001 004 003 !! —
|}
Для правильной сортировки по столбцу с числами можно добавить в заголовок столбца data-sort-type="number", получится ! data-sort-type="number" | Заголовок.
Сворачиваемая
У такой таблицы заголовки столбцов обязательны.
Изначально развёрнутая
class="wikitable mw-collapsible"
| Столбец | Столбец |
|---|---|
| ячейка | ячейка |
| ячейка | ячейка |
Изначально свёрнутая
class="wikitable mw-collapsible mw-collapsed"
| Столбец | Столбец |
|---|---|
| ячейка | ячейка |
| ячейка | ячейка |
Примеры их комбинации
| Алфавит | Числа | С указанием ключа сортировки | Несортируемый столбец |
|---|---|---|---|
| А | 2 млрд | 2 млрд | A |
| Б | 3 | 3 | B |
| В | 4 тыс. | 4 тыс. | C |
| Г | 1 млн | 1 млн | D |
| Итог | 2 001 004 003 | 2 001 004 003 | — |
{| class="wikitable sortable mw-collapsible mw-collapsed" style="font-size:85%; width:75%;"
|+ Название таблицы
...
См. также
- Справка по редактированию таблиц на MediaWiki
- Википедия:Колонки
- Шаблоны ячеек таблицы
- Шаблон [[{{#if:|{{{2}}}#{{{lang}}}|{{{2}}}#Шаблон:Lang-float right}}|{{#if:|{{{{{sc}}}|{{{2}}}}}|{{{2}}}}}]] {{#ifeq:float right|{{#switch:float right|nan=zh-min-nan|yue=zh-yue|cmn=zh|float right}}||[[:{{#switch:float right|nan=zh-min-nan|yue=zh-yue|cmn=zh|float right}}:{{{2}}}|(float right)]]}}{{#switch:|f|m|mf|n|c|nm= {{{{{3}}}}}|p|pl= Шаблон:Мн}}{{#switch:|s|p= {{{{{4}}}}}|}}{{#if:| ({{{tr}}})}}
- Шаблоны Шаблон:Lang-ref и Шаблон:Lang-ref для автоматической нумерации и сортировки строк таблицы
- Шаблон [[{{#if:|{{{2}}}#{{{lang}}}|{{{2}}}#Шаблон:Lang-Плавающая шапка таблицы}}|{{#if:|{{{{{sc}}}|{{{2}}}}}|{{{2}}}}}]] {{#ifeq:Плавающая шапка таблицы|{{#switch:Плавающая шапка таблицы|nan=zh-min-nan|yue=zh-yue|cmn=zh|Плавающая шапка таблицы}}||[[:{{#switch:Плавающая шапка таблицы|nan=zh-min-nan|yue=zh-yue|cmn=zh|Плавающая шапка таблицы}}:{{{2}}}|(Плавающая шапка таблицы)]]}}{{#switch:|f|m|mf|n|c|nm= {{{{{3}}}}}|p|pl= Шаблон:Мн}}{{#switch:|s|p= {{{{{4}}}}}|}}{{#if:| ({{{tr}}})}}
- Шаблон Шаблон:Lang-ref