Помощь:Таблица/Дополнительно

Эта страница справки представляет собой практическое руководство . Он объясняет концепции или процессы, используемые сообществом Википедии. Он не является политикой или руководством Википедии и может отражать различные уровни консенсуса .

Таблицы можно использовать в качестве инструмента форматирования, но вместо этого рассмотрите возможность использования многоколоночного списка .

По умолчанию текст выравнивается по левому краю ячеек данных.

По умолчанию текст выравнивается по центру ячеек заголовка.

Все вышесказанное справедливо как для настольных компьютеров, так и для мобильных устройств.

Выравнивание текста заголовка в таблицах class=wikitableостается по центру независимо от глобального выравнивания текста по правому или левому краю с помощью style=text-align:VALUEвики-текста в верхней строке таблицы.

Выравнивание текста заголовка в таблицах без class=wikitable следует глобальному выравниванию текста таблицы.

Выравнивание текста, заданное в отдельных ячейках, переопределяет все остальное.

Примечание: Информацию о вертикальном выравнивании текста см. в разделе: Справка:Таблица#Вертикальное выравнивание в ячейках .

Если в верхней строке вики-текста таблицы не установлено глобальное выравнивание текста, то весь текст выравнивается по левому краю, за исключением ячеек заголовков, которые по умолчанию выравниваются по центру.

Только в таблицах class=wikitableтекст ячейки заголовка не следует глобальному выравниванию текста, установленному в верхней строке вики-текста таблицы.

При использовании class=wikitableзаголовка текст теперь остается по центру как в десктопном, так и в мобильном представлении, если специально не изменено для каждой ячейки заголовка. Это справедливо везде, где расположена строка заголовка (сверху, снизу, посередине). Глобальное выравнивание текста для ячеек без заголовка выполняется путем помещения style=text-align:VALUEв верхнюю строку таблицы wikitext. См. пример в следующем разделе.

В обеих таблицах ниже используется class=wikitableвыравнивание текста и данных во всех ячейках (кроме ячеек заголовков) по правому краю. Таблица справа также выравнивает текст и данные во всех ячейках (кроме ячеек заголовков).

Если большинство столбцов состоят из ячеек данных, то вы можете выбрать выравнивание данных по правому краю. Это легко.
Просто добавьте style=text-align:rightв верхнюю строку викитекста для таблицы:

{| class=wikitable style=text-align:right

или

{| class="wikitable sortable" style=text-align:right

и так далее.

Нет простого способа выровнять столбец чисел так, чтобы десятичные точки совпадали. Смотрите несколько способов ниже.

Один из способов выровнять столбцы чисел по десятичной точке — использовать два столбца, первый из которых выровнен по правому краю, а второй — по левому.

{| style = "border-collapse: collapse;" | style = "text-align: right;" | 432 || .1 |- | style = "text-align: right;" | 43 || .21 |- | style = "text-align: right;" | 4 || .321 |}       

Если столбец чисел отображается в таблице с отступами или границами ячеек, вы все равно можете выровнять десятичные точки без некрасивого зазора посередине, принудительно убрав границу и отступ между этими двумя столбцами.

{| class = wikitable ! colspan = 2 | Заголовок |- | style = "text-align:right; border-right:none; padding-right:0;" | 432 | style = "text-align:left; border-left: none; padding-left: 0;" | .1 |- | style = "text-align:right; border-right:none; padding-right:0;" | 43 | style = "text-align:left; border-left: none; padding-left: 0;" | .21 |- | style = "text-align:right; border-right:none; padding-right:0;" | 4 | style = "text-align:left; border-left: none; padding-left: 0;" | .321 |}             

Или в качестве альтернативы можно использовать шаблон {{ decimal cell }} :

{| class = wikitable ! colspan = 2 | Заголовок |- | {{ десятичная ячейка | 432.1 }} |- | {{ десятичная ячейка | 43.21 }} |- | {{ десятичная ячейка | 4.321 }} |}      

Использование двух столбцов имеет тот недостаток, что поиск на веб-странице (с помощью браузера или поисковой системы) обычно не позволяет найти текст, выходящий за границу столбца.

Кроме того, если в таблице есть интервал между ячейками (и, следовательно border-collapse=separate, ), то есть ячейки имеют отдельные границы с зазором между ними, этот зазор все равно будет виден.

Более грубый способ выравнивания столбцов чисел — использовать цифровое пространство   or   , которое по идее должно быть равно ширине цифры, хотя на практике это зависит от шрифта:

{|| 432.1|-|   43.21|-|    4.321|}

Другие сопутствующие символы в этой строке: пробел (  ) для замены точки или запятой, −вместо легкодоступного на клавиатуре пишущей машинки дефиса-тире – он такой же ширины, как и знак плюс, а также цифровое тире , возможно, самое полезное для телефонных номеров, которое вы, очевидно, не найдете в Википедии.

При использовании шрифтов OpenType можно также чередовать и – это особенно заметно в кернинге арабской цифры ⟨1⟩. В стандартном браузере шрифты без засечек ⟨1⟩ занимают ту же ширину, что и другие цифры, т. е. работают так, как будто были включены.font-variant-numeric:tabular-numsfont-variant-numeric:proportional-numsfont-variant-numerals:tabular-nums

Некоторые могут посчитать {{ 0 }} полезным для выравнивания.

В крайнем случае, при использовании предварительно отформатированного текста, вы можете вообще отказаться от функции таблицы и просто начинать строки с пробела, а также использовать пробелы для позиционирования цифр. Однако должна быть веская причина для использования предварительно отформатированного текста в статье:

432.1 43.21 4.321

432.1 43.21 4.321

{{ Table altitude }} можно использовать для выравнивания ячеек в целом столбце без добавления кода в каждую ячейку. Например, выравнивание по левому краю первого столбца и выравнивание по центру четвертого столбца. И выравнивание по умолчанию всех остальных ячеек по правому краю:

{{ Выравнивание таблицы }} {| class = "wikitable sortable col1left col4center defaultright" 

Поместите его {{Table alignment}}непосредственно перед столом, а затем добавьте несколько классов к столу.

Классы " col " никогда не влияют на ячейки заголовков.

Классы " default " также влияют на ячейки заголовка, если класс wikitable не используется. С классом wikitable содержимое ячейки заголовка всегда центрируется, если не настроено индивидуально.

Дополнительную информацию, ограничения и примеры см. в шаблоне.

Шаблон:Выравнивание таблицы (см. предыдущий раздел) не будет работать на столбцах заголовков строк. Есть некоторые другие ограничения, перечисленные в Шаблон:Выравнивание таблицы . В этих случаях вы можете попробовать следующий метод только для первого столбца.

Это можно сделать в редакторе исходного викитекста. В настройках редактирования отметьте галочкой пункт: "включить панель инструментов редактирования. Иногда ее называют 'редактор викитекста 2010'".

В разделе таблицы нажмите «редактировать источник» (редактирование викитекста). Нажмите «Дополнительно» на панели инструментов редактирования. Затем нажмите значок «поиск и замена» справа. Во всплывающей форме отметьте галочкой пункт «Обрабатывать строку поиска как регулярное выражение».

Заполните поле «Найти» значением (\|-\n\|)
Заполните поле «Заменить на» значением

$1style=text-align:left|

Затем нажмите «Заменить все». Весь текст в первом столбце будет выровнен по левому краю своих ячеек.

Если по какой-то причине эти ячейки являются ячейками заголовков, то заполните поле «Искать» следующими данными:

(\|-\n\!)

Обратите внимание на восклицательный знак для ячейки заголовка. Заполните поле «заменить на»

$1style=text-align:left|

Затем нажмите «Заменить все».

Примечание: см. также эту версию Together Again (песня Джанет Джексон)#Charts . Она использует {{ col-begin }} , {{ col-2 }} , {{ col-end }} .

Вы можете разместить две или более таблиц рядом друг с другом. Но таблицы должны быть перенесены (одна под другой) на узких экранах, если вы хотите избежать горизонтальной прокрутки. Уменьшите окно браузера, чтобы увидеть перенесенные таблицы ниже. Это работает и в мобильном представлении. Нажмите «мобильное представление» внизу любой страницы Википедии. Эти таблицы являются адаптированными отрывками из версий мужской национальной сборной Исландии по гандболу . Во многих спортивных статьях таблицы располагаются рядом.

Ниже приведен соответствующий викитекст. Дополнительная информация здесь. Слепой редактор, использующий программу чтения с экрана, говорит, что этот метод приемлем.

< div style = display:inline-grid > --Стол--</ div > < div style = display:inline-grid > --Стол--</ див >

Кодовое поле ниже было создано путем добавления того же div вокруг всего блока syntaxhightlight:

< div style = display:inline-grid > --Стол--</ div > < div style = display:inline-grid > --Стол--</ див >

Обратите внимание, что пробел между таблицами гандбола выше появляется из-за того, что </div> находится на отдельной строке. Если вы не хотите пробела, используйте это:

</div><div style=display:inline-grid>

style=display:inline-gridнельзя добавить в викитекст таблицы. Его нужно добавить за пределами викитекста таблицы. Это связано с тем, что подписи таблиц не будут правильно размещены в портретном режиме мобильных устройств или на других узких мобильных экранах, когда таблицы переносятся. Это особенно заметно, если подписи длиннее. В этом случае, когда одна таблица опускается ниже другой, подписи будут сильно переноситься только над первым столбцом таблицы.

Вы также можете добавлять изображения в микс. Добавьте, vertical-align:top;чтобы выровнять элемент по верху. Смотрите свойство CSS vertical-align для других параметров. Таблицы и изображения будут переноситься в зависимости от ширины экрана. Уменьшите окно браузера, чтобы увидеть. Например:

• <div style="display:inline-grid; vertical-align:top;">

Добавить vertical-align:bottom;для выравнивания элемента по нижнему краю. Вы можете выбрать выравнивание для каждого элемента. Обратите внимание на звезду, выровненную по нижнему краю.

Вы можете добавить отступ , добавив стиль полей к первому div:

• <div style="display:inline-grid; vertical-align:top; margin-left:4em;">

Таблицы ниже лучше переносить с помощью display:inline-table; вместо display:inline-grid;

Преобразовать список/таблицу США в карту данных по штатам. С примерами и пошаговыми инструкциями. Пример:

Простая карта ниже с использованием другого метода. См. страницу обсуждения для информации.

Таблицы и изображения также можно перемещать вправо, добавив float:right;

См. пример справа от этой версии Списка штатов и территорий США по уровню тюремного заключения и исправительного надзора .

< div style = "display:inline-table; vertical-align:top; float:right;" >  [[ Файл : Показатели тюремного заключения женщин по странам и штатам США.gif | thumb | none | upright = 0,5 | Показатели тюремного заключения женщин по странам и штатам США. ]] </ div > < div style = "display:inline-table; vertical-align:top; float:right;" >  [[ Файл : Показатели тюремного заключения в мире, если бы каждый штат США был страной.png | thumb | none | upright = 0,5 | Показатели тюремного заключения в мире по странам и штатам США. ]] </ div >

Целую таблицу можно поместить в прокручиваемый div, чтобы новые строки таблицы появлялись на экране по мере исчезновения старых. См. MOS:SCROLL и Help:Scrolling list , а также обсуждение этой статьи .

< div style = "height:7em; overflow:auto; border:2px solid red;" > {| class = wikitable |- | abc || def || ghi |- style = "height: 100px;" | jkl || style = "width: 100px;" | mno || pqr |- | stu || vwx || yz |} </ div >     

Добавление -xк overflow:auto→ overflow-x:autoзаставляет переполненные данные таблицы вписываться в границы ширины страницы или иную предопределенную разметку вики.

< div style = "width:12em; overflow-x:auto; border:2px solid lime;" > {| class = wikitable style = "width:25em" |- | abc || def || ghi |- | jkl || style = "height: 70px;" | mno || pqr |- | stu || vwx || yz |} </ div >      

История: Смотрите последние обсуждения Village Pump . И другие архивные обсуждения: 1. 2. 3. 4. 5. Смотрите Phab:T42763. Смотрите также: Мета: Опрос по списку желаний сообщества 2022/Чтение/плавающие заголовки таблиц и мета: Опрос по списку желаний сообщества 2021/Чтение/Включить липкие заголовки таблиц.

Прокручиваемая таблица в смысле вертикальной полосы прокрутки для всей страницы. При прокрутке страницы заголовки таблицы остаются видимыми, когда таблица выходит за пределы верхней части экрана.

Примеры, дополнительную информацию и особые случаи см. в разделе Шаблон:Прикрепленный заголовок.

См. список статей, включающих трансляции {{sticky header}}. См. количество трансляций.

Примечание: Закрепленные заголовки строк слева работают некорректно, если таблица находится внутри сворачиваемого поля отображения/скрытия . См. пример. (Раздел «Таблица Timeshifter»)

См.: Template:Sticky table start . Он включает в себя старый Covid CSS, и его проще использовать. См. Special:WhatLinksHere/Template:Sticky table start для примеров.

Существует несколько расширенных прокручиваемых таблиц (с заголовками строк и столбцов, которые остаются видимыми и закрепленными во время прокрутки) в пандемии COVID-19 по странам и территориям и в смертности от пандемии COVID-19 . Прокручиваемые и закрепленные заголовки работают и на мобильных телефонах. Самые широкие прокручиваемые таблицы находятся вверху списка ниже. Сузьте окно браузера, пока не увидите горизонтальную полосу прокрутки. Перетащите его влево и вправо, чтобы увидеть закрепленные заголовки строк, которые остаются видимыми.

• Шаблон:Ежемесячное совокупное количество смертей от COVID-19 в 2020 году по странам
• Шаблон:2021 2-я половина. Ежемесячное совокупное количество смертей от COVID-19 по странам
• Шаблон:Первая половина 2022 г. Ежемесячное совокупное количество смертей от COVID-19 по странам

Абсолютно слепой пользователь программы чтения с экрана отметил в обсуждении здесь , что прокручиваемые таблицы в соответствующей статье ( Смерти от пандемии COVID-19 ) не были проблемой.

Эти две прокручиваемые таблицы с закрепленными заголовками строк/столбцов также обновляются автоматически:

• Шаблон:Смертность от пандемии COVID-19
• Шаблон:Данные о вакцинации от COVID-19

Видеть:

• Шаблон обсуждения: Показатели смертности от пандемии COVID-19#Автоматизация обновлений .
• Обсуждение шаблона:Данные о вакцинации от COVID-19#Автоматизация обновлений этого шаблона .

Подробнее о том, как сделать сортируемые таблицы, см. в разделе Help:Sortable tables . Таблицы можно сделать сортируемыми, добавив class="wikitable sortable"в верхнюю строку таблицы wikitext. Затем отдельные столбцы можно исключить из сортировки с помощью class=unsortableв самой нижней ячейке заголовка. Примечание : это должно быть в ячейке заголовка со значком сортировки. Это будет самая нижняя ячейка заголовка. (См. Help:Sortable tables § Принудительное присвоение столбцу определенного типа данных ).data-sort-type=VALUE

Классы также можно использовать для сворачивания таблиц, поэтому они скрыты по умолчанию. Используйте класс, mw-collapsibleчтобы включить сворачивание. Сворачиваемые таблицы также можно сортировать, включив sortableкласс ( см. § Сортируемые таблицы ). По умолчанию сворачиваемая таблица начинает разворачиваться. Чтобы изменить это, добавьте дополнительный класс . В качестве альтернативы вы можете добавить , вместо , что автоматически свернёт таблицу, если на странице присутствуют два или более сворачиваемых элемента.mw-collapsedautocollapsemw-collapsed

Примечание : в предыдущих версиях этой статьи рекомендовался collapsibleкласс, но mw-collapsibleтеперь он предпочтительнее. Это функция программного обеспечения MediaWiki, а не локальная настройка, и может использоваться для того, чтобы сделать любой элемент сворачиваемым, а не только таблицы. mw-collapsibleтакже не требует строки заголовка в таблице, как collapsibleэто было. Таблицы будут показывать элементы управления "[hide]" / "[show]" в первой строке таблицы (независимо от того, является ли она строкой заголовка), если только не присутствует заголовок таблицы. ( см. § Таблицы с подписями )

Пример со строкой заголовка

{| class = "wikitable mw-collapsible mw-collapsed"  |- ! Заголовок |- | Содержимое, которое начинается скрытым |- | Больше скрытого содержимого |}

Примеры без строки заголовка

{| class = "wikitable mw-collapsible"  |- | Первая строка всегда видна |- | Содержимое, которое отображается в начале |}

{| class = "wikitable mw-collapsible mw-collapsed"  |- | Первая строка всегда видна |- | Другие строки начинаются скрытыми |}

Таблицы с подписями

Таблицы с подписями будут сворачиваться в заголовок таблицы. Заголовок не будет виден в свернутом виде. Используйте {{ nowrap }} , чтобы заголовок не помещался в крошечный вертикальный столбец при сворачивании таблицы.

{| class = "wikitable mw-collapsible"  |+ {{nowrap|Немного длинная подпись таблицы}} |- ! Заголовок |- | Содержимое начинает отображаться |- | Более видимое содержимое |}

Начинаем с развёрнутого состояния:

{| class = "wikitable mw-collapsible mw-collapsed"  |+ {{nowrap|Немного длинная подпись таблицы}} |- ! Заголовок |- | Начало содержимого скрыто |- | Больше скрытого содержимого |}

Сортировка и сворачивание

Свернуть сортируемую таблицу можно. Для этого нужно использовать этот код:

class="wikitable sortable mw-collapsible"

Например:

{| class = "wikitable sortable mw-collapsible"  |+ Сортируемая и сворачиваемая таблица |- ! scope = col | Алфавитный ! scope = col | Числовой ! scope = col | Дата ! scope = col class = unsortable | Несортируемый |- | d || 20 || 2008-11-24 || Этот |- | b || 8 || 2004-03-01 || столбец |- | a || 6 || 1979-07-23 || не может |- | c || 4.2 || 1492-12-08 || быть |- | e || 0 || 1601-08-13 || отсортирован. |}         

Если вы хотите, чтобы таблица по умолчанию находилась в свернутом состоянии, используйте код

{| class="wikitable sortable mw-collapsible mw-collapsed"

вместо

{| class="wikitable sortable mw-collapsible"

Примечание: примеры использования и т. д. см. здесь: {{ row hover highlight }} .

Чтобы выделить строки при наведении, добавьте {{ row hover highlight }} (или его псевдоним {{mw-datatable}} ) прямо над вики-текстом таблицы.

Это позволяет использовать class=mw-datatableи class=hover-highlight. Оба добавляют светло-голубую подсветку при наведении курсора на строку таблицы. class=mw-datatableтакже делает фон ячеек без заголовков белым. Он не переопределяет существующие цвета фона, заданные для ячеек или строк. ( class=wikitableсоздает светло-серый фон для ячеек данных.)

Цвета фона обычны для ячеек таблиц. Например, во многих спортивных статьях. См. здесь . По причинам доступности, указанным в WP:COLOR , информация не должна передаваться с помощью одного только цвета.

Ниже приведены два способа указания цвета текста и фона для одной ячейки:

{| |- | style = "цвет фона: красный; цвет: белый;" | abc | def | style = "цвет фона: красный;" |< span style = "цвет: белый;" > ghi </ span > | jkl |}   

Как и другие параметры, цвета можно указывать для всей строки или всей таблицы; параметры для строки переопределяют значение для таблицы, а параметры для ячейки переопределяют параметры для строки.

Нет простого способа указать цвет для всего столбца: каждая ячейка в столбце должна быть указана индивидуально. Инструменты могут сделать это проще. ^{[ which? ]}

{| style = "цвет фона: желтый; цвет: зеленый;" |- | stu || style = "цвет фона: серебристый;" | vwx || yz |- style = "цвет фона: красный; цвет: белый;" | stu || style = "цвет фона: серебристый;" | vwx || yz |- | stu || style = "цвет фона: серебристый;" | vwx || yz |}        

Чтобы заставить ячейку соответствовать одному из цветов шаблона по умолчанию class=wikitable, используйтеstyle="background-color:#EAECF0;"   для более темного заголовка иstyle="background-color:#F8F9FA;"   для более светлого тела. #A2A9B1 — цвет границы вики-таблиц.

Избегайте использования background: noneили background: transparent. Смотрите:

• mw:Рекомендации по совместимости с ночным режимом на Wikimedia wiki#Избегайте использования фона: none или фона: transparent

style="background-color:…"работает в сортируемых ячейках заголовков. style="background:…"не работает. Это нарушает сортировку в этой ячейке. См. Help:Sortable tables . Поэтому используйте style="background-color:…"для всех ячеек заголовков столбцов, независимо от того, сортируются они в данный момент или нет. Кто-то может попытаться сделать их сортируемыми позже.

Смотрите цвета ссылок для различных скинов: Справка:Цвет ссылки#Стандартные цвета . Непосещенная векторная ссылка: #3366CC. Посещенная векторная ссылка: #795CB2.

Проверьте контрастность цвета ссылки с цветом фона и цветом текста:

• WebAIM: проверка контрастности ссылок.

Замените белый векторный фон по умолчанию (#FFFFFF) различными цветами фона:

• Цвет непросмотренной векторной ссылки, белый цвет фона и цвет векторного текста.
• Цвет ссылки «Посещено вектор», цвет белого фона и цвет текста «Вектор».

Из MOS:COLORS : Для скина Vector 2022 по умолчанию нормальный цвет текста — #202122, а не посещенная синяя ссылка — #3366CC. «Когда ссылки и отсылки отсутствуют, дополнительный контраст возможен путем установки цвета текста на чисто черный (#000000). Если требуется темный фон, его следует использовать на белом тексте (#FFFFFF) без ссылок и отсылок».

В темном режиме в ячейках таблицы пространства имен статьи с фоновыми цветами есть черные подчеркнутые ссылки. Например:

• Список футбольных клубов высшего дивизиона в странах УЕФА#Испания

Таким образом, любая ячейка с приемлемым по WCAG контрастом цвета ссылки в светлом режиме имеет еще лучший контраст цвета ссылки в темном режиме.

К сожалению, ссылки только черные в пространстве имен статьи. Не в template, help, talk, user и других пространствах имен. Например, см. шаблон таблицы Испании из указанной выше статьи: Template:2022–23 La Liga table .

Обычно копирование и вставка столбцов или строк удаляет встроенные стили CSS, такие как цвета ячеек. Существует способ разбить таблицу (например, слишком широкую таблицу) на несколько таблиц без потери всех фоновых цветов и других встроенных стилей. Скопируйте таблицу в 2 песочницы (или в одну песочницу и в саму статью). Затем удалите ненужные столбцы в одной из новых таблиц. Повторите в другой песочнице (или в статье), за исключением удаления других столбцов.

Существует множество таблиц off-wiki с полезной раскраской, которая соответствует стандартам доступа WCAG . В настоящее время, похоже, нет способа скопировать эти таблицы в вики и сохранить стили, такие как цвета (цвет фона или текста). Можно преобразовать таблицы PDF в Excel и сохранить цвета. Или в таблицы HTML и сохранить цвета. Но, похоже, нет способа скопировать любую из этих цветных таблиц (PDF, Excel, HTML и т. д.) в вики. Если есть способ, пожалуйста, оставьте заметку на Help talk:Table .

При желании можно сохранить раскраску, скопировав таблицу как изображение. Это может быть необходимо для часто обновляемых цветных таблиц, где было бы слишком много времени добавлять цвет ко многим ячейкам после каждого обновления. Для большинства таблиц данных, цветных или нет, нет проблем с авторскими правами. Они находятся в общественном достоянии. Смотрите Commons:Template:PD-chart.

• Help:Table для общей информации об использовании таблиц. Также в разделах "См. также" и "Внешние ссылки" есть много ссылок. Вместо того, чтобы дублировать их здесь.