Таблица представляет собой расположение столбцов и строк , который организует и позиции данных или изображений. Таблицы могут быть созданы на страницах Википедии с использованием специального синтаксиса вики-текста , и для их настройки можно использовать множество различных стилей и приемов.
Таблицы можно использовать как инструмент форматирования, но вместо этого рассмотрите возможность использования списка из нескольких столбцов .
Использование панели инструментов
Чтобы автоматически вставить таблицу, нажмите или же (Вставьте таблицу) на панели инструментов редактирования . Если «Вставить таблицу» нет на панели инструментов, следуйте этим инструкциям, чтобы добавить ее.
При нажатии кнопки Вставить таблицу вставляется следующий текст :
{ | class = "wikitable" | + Текст подписи | - ! Текст заголовка !! Текст заголовка !! Текст заголовка | - | Пример || Пример || Пример | - | Пример || Пример || Пример | - | Пример || Пример || Пример | }
Этот код создает следующую таблицу:
Текст заголовка | Текст заголовка | Текст заголовка |
---|---|---|
Пример | Пример | Пример |
Пример | Пример | Пример |
Пример | Пример | Пример |
Образец текста («Текст заголовка» или «Пример») предназначен для замены фактическими данными.
Сводка по базовой разметке таблицы
Элемент таблицы | Викитекст | Обязательный | Примечания по использованию |
---|---|---|---|
Начало таблицы | {| | Обязательный | |
Заголовок таблицы | |+ | По желанию | Только между началом таблицы и первой строкой таблицы. |
Строка таблицы | |- | По желанию | Может быть опущено перед первой строкой. |
Ячейка заголовка таблицы | ! | По желанию | Последовательные ячейки заголовка таблицы могут быть добавлены в одну строку, разделенную двойными метками ( !! ); или начните с новых строк, каждая со своей единственной меткой ( ! ). |
Ячейка данных таблицы | | или же || | По желанию | Последовательные ячейки данных таблицы могут быть добавлены в одну строку, разделенную двойными метками ( || ), или начинаться с новой строки, каждая со своей собственной одиночной меткой ( | ). Эта метка также используется для отделения атрибутов HTML от содержимого ячейки и заголовка. |
Конец таблицы | |} | Обязательный |
- Вышеупомянутые метки должны начинаться с новой строки , за исключением двойных меток (
||
и!!
) для необязательного добавления последовательных ячеек в одну строку. - Пробелы в начале строки игнорируются.
- Контент может следовать за своей меткой ячейки в той же строке (после любых необязательных атрибутов HTML); или в строках ниже метки ячейки (однако остерегайтесь нежелательных абзацев). Контент, использующий вики-разметку, который сам должен начинаться с новой строки, например, со списками, заголовками или вложенными таблицами, должен находиться на отдельной новой строке.
- Чтобы вставить вертикальную черту (
|
) в заголовок таблицы или ячейку, используйте
экранирующую разметку.|
HTML-атрибуты
Каждая метка, кроме конца таблицы ( |}
), может принимать один или несколько атрибутов . Атрибуты должны находиться на той же строке, что и метка.
- Ячейки и заголовки (
|
или||
,!
или!!
, и|+
) содержат содержимое - отделяют любой атрибут от его содержимого одной вертикальной чертой (|
) с атрибутами, предшествующими содержимому. - Метки таблиц и строк (
{|
и|-
) не удерживают содержимое напрямую. Вы не добавить (|
) после любых атрибутов.
Обычно в таблицы включаются следующие атрибуты: class
например class="wikitable"
; style
, для стилей CSS ; scope
, чтобы указать ячейки заголовка строки или столбца; rowspan
, чтобы расширить ячейки более чем на одну строку; colspan
, чтобы расширить ячейки более чем на один столбец.
Учебник по синтаксису конвейера
Хотя синтаксис таблицы HTML также работает, специальный викикод можно использовать как ярлык для создания таблицы. Вертикальная черта или символ «труба» ( |
) коды функционируют точно так же , как и HTML таблицы разметки, поэтому знание кода таблицы HTML помогает понять код трубы. Ярлыки следующие:
- Вся таблица заключена в фигурные скобки и символ вертикальной черты (труба). Так что используйте,
{|
чтобы начать таблицу и|}
закончить ее. Каждый должен быть в отдельной строке:
{| код таблицы идет сюда |}
- Необязательный заголовок таблицы включает строку, начинающуюся с вертикальной черты и знака плюс "
|+
", а также подпись после нее:
{|| + код таблицы заголовков идет сюда|}
- Чтобы начать новую строку таблицы , введите вертикальную черту и дефис в отдельной строке: «
|-
». Коды ячеек в этой строке начинаются со следующей строки.
{|| + Заголовок таблицы| - здесь идет код строки | - здесь идет код следующей строки|}
- Введите коды для каждой ячейки таблицы в следующей строке, начиная с полосы:
{|| + Заголовок таблицы| -| код ячейки идет сюда| -| здесь идет код ячейки следующей строки | следующий код ячейки идет сюда|}
- Ячейки можно разделить либо новой строкой и одной чертой, либо двойной чертой "
||
" на той же строке. Оба производят одинаковый результат:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{|| + Заголовок таблицы| -| Ячейка 1 || Ячейка 2 || Ячейка 3| -| Ячейка A | Ячейка B | Ячейка C| -| Ячейка x | Ячейка y || Ячейка z|} |
|
- Необязательные параметры могут изменять отображение и стиль ячеек, строк или всей таблицы. Самый простой способ добавить стиль - установить класс
wikitable
CSS , который во внешней таблице стилей Википедии определен для применения серой цветовой схемы и границ ячеек к таблицам, использующим его:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable"| + Заголовок таблицы! Заголовок столбца 1! Заголовок столбца 2! Заголовок столбца 3| -! Заголовок строки 1| Ячейка 2 || Ячейка 3| -! Заголовок строки A| Ячейка B| Ячейка C|} |
|
Параметры таблицы и параметры ячеек такие же, как в HTML , см. Http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE и Table (HTML) . Однако thead
, tbody
, tfoot
, colgroup
, и col
элементы в настоящее время не поддерживается в MediaWiki , по состоянию на апрель 2017 года[Обновить].
Таблица может быть полезна, даже если ни в одной из ячеек нет содержимого. Например, цвета фона ячеек можно изменить с помощью параметров ячеек, превратив таблицу в диаграмму, как пример meta: Template talk: Square 8x8 pentomino . «Изображение» в виде таблицы редактировать гораздо удобнее, чем загруженное.
Каждая строка должна иметь такое же количество ячеек, что и другие строки, чтобы количество столбцов в таблице оставалось неизменным. Для пустых ячеек используйте пространство нулевой ширины
или более раннее неразрывное пространство в
качестве содержимого, чтобы обеспечить отображение ячеек.
С помощью colspan
и rowspan
ячейки могут занимать несколько столбцов или строк;
Визуализация трубы
Когда клетка содержание , которое содержит трубы характера не делает правильно, просто добавить пустой формат для этой ячейки. Второй символ вертикальной черты в строке не отображается; он зарезервирован для добавления формата. Викикод между первым и вторым каналом - это формат, но поскольку пустота или ошибка там игнорируются, они просто исчезают. Когда это произойдет, добавьте фиктивный формат. |cell code
Используйте третью вертикальную черту для визуализации вашего первого вертикального символа.
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{| class = "wikitable"| -| '' форматирование '' | P | i | p | e || C | e | l | l | 2 || -| '' форматирование '' | P | i | p | e || '' форматирование '' | C | e | l | l | 2 || -|| P | i | p | e | s || C | e | l | l | 2 ||} |
|
Третий и последующие вертикальные символы будут отображаться, но для отображения двух соседних вертикальных символов в ячейке (вместо того, чтобы они действовали как первая конвейерная линия в начале новой ячейки), необходимы другие параметры конвейерной визуализации. Вместо использования фиктивного формата для рендеринга канала вы можете визуализировать его напрямую с помощью 1)
(предпочтительно) или 2) html : |
или |
. Каждая строка кода ячейки в следующей таблице имеет один канал викикода.
Источник вики | Оформленный результат | ||
---|---|---|---|
{| class = "wikitable"| -| |
|
Шаблон из-за порядка, в котором анализируются данные, эквивалентен вводу одного | трубный характер. Единственный тег-синтаксический анализатор здесь не применяется. Посмотрите, как они не выходят из второй трубы, как & # 124 и выше:{{!}}
Источник вики | Оформленный результат | ||
---|---|---|---|
{| class = "wikitable"| -| |
|
Сфера
- Строка заголовков столбцов идентифицируется с помощью "
! scope="col" |
" вместо "|
". Каждая ячейка заголовка должна быть на отдельной строке в вики-разметке. Ячейки заголовка обычно отображаются не так, как обычные ячейки, в зависимости от браузера. Часто они выделяются жирным шрифтом и центрируются.scope="col"
Разметка должна использоваться для заголовков столбцов во всех таблицах данных , поскольку он явно связывает заголовок с соответствующими клетками, что позволяет обеспечить последовательный опыт для чтения с экрана. Руководство по стилю требует использования области для заголовков столбцов . - Одна ячейка в строке (обычно, но не всегда первая) идентифицируется как заголовок строки с помощью разметки «
! scope="row" |
» вместо «|
». Каждая ячейка заголовка должна быть на отдельной строке в вики-разметке.scope="col"
Разметка должна использоваться для заголовков столбцов во всех таблицах данных , поскольку он явно связывает заголовок с соответствующими клетками, что позволяет обеспечить последовательный опыт для чтения с экрана. Руководство по стилю требует использования области для заголовков столбцов . Многие браузеры отображают ячейки заголовков строк полужирным шрифтом и выравнивают их по центру. Если такая визуализация нежелательна с эстетической точки зрения, таблица может быть оформлена с помощью класса plainrowheaders, который выравнивает текст в ячейке по левому краю и удаляет выделение жирным шрифтом.
Типичный пример можно разметить так:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | класс = "wikitable plainrowheaders" | + В табличной подпись ! scope = "col" | Заголовок столбца 1 ! scope = "col" | Заголовок столбца 2 ! scope = "col" | Заголовок столбца 3 | - ! scope = "row" | Заголовок строки 1 | Ячейка 2 || Ячейка 3 | - ! scope = "row" | Заголовок строки A | Ячейка B || Ячейка C | } |
|
Примеры
Простые понятные таблицы
Минималистский стол
Оба они генерируют одинаковый результат. Выберите стиль на основе количества ячеек в каждой строке и общего текста внутри каждой ячейки.
Источник вики | Визуализированный результат (обратите внимание, что нет границ) | ||||
---|---|---|---|---|---|
{|| -| А| B| -| C| D|} {|| -| А || B| -| C || D|} |
|
Таблица умножения
Обратите внимание, что в этом примере class="wikitable"
используется стиль таблицы с внешней таблицей стилей Википедии для таблиц. Он добавляет границы, затенение фона и полужирный текст заголовка.
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "text-align: center; width: 200px; height: 200px;"| + Таблица умножения| -! × ! 1 ! 2 ! 3| -! 1| 1 || 2 || 3| -! 2| 2 || 4 || 6| -! 3| 3 || 6 || 9| -! 4| 4 || 8 || 12| -! 5| 5 || 10 || 15|} |
|
Операции со всей таблицей
Подписи и резюме
Для таблиц данных рекомендуется использовать явные заголовки таблиц; Руководство по стилю Википедии считает их высокоприоритетными по причинам доступности, поскольку заголовок явно связан с таблицей, в отличие от обычного заголовка викитекста или вводного предложения. Все таблицы данных в Википедии требуют подписей. Заголовок предоставляется с |+
разметкой, как и строка таблицы ( |-
), но не содержит ячеек и не находится в пределах таблицы. Заголовки всегда отображаются в виде заголовка по центру (в большинстве браузеров) над таблицей. Заголовок может быть стилизован (с помощью встроенного, а не блочного, CSS) и может включать вики-ссылки, ссылки на ссылки и т. Д.
Резюме приводится обзор данных таблицы для текста и аудио - браузеров, и обычно не отображаются в графических браузерах. Резюме (также с высоким приоритетом «Руководство по стилю» для таблиц) представляет собой синопсис содержания и не повторяет текст заголовка; думайте об этом как об аналоге alt
описания изображения . Сводка добавляется с помощью в той же строке, что и открывающая таблица, вместе с любыми и другими параметрами для таблицы в целом. Однако этот атрибут устарел в HTML5 .summary="Summary text here."
{|
class=
summary=
Пример разметки Wiki с выровненным по левому краю заголовком с цитатой из источника:
{| class = "wikitable"| + style = "выравнивание текста: слева;" | Данные за 2014–2015 гг. По регионам | -! scope = "col" | Год !! scope = "col" | Африка !! scope = "col" | Америка !! scope = "col" | Азиатско-Тихоокеанский регион !! scope = "col" | Европа| -! scope = "row" | 2014 г.| 2 300 || 8 950 || '9,325' || 4200| -! scope = "row" | 2015 г.| 2,725 || '9 200' || 8,850 || 4 775|}
Как это отображается в браузере:
Год | Африке | Америка | Азиатско-Тихоокеанский регион | Европа |
---|---|---|---|---|
2014 г. | 2300 | 8 950 | 9 325 | 4200 |
2015 г. | 2,725 | 9 200 | 8 850 | 4 775 |
Ширина
- Примечание:
width=x
игнорируется в таблицах HTML5 в Википедии .
style=max-width:Xem
может использоваться в верхней строке вики-текста таблицы для указания максимальной ширины таблицы в целом. Для некоторых столов это все, что нужно.
В следующей таблице отрывок из этой версии в списке стран по богатству на одного взрослого . Цель состоит в том, чтобы сузить столбцы данных и распределить названия стран в каждой строке. Все это упрощает просмотр списка стран. Но названия стран при необходимости следует переносить по словам (в узких портретных проекциях на некоторых мобильных телефонах и т. Д.). Так style=max-width:Xem
было использовано в выбранных заголовках столбцов. Вот соответствующий вики-текст заголовка:
! Страна или [[ субнациональном область ]] ! style = max-width : 4em | Среднее богатство на одного взрослого ([[ USD ]]) ! style = max-width : 4em | Среднее богатство на одного взрослого ([[ USD ]]) ! style = max-width : 4em | Взрослое население
Страна или регион | Среднее богатство на одного взрослого ( долл. США ) | Среднее богатство на взрослого ( долл. США ) | Взрослое население |
---|---|---|---|
Демократическая Республика Конго | 382 | 1,084 | 37 100 000 |
Мозамбик | 352 | 880 | 13 814 000 |
Единицы Em хороши тем, что они увеличиваются в размере вместе с настройкой масштабирования. Максимальная ширина лучше, чем использование разрывов (
) в заголовках, потому что разрывы заголовков раздражают людей, использующих программы чтения с экрана из-за пауз. Максимальная ширина также позволяет уменьшать размеры таблиц, чтобы они поместились на экранах планшетов и телефонов меньшего размера.
style=width:Xem
не сужается дальше ни при каких обстоятельствах, поэтому следует избегать его использования. Узнайте, почему на этой подстранице . По той же причине class=nowrap
следует избегать.
Высота
Можно указать высоту всей таблицы, а также высоту строки. Высота средней строки ниже установлена на, style=height:7em
а общая высота всей таблицы установлена на style=height:14em
единицы. Выполнение математических расчетов показывает, что высота верхнего и нижнего рядов составляет 3,5 см каждый. 3,5 + 3,5 + 7 = 14. Если есть перенос слов, высота будет увеличиваться, чтобы учесть это.
Разметка вики:
{ | class = wikitable style = height : 14 em | - ! Влево !! Центр !! Право | - | Левая верхняя ячейка || Верхняя центральная ячейка || Верхняя правая ячейка | - style = height : 7 em | Средняя левая ячейка || Средняя центральная ячейка || Средняя правая ячейка | - | Нижняя левая ячейка || Нижняя центральная ячейка || Нижняя правая ячейка | }
Как это отображается в браузере:
Оставил | Центр | Верно |
---|---|---|
Левая верхняя ячейка | Верхняя центральная ячейка | Верхняя правая ячейка |
Средняя левая ячейка | Средняя центральная ячейка | Средняя правая ячейка |
Нижняя левая ячейка | Нижняя центральная ячейка | Нижняя правая ячейка |
Установка границ
Добавить рамку вокруг таблицы , используя свойство CSS , например . В этом примере используется сплошная (не пунктирная) серая граница шириной в один пиксель:border: thickness style color;
border:3px dashed red
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| style = "border-spacing: 2px; border: 1px solid darkgray;"! style = "width: 140px;" | Оставил! style = "width: 150px;" | Центр! style = "width: 130px;" | Верно| -| [[Файл: StarIconBronze.png | 120px | Значок бронзовой звездочки]]
| [[Файл: StarIconGold.png | 120px | Значок золотой звездочки]]
| [[File: StarIconGreen.png | 120px | Значок зеленой звездочки]]| - style = "выравнивание текста: центр;"| Бронзовая звезда || Золотая звезда || Зеленая звезда|} |
|
Обратите внимание, что текст в нижнем ряду центрирован по центру, style="text-align: center;"
а изображения звездочек - не по центру (т. Е. По левому краю).
Пока в File:
спецификациях не указан параметр, |thumb
строки заголовков в таблице не отображаются (только при наведении указателя мыши). Цвет рамки darkgray
соответствует типичным таблицам или информационным блокам в статьях; однако это может быть любое имя цвета (например style="border: 1px solid darkgreen;"
) или шестнадцатеричный цвет (например:) #DDCCBB
.
- Границы каждой ячейки в таблице
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{ | граница = 1 | - | А || B || C | - | D || E || F | } |
|
Если все ячейки имеют одинаковый цвет границы, полученные двойные границы могут не понадобиться; добавить border-collapse: collapse;
свойство CSS на открытии таблицы тега , чтобы свести их к одинарным ( cellspacing=...
является устаревшим ).
Кроме того, W3C позволяет использовать устаревший border=
атрибут в корне таблицы ( {|
), если его значение равно «1». Это добавляет к таблице и всем ее ячейкам сразу однопиксельную границу цвета по умолчанию:
Использование border-collapse
свойства для объединения двойных границ, как описано выше:
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{ | border = 1 style = " border-collapse : collapse ; " | - | А || B || C | - | D || E || F | } |
|
Позиционирование
- Вы можете позиционировать всю таблицу, содержимое строки и содержимое ячейки, но не с одним параметром для всего содержимого таблицы. См. M: Template talk: Table demo .
Бок о бок столы
Вы можете разместить две или более таблиц рядом, если это позволяет ширина окна, но в противном случае разрешите им оборачиваться, чтобы избежать горизонтальной прокрутки для читателей с узкими экранами. Поместите это перед первой таблицей:
< div > < ul > - отображает таблицы рядом, если это позволяет ширина окна ->
< li style = "display: inline-table;" >
Поместите это между таблицами:
li > < li style = "display: inline-table;" >
Поместите это после последней таблицы:
li > ul > div >
style="display: inline-table;"
не могут быть добавлены в викитекст таблицы, потому что длинные подписи могут испортить ситуацию в мобильной портретной ориентации или на других узких экранах. Он должен быть добавлен вне таблицы вики-текста. Таблицы будут переноситься в зависимости от ширины экрана. Чтобы увидеть, сузьте окно браузера.
Таблица 1. Длинный заголовок для проверки на наличие проблем в режиме мобильной портретной ориентации. Имя Цвет Фред апельсин Боб Зеленый Линди Желтый Таблица 2. Длинный заголовок для проверки на наличие проблем в режиме мобильной портретной ориентации. Животное Состояние Енот Мэн КИТ Аляска Скат манта Флорида
Вот он в употреблении:
< div > < ul > - отображает таблицы рядом, если это позволяет ширина окна ->
< li style = "display: inline-table;" >{| class = "wikitable"| + Таблица 1. Длинный заголовок для проверки на наличие проблем в режиме мобильной портретной ориентации.| -! Имя! Цвет| -| Фред| Апельсин| -| Боб| Зеленый| -| Линди| Желтый|} li > < li style = "display: inline-table;" >{| class = "wikitable"| + Таблица 2. Длинный заголовок для проверки на наличие проблем в режиме мобильной портретной ориентации.| -! Животное! Состояние| -| Енот| Мэн| -| Кит| Аляска| -| Манта-скат| Флорида|} li > ul > div >
Первую таблицу можно сдвинуть до упора влево, заменив на<ul style="margin-left:0px;">
Рядом столы и изображения
Вы также можете добавлять изображения в микс. Добавить, vertical-align:top;
чтобы выровнять элемент по верхнему краю. См. Другие параметры в свойстве CSS vertical-align . Таблицы и изображения будут переноситься в зависимости от ширины экрана. Чтобы увидеть, сузьте окно браузера. Например:
Таблица 1 Имя Цвет Фред апельсин Боб Зеленый Линди Желтый Таблица 2 Животное Состояние Енот Мэн КИТ Аляска Скат манта Флорида
Добавить, vertical-align:bottom;
чтобы выровнять элемент по низу. Вы можете выбрать выравнивание для каждого элемента.
Таблица 1 Имя Цвет Фред апельсин Боб Зеленый Линди Желтый Таблица 2 Животное Состояние Енот Мэн КИТ Аляска Скат манта Флорида
Плавающий стол
Два класса таблиц floatleft
и floatright
(с учетом регистра) помогают перемещать таблицу и настраивать поля таблицы, чтобы они не прилипали к тексту. floatleft
перемещает таблицу влево и регулирует правое поле. floatright
делает наоборот. Пример:
Этот абзац перед таблицей. Текст в столбце 2 охватывает обе строки из-за спецификатора формата «rowspan = 2», поэтому во 2-й строке нет кодирования для «Col 2», только Col 1 и Col 3.{| class = "wikitable floatright"| Столбец 1, ряд 1| rowspan = "2" | Столбец 2, ряд 1 (и 2)| Столбец 3, ряд 1| -| Столбец 1, ряд 2| Колонка 3, ряд 2|}{| class = "wikitable floatleft"| Столбец 1, ряд 1| rowspan = "2" | Столбец 2, ряд 1 (и 2)| Столбец 3, ряд 1| -| Столбец 1, ряд 2| Колонка 3, ряд 2|}Sed ut perspiciatis, un omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventory veritatis et quasi Architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consquuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolorte numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exitationem ullam corporis suscipit labouriosam, nisi ut aliquid ex ea Commodi Conquatur? Quis autem vel eum iure correhenderit, qui in ea voluptate velit esse, quam nihil molestiae consquatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Как это отображается в браузере:
Этот абзац перед таблицей. Текст в столбце 2 охватывает обе строки из-за спецификатора формата «rowspan = 2», поэтому во 2-й строке нет кодирования для «Col 2», только Col 1 и Col 3.
Столбец 1, ряд 1 | Столбец 2, ряд 1 (и 2) | Столбец 3, ряд 1 |
Столбец 1, ряд 2 | Колонка 3, ряд 2 |
Столбец 1, ряд 1 | Столбец 2, ряд 1 (и 2) | Столбец 3, ряд 1 |
Столбец 1, ряд 2 | Колонка 3, ряд 2 |
Sed ut perspiciatis, un omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventory veritatis et quasi Architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consquuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolorte numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exitationem ullam corporis suscipit labouriosam, nisi ut aliquid ex ea Commodi Conquatur? Quis autem vel eum iure correhenderit, qui in ea voluptate velit esse, quam nihil molestiae consquatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Обратите внимание , что , хотя существуют и другие способы , чтобы плавать таблицы, например style="float:left;"
, style="float:right;"
единственные параметры , которые позволяют расположить таблицу под плавающий мультимедийный объект являются floatleft
и floatright
. Например:
Выравнивание стола по дереву floatleft
дает:
Столбец 1, ряд 1 | Столбец 2, ряд 1 (и 2) | Столбец 3, ряд 1 |
Столбец 1, ряд 2 | Колонка 3, ряд 2 |
Sed ut perspiciatis, un omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventory veritatis et quasi Architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consquuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolorte numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exitationem ullam corporis suscipit labouriosam, nisi ut aliquid ex ea Commodi Conquatur? Quis autem vel eum iure correhenderit, qui in ea voluptate velit esse, quam nihil molestiae consquatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Но согласование с ним style="float:left;"
дает:
Столбец 1, ряд 1 | Столбец 2, ряд 1 (и 2) | Столбец 3, ряд 1 |
Столбец 1, ряд 2 | Колонка 3, ряд 2 |
Sed ut perspiciatis, un omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventory veritatis et quasi Architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consquuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolorte numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exitationem ullam corporis suscipit labouriosam, nisi ut aliquid ex ea Commodi Conquatur? Quis autem vel eum iure correhenderit, qui in ea voluptate velit esse, quam nihil molestiae consquatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Центрирующие столы
align="center"
является устаревшим в HTML5 , и не очень хорошо работает в программном обеспечении Mediawiki. Например; он не отменяет выравнивание таблиц по левому краю через class=wikitable
.
Центрированные таблицы могут быть достигнуты, но они не «плавают»; то есть ни с одной стороны не появляется никакого текста. Уловка {| style="margin-left: auto; margin-right: auto; border: none;"
[примечание 1]
Разметка вики:
Текст перед таблицей ...{| class = "wikitable" style = "margin-left: auto; margin-right: auto; border: none;"| + Ячейки по левому краю, по центру таблицы| -! scope = "col" | Duis! scope = "col" | aute! scope = "col" | irure| -| долор || в репрехендерите || в сладострастном велите| -| esse cillum dolore || eu fugiat nulla || pariatur.|}... текст после таблицы
Как это отображается в браузере:
Текст перед таблицей ...
Duis | aute | irure |
---|---|---|
dolor | в реперехендерит | в сладострастном велите |
esse cillum dolore | eu fugiat nulla | pariatur. |
... текст после таблицы.
Вложенные таблицы
Например | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Викитекст:
{{Collapse | 1 = < nowiki />
* Почему < syntaxhighlight lang = "moin" inline > < nowiki /> syntaxhighlight > . выше, чтобы увидеть. ->
{{tq2 | 1 = < nowiki /> {{tq2 | {{tq2 | 1 = < nowiki /> Текст перед таблицей ... Также проверьте: [[Template: tq2 # Caveats]]. ->{{{!}} class = "wikitable" style = "background-color: # eaf8f4; color: # 008560" ! A !! B !!{{{!}} class = "wikitable" style = "background-color: # f8f4ea"! А !! Б{{!}} -{{!}}{{{!}} class = "wikitable"! a0 !! b0{{!}} -{{!}} А {{!}} {{!}} А{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{{!}}{{{!}} class = "wikitable"! a1 !! b1{{!}} -{{!}} Б {{!}} {{!}} Б{{!}}}{{!}}}{{!}} -{{!}}{{{!}} class = "wikitable" style = "color: # ff4242"! a0 !! b0{{!}} -{{!}} А {{!}} {{!}} А{{!}}} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{{!}}{{{!}} class = "wikitable"! a1 !! b1{{!}} -{{!}} Б {{!}} {{!}} Б{{!}}}{{!}} {{Collapse | 1 = < span style = "color: # ff4242" > Универсальный тест ... span > | 2 = X}}{{!}}} ... текст после таблицы. | source = '' ' < span style = "background-color: # ffff00" > Таблица span > в таблице' '' ...}}...а также...}}'' 'Цитата [[поезд | < span style = "color: # ff0000" > поезд span > ]] < span style = "background-color: # ffff00; color: # ff0000" > ! span > '' '[https://en.wikipedia.org/wiki/Help:Link#External_links Внешняя ссылка] ( < span class = "plainlinks" > [https://en.wikipedia.org/wiki/Help:External_link_icons#Hiding_link_icons скрытый значок ] span > )}} | 2 = Например | expand = y}}
- Справка: теги комментариев
- Шаблон: tq2 # Предостережения
Семь различных (синих) таблиц показаны вложенными внутри ячеек таблицы. Автоматически две таблицы | A | и | B | B | выравниваются по вертикали вместо обычных текстовых символов в ячейке рядом друг с другом. И float
используется для фиксации каждой из таблиц | C | и | D | в свою позицию в одной ячейке таблицы. Это можно использовать для диаграмм и схем, хотя, как отмечалось выше, это не рекомендуется. Вложенные таблицы должны начинаться с новой строки.
α | ячейка2
| снова исходная таблица |
|
|
Викитекст:
{| style = "border: 1px сплошной черный;"| style = "border: 1px сплошной черный;" | &альфа;| style = "border: 1px сплошной черный; выравнивание текста: центр;" | ячейка2{| style = "border: 2px сплошной черный; фон: #ffffcc;" | style = "border: 2px solid darkgray;" | РАЗМЕЩЕННЫЙ| -| style = "border: 2px solid darkgray;" | ТАБЛИЦА|}| style = "border: 1px сплошной черный; vertical-align: bottom;" | снова исходная таблица| style = "border: 1px сплошной черный; ширина: 100px" |{| style = "border: 2px сплошной черный; фон: #ffffcc"| style = "border: 2px solid darkgray;" | А|}{| style = "border: 2px сплошной черный; фон: #ffffcc"| style = "border: 2px solid darkgray;" | B| style = "border: 2px solid darkgray;" | B|}| style = "border: 1px сплошной черный; ширина: 50px" |{| style = "border: 2px сплошной черный; фон: #ffffcc; float: left"| style = "border: 2px solid darkgray;" | C|}{| style = "border: 2px сплошной черный; фон: #ffffcc; float: right"| style = "border: 2px solid darkgray;" | D|}|}
Прокрутка
Вся таблица может быть помещена в список с прокруткой, чтобы новые строки таблицы появлялись на экране, а старые строки таблицы исчезали. Хотя MOS: SCROLL не одобряет прокрутку таблиц в пространстве статей, поскольку содержимое статьи должно быть доступно на различных устройствах, тогда как таблица прокрутки скрывает некоторый текст, таблица прокрутки может использоваться в других пространствах имен Википедии . Существует несколько очень сложных прокручиваемых таблиц (с заголовками, которые остаются видимыми и липкими при прокрутке) по пандемии COVID-19 по странам и территориям : шаблон: данные о пандемии COVID-19 , шаблон: показатели смертности от пандемии COVID-19 и шаблон: ежемесячные совокупные данные Общее количество смертей от COVID-19 по странам . Сортировочные ряды тоже можно сделать липкими. Смотрите здесь и здесь . См. Лист прокрутки ниже: # Ссылка на раздел или ссылка на карту с привязкой строки . См. Также: Шаблон: окно с прокруткой .
Разметка вики:
< div style = "width: 75%; height: 10em; overflow: auto; border: 2px сплошной красный;" > { | class = "wikitable" | - | abc || def || ghi | - style = " height : 100 px ; " | jkl || style = " width : 200 px ; " | mno || pqr | - | stu || vwx || yz | } div >
Как это отображается в браузере:
abc | def | Гхи |
jkl | mno | pqr |
Стю | vwx | yz |
Цвет; набор параметров
Два способа указать цвет текста и фона для отдельной ячейки:
Источник вики | Оформленный результат | ||||
---|---|---|---|---|---|
{|| -| style = "фон: красный; цвет: белый;" | abc| def| style = "фон: красный;" | < span style = "color: white;" > ghi span >| jkl|} |
|
Как и другие параметры, цвета можно указать для всей строки или всей таблицы; параметры для строки переопределяют значение для таблицы, а параметры для ячейки переопределяют значения для строки. class = mw-datatable переопределяет цвет фона для строки, но не цвет фона для ячейки.
style = background-color: работает с сортируемыми ячейками заголовка. style = background: нет. Это нарушает сортировку в этой ячейке. См. Раздел « Справка: сортировка» .
Нет простого способа указать цвет для всего столбца: каждая ячейка в столбце должна быть указана индивидуально. Инструменты могут облегчить задачу.
Разметка вики:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | style = " фон : желтый ; цвет : зеленый ; " | - | stu || style = " background : silver ; " | vwx || yz | - style = " фон : красный ; цвет : белый ; " | stu || style = " background : silver ; " | vwx || yz | - | stu || style = " background : silver ; " | vwx || yz | } |
|
Чтобы таблица сливалась с фоном, используйте style="background: none;"
или style="background: transparent;"
. (Предупреждение:, style="background: inherit;"
не работает с некоторыми старыми браузерами, включая IE6, поэтому убедитесь, что таблица будет понятна, если предпочтение цвета не работает.)
Чтобы заставить ячейку соответствовать одному из цветов class="wikitable"
шаблона по умолчанию , используйтеstyle="background:#EAECF0;"
для более темного заголовка и style="background:#F8F9FA;"
для более легкого тела. # A2A9B1 - цвет границы вики-таблиц.
Операции с ячейками
Установка параметров ячейки
В начале ячейки добавьте свой параметр, за которым следует одна вертикальная черта. Например, style="width: 300px"|
устанавливает для этой ячейки ширину 300 пикселей. Чтобы установить более одного параметра, оставьте пробел между ними.
Источник вики | Оформленный результат | |||
---|---|---|---|---|
{ | style = " цвет : белый ; " | - | style = " background : red ; " | cell1 || style = " ширина : 300 пикселей ; фон : синий ; " | ячейка2 | style = " background : green ; " | cell3 | } |
|
Вертикальное выравнивание в ячейках
По умолчанию текст выравнивается по вертикальной середине ячейки:
Заголовок строки | Более длинный текст. Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. | Краткий текст |
---|---|---|
Заголовок строки | Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. Представьте, что кто-то прокручивает страницу вниз, видит верхнюю часть «пустых» столбцов и задается вопросом, почему они пусты. | Краткий текст |
Чтобы выровнять текст по верхнему краю ячейки, примените style="vertical-align: top;"
CSS к строкам (к сожалению, кажется необходимым применять это индивидуально к каждой строке). valign=...
Атрибут устарел и не должен использоваться.
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{ | class = "wikitable" style = " width : 400 px ; " | - style = " vertical-align : top ; " ! scope = "row" style = " width : 10 % ; " | Заголовок строки | style = " width : 70 % ; " | Больше кусок из текста. Lorem ipsum ... | style = " width : 20 % ; " | Краткий текст | - style = " vertical-align : top ; " ! scope = "row" | Заголовок строки | Excepteur sint occaecat ... | Краткий текст | } |
|
Отступы и отступы содержимого ячеек
Содержимое ячейки может иметь отступ в стиле CSS padding-left
.
Разметка вики:
{| class = "wikitable"| -| Содержимое ячейки без отступов или дополнений| -| style = "padding-left: 2em;" | style = "padding-left: 2em;"| -| style = "выравнивание текста: справа; отступ справа: 2em;" | style = "padding-right: 2em;"| -| style = "padding-top: 2em;" | style = "padding-top: 2em;"| -| style = "padding-bottom: 2em;" | style = "padding-bottom: 2em;"| -| style = "padding: 3em 5%;" | style = "padding: 3em 5%;" {{пробел | 4}} Сверху и снизу 3em, слева и справа 5%| -| style = "padding: 3em 4em 5%;" | style = "padding: 3em 4em 5%;" {{пробел | 4}} Верхние 3em, Левая и правая 4em, Нижние 5%| -| style = "отступ: 3%;" | style = "отступ: 3%;" {{space | 4}} Сверху, справа, снизу и слева все 3%| -| style = "padding: 1em 20px 8% 9em;" | style = "padding: 1em 20px 8% 9em;" {{space | 4}} Верхняя 1em, Правая 20px, Нижняя 8% и Левая 9em|}
Содержимое ячейки без отступов или дополнений |
style = "padding-left: 2em;" |
style = "padding-right: 2em;" |
style = "padding-top: 2em;" |
style = "padding-bottom: 2em;" |
style = "padding: 3em 5%;" Сверху и снизу 3em, слева и справа 5% |
style = "padding: 3em 4em 5%;" Верхняя 3em, левая и правая 4em, нижняя 5% |
style = "отступ: 3%;" Верхнее, правое, нижнее и левое - все 3% |
style = "padding: 1em 20px 8% 9em;" Верхняя 1em, правая 20px, нижняя 8% и левая 9em |
- Шаблон для аргументов
Аргументы в style="padding: "
можно рассматривать как упорядоченные по 12-часовым часам , начиная с полудня и идя по часовой стрелке , в следующем смысле: «верх» связан с полуднем (т.е. 12 часов, верхняя часть часов ) », справа - 3 часа, внизу - 6 часов, а слева - 9 часов. Аргументы упорядочиваются по часовой стрелке, начиная с полудня: вверху → справа → снизу → слева (см. Эту [примечание 2] для примера с объяснением).
Этот же порядок используется и в других местах, например, при указании границ ячейки с помощью border-style:
.
Границы отдельных ячеек
Тот же CSS, что и для таблиц, можно использовать в описателе формата ячейки (заключенном в |
... |
), чтобы поставить границу вокруг каждой ячейки:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | style = " border-spacing : 2 px ; border : 1 px, сплошной темно-серый ; " ! style = " width : 140 px ; " | Влево ! style = " width : 150 px ; " | Центр ! style = " width : 130 px ; " | Справа | - style = " text-align : center ; " | style = " border : 1 пиксель сплошного синего цвета ; " | [[ Файл : StarIconBronze . png | 120 пикселей | Значок бронзовой звездочки ]] | style = "border: 1px solid # 777777;" | [[ Файл : StarIconGold . png | 120 пикселей | Значок золотой звездочки ]] | style = "border: 1px solid # 22AA55;" | зеленоватая рамка -> [[ Файл : StarIconGreen . png | 120 пикселей | Значок зеленой звездочки ]] | - style = "text-align: center;" | Бронзовая звезда || Золотая звезда || Зеленая звезда | } |
|
Обратите внимание, здесь только ячейки изображения имеют отдельные границы, а не текст. Нижние шестнадцатеричные цвета (например #616161
:) ближе к черному. Обычно все границы в таблице имеют один определенный цвет.
- Верхняя, правая, нижняя и левая границы ячейки
Чтобы установить левую, правую, нижнюю или верхнюю границу отдельной ячейки, можно использовать style='border-style:'
4 аргумента, каждый из которых - solid
или none
. Эти аргументы упорядочены в соответствии с описанным здесь шаблоном . Например, style='border-style: solid none solid none;'
где четыре параметра соответствуют соответственно
'border-style: top right bottom left;'
границы клетки. По причинам, описанным после этого примера, есть много способов изменить следующий код , которые не приведут к каким-либо изменениям в фактически отображаемой таблице .
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - | Top_Left ' стиль границы : верхний правый нижний левый ; ' -> | style = ' border-style : solid solid none none ; ' | Top_Center | Top_Right | - | style = 'стиль границы : нет ни одного твердого тела ; ' | Middle_Left | style = 'стиль границы : нет нет нет нет нет ; ' | Middle_Center | style = ' border-style : solid solid none none ; ' | Middle_Right | - | Bottom_Left | style = 'стиль границы : нет ни одного твердого тела ; ' | Bottom_Center | Bottom_Right | } |
|
Однако обратите внимание, что в следующей таблице ни одна из Middle_Center
границ центральной ячейки (т. Е.) Не удалена, несмотря на код style='border-style: none none none none;'
:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - | Top_Left || Top_Center || Top_Right | - | Middle_Left | style = 'стиль границы : нет нет нет нет нет ; ' | Middle_Center | Middle_Right | - | Bottom_Left || Bottom_Center || Bottom_Right | } |
|
Это происходит потому, что код class="wikitable"
помещает границу (верхнюю, правую, нижнюю и левую) вокруг каждой ячейки в таблице, так что, например, между ячейками «Middle_Center» и «Middle_Right» фактически есть две границы. Таким образом, чтобы удалить границу между ячейками «Middle_Center» и «Middle_Right», необходимо удалить как правую границу «Middle_Center», так и левую границу «Middle_Right»:
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - | Top_Left || Top_Center || Top_Right | - | Middle_Left ' стиль границы : верхний правый нижний левый ; ' -> | style = 'стиль границы : нет нет нет нет нет ; ' | Middle_Center | style = 'стиль границы : нет нет нет нет нет ; ' | Middle_Right В с выше линией, то три левых большинство «NONE» аргументы может быть заменен с «твердым» (или другими действительными аргументами) и там не было бы не изменить к в таблицу , которая будет отображаться. Только четвёртый аргумент, который является Middle_Right в левых границах, необходимо , чтобы быть «никто». Для примера, линия выше может быть заменена с : | style = 'border-style: solid solid solid none;' стиль границы: твердый твердый твердый нет; | Среднее_право -> | - | Bottom_Left || Bottom_Center || Bottom_Right | } |
|
Обратите внимание, что замена {| class="wikitable"
на
{| style="border-collapse: collapse;"
имеет эффект удаления всех границ ячеек, которые в противном случае появлялись бы по умолчанию вокруг каждой ячейки в таблице. С этим изменением, вы должны вставить в единую границе ячейки между двумя соседними ячейками , а не удалить две границы ячейки.
Рядовые операции
Высота
Граница
Выравнивание
Индексирование
Колоночные операции
Установка ширины столбца
Чтобы установить ширину столбца в соответствии с конкретными требованиями, а не принимать ширину самого широкого текстового элемента в ячейках столбца, следуйте этому примеру. Обратите внимание, что перенос текста выполняется принудительно.
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - ! scope = "col" style = " width : 50 px ; " | Имя ! scope = "col" style = " width : 250 px ; " | Эффект ! scope = "col" style = " минимальная ширина : 225 пикселей ; максимальная ширина : 300 пикселей ; " | Игры найдены в | - | Тыкать Болл || Регулярный тыкать Болл || Все версии | - | Большой бал || Лучше , чем в ткнуть Болл || Все версии | } |
|
Чтобы установить ширину столбцов в таблице без заголовков, укажите ширину в первой ячейке для каждого столбца.
Разметка вики:
{| class = "wikitable"| -| style = "width: 100pt;" | Ширина этого столбца составляет 100 пунктов.| style = "width: 200pt;" | Ширина этого столбца составляет 200 пунктов.| style = "width: 300pt;" | Ширина этого столбца 300 пунктов.| -| бла || blih || блух|}
Ширина этого столбца составляет 100 пунктов. | Ширина этого столбца составляет 200 пунктов. | Ширина этого столбца 300 пунктов. |
бла | бли | блух |
Вы также можете использовать проценты, например, чтобы уравнять ширину двухколоночной таблицы, установив для одного из них значение style="width: 50%;"
.
Одно из применений установки ширины - это выравнивание столбцов следующих друг за другом таблиц. Ниже приведены отдельные таблицы со значениями столбцов 350 и 225 пикселей. Предупреждение. Установка определенных размеров в пикселях не рекомендуется, поскольку это мешает браузеру настраивать контент в соответствии с окном браузера, размером устройства, ограничениями размера шрифта на стороне пользователя и другими ограничениями. Настоятельно рекомендуется использовать относительные размеры в процентах или значениях em .
Страна | Столица |
---|---|
Нидерланды | Амстердам |
Страна | Столица |
---|---|
Франция | Париж |
Nowrap
В таблице, занимающей всю ширину страницы, ячейки, более узкие, чем самая широкая ячейка, имеют тенденцию к переносу. Чтобы не допустить переноса всего столбца, используйте style="white-space: nowrap;"
ячейку без заголовка в самой длинной / самой широкой ячейке, чтобы повлиять на весь столбец.
Без nowrap
, как в браузере:
{| class = "wikitable sortable"| -! scope = "col" | Эпизод ! scope = "col" | Дата ! scope = "col" | Резюме| -| «Путешествие начинается»| 1 января 2010 г.| [[ Lorem ipsum ]] dolor sit amet, [...] | -| "Когда эпизоды атакуют"| 8 января 2010 г.| Lorem ipsum dolor sit amet, [...]| -| "Пока"| 15 января 2010 г.| Lorem ipsum dolor sit amet, [...]|}
Эпизод | Дата | Резюме |
---|---|---|
«Путешествие начинается» | 1 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
"Когда эпизоды атакуют" | 8 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
"Пока" | 15 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
С помощью nowrap
в столбцах «Эпизод» и «Дата», как они отображаются в браузере:
{| class = "wikitable sortable"| -! scope = "col" | Эпизод ! scope = "col" | Дата ! scope = "col" | Резюме| -| «Путешествие начинается»| 1 января 2010 г.| [[ Lorem ipsum ]] dolor sit amet, [...] | -| style = "white-space: nowrap;" | "Когда эпизоды атакуют"| 8 января 2010 г.| Lorem ipsum dolor sit amet, [...]| -| "Пока"| style = "white-space: nowrap;" | 15 января 2010 г.| Lorem ipsum dolor sit amet, [...]|}
Эпизод | Дата | Резюме |
---|---|---|
«Путешествие начинается» | 1 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
"Когда эпизоды атакуют" | 8 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
"Пока" | 15 января 2010 г. | Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. |
Всплывающие подсказки
Вы можете добавлять всплывающие подсказки к столбцам с помощью шаблона {{ H: title }}. Просто замените заголовок столбца на {{H:title|The tool tip|Column title}}
, чтобы он выглядел так: Заголовок столбца .
Более сложные примеры
Меланж
Примечание. Этот пример недоступен , и его следует по возможности избегать. Например, вложенные таблицы (таблицы внутри таблиц) по возможности следует разделять на отдельные таблицы.
Вот более сложный пример, показывающий еще несколько вариантов, доступных для составления таблиц.
Пользователи могут поиграть с этими настройками в своей таблице, чтобы увидеть, какой эффект они оказывают. Не все из этих методов могут быть подходящими во всех случаях; То, что, например, можно добавить цветной фон, не означает, что это всегда хорошая идея. Постарайтесь, чтобы разметка в таблицах была относительно простой - помните, что статью будут редактировать и другие люди! Однако этот пример должен дать представление о том, что возможно.
Разметка вики:
Текст перед центрированной таблицей ...{| style = "граница: сплошной черный 1px; интервал границы: 0; маржа: 1em auto;"| + '' ' Примерная таблица ' ''| -! style = "border: 1px сплошной черный; отступ: 5px; фон: #efefef;" | Первый заголовок! colspan = "2" style = "border: 1px сплошной черный; padding: 5px; background: #ffdead;" | Второй заголовок| -| style = "border: 1px сплошной черный; padding: 5px;" | Верхний левый| style = "border: 1px сплошной черный; padding: 5px;" | Выше среднего| rowspan = "2" style = "border: 1px сплошной черный; border-bottom: 3px сплошной серый; padding: 5px; vertical-align: top;" |Правая сторона| -| style = "border: 1px сплошной черный; border-bottom: 3px сплошной серый; padding: 5px;" | Нижний левый| style = "border: 1px сплошной черный; border-bottom: 3px сплошной серый; padding: 5px;" | Нижняя середина| -| colspan = "3" style = "border: 1px сплошной черный; text-align: center;" |Текст перед вложенной таблицей ...{|| + '' Таблица в таблице ''| -| style = "выравнивание текста: центр; ширина: 150 пикселей;" | [[Файл: Wiki.png]]
| style = "выравнивание текста: центр; ширина: 150 пикселей;" | [[Файл: Wiki.png]]| -| colspan = "2" style = "text-align: center; border-top: 1px сплошной красный; < ! - -> border-right: сплошной красный 1px; border-bottom: 2 пикселя, сплошной красный; < ! - -> border-left: сплошной красный 1px; "|Два логотипа Википедии|}... текст после вложенной таблицы|}... текст после центрированной таблицы
Как это отображается в браузере:
Текст перед центрированной таблицей ...
Первый заголовок | Второй заголовок | |||||
---|---|---|---|---|---|---|
Верхний левый | Выше среднего | Правая сторона | ||||
Нижний левый | Нижняя середина | |||||
Текст перед вложенной таблицей ...
... текст после вложенной таблицы |
... текст после центрированной таблицы
Плавающие изображения в центре
Таблицу можно использовать для обтекания изображения, чтобы таблица могла плавать по направлению к центру страницы (например, используя:) style="float: right;"
. Однако поля таблицы, границы и размер шрифта должны быть точно установлены, чтобы соответствовать типичному отображению изображения. Параметр File-spec |thumb
(несмотря на автоматическое создание миниатюр по ширине, заданной пользователем) устанавливает широкое левое поле, которое сжимает ближайший текст, поэтому параметр |center
может быть добавлен для подавления заполнения левого поля. Однако |center
иногда заголовок |thumb
помещается во вторую строку (под центрированным прямоугольником «[]»), поэтому его можно опустить и просто жестко указать размер изображения, добавив серую (#BBB) границу. Используя точные параметры для сопоставления с другими изображениями, таблицу плавающих изображений можно закодировать следующим образом:
{| style = "float: right; border: 1px solid #BBB; margin: .46em 0 0 .2em;"| - style = "font-size: 86%;"| style = "vertical-align: top;" | [[ Файл: DuraEuropos-TempleOfBel.jpg | 180px ]] ->
Храм [[ Бэла (мифология) | Бел ]] (плавающий)|}
Размер текста внутри плавающей таблицы составляет style="font-size: 86%;"
. Эта таблица с плавающим изображением перемещает типичный блок изображения, но позволяет регулировать левое поле изображения (см. Пример плавающего храма ниже).
Информационное окно А | |
---|---|
В этом образце информационного окна показано, как блок плавающего изображения выравнивается по направлению к центру. |
Храм Бэла (плавучий) |
Текст заголовка можно опустить или удалить параметр thumb | так что заголовок скрыт до "отображения наведения указателя мыши". К сожалению, этот параметр |thumb
(используемый для отображения подписи) также управляет автоматическим уменьшением изображения для изменения размера изображений в соответствии с размером, заданным пользователем. Чтобы автоматически изменять размер миниатюр при одновременном скрытии подписи, используйте |frameless|right
вместо |thumb
.
Изображение, установленное с параметром, |left
имеет широкое правое поле (противоположное поле параметра |right
), поэтому перемещение влево может быть достигнуто с изображением, установленным |center
внутри таблицы с style = "float: left; margin: 0.46em 0.2em; ".
Напомним, что вне таблицы изображений параметр |right
заставляет изображение выравниваться (либо) над или под информационным окном, но не перемещается рядом с информационным окном.
Обратите внимание на порядок приоритета : сначала используются информационные окна или изображения |right
, затем идут плавающие таблицы и, наконец, любые текстовые обертки, которые еще могут уместиться. Если первое слово текста слишком длинное, никакой текст не уместится для заполнения левой части, поэтому будьте осторожны, создавая «рваное левое поле», когда недостаточно места для текста, чтобы поместиться рядом с плавающими таблицами.
Если несколько таблиц с одним изображением складываются в стопку, они перемещаются для выравнивания по странице в зависимости от ширины страницы. Текст сжимается, позволяя разместить столько плавающих таблиц, сколько может поместиться, автоматически выравнивается, а затем переносится любой текст, который еще может поместиться, с левой стороны.
... поплавком: вправо |
... перенос изображений ... |
Все эти... |
Эту функцию автоматического выравнивания можно использовать для создания «плавающей галереи» изображений: набор из 20 плавающих таблиц переносится (в обратном направлении, справа налево), как если бы каждая таблица была словом текста для переноса по страница. Чтобы выполнить перенос в обычном направлении (слева направо), вместо этого определите все эти плавающие таблицы как таблицы с левой стороны, используя параметр top style="float:left; margin:0.46em 0.2em;"
. Несколько плавающих изображений позволяют более гибко набирать изображения вокруг текста.
Совместное использование COLSPAN и ROWSPAN
Источник вики | Оформленный результат | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable"| -! Колонка 1 !! Колонка 2 !! Колонка 3| -| rowspan = "2" | А| colspan = "2" style = "text-align: center;" | B| -| C| D| -| E| rowspan = "2" colspan = "2" style = "text-align: center;" | F| -| грамм| -| colspan = "3" style = "text-align: center;" | ЧАС|} |
|
Обратите внимание, что использование rowspan="2"
для ячейки G в сочетании с rowspan="3"
для ячейки F, чтобы получить другую строку ниже G и F , не сработает, потому что все (неявные) ячейки будут пустыми. Точно так же полные столбцы не отображаются, если все их ячейки пусты. Границы между непустыми и пустыми ячейками также могут не отображаться (в зависимости от браузера), используйте
для заполнения пустой ячейки фиктивным содержимым.
Ниже приведена та же таблица с указанием порядка объявленных строк и ячеек в скобках. Также показаны используемые rowspan
и colspan
.
Столбец 1 (строка 1 ячейка 1) | Столбец 2 (строка 1 ячейка 2) | Столбец 3 (строка 1 ячейка 3) |
---|---|---|
A (строка 2 ячейка 1) rowspan="2" | B (строка 2 ячейка 2) colspan="2" | |
C (строка 3 ячейка 1) | D (строка 3 ячейка 2) | |
E (строка 4 ячейка 1) | F (строка 4 ячейка 2) rowspan="2" colspan="2" | |
G (строка 5 ячейка 1) | ||
H (строка 6 ячейка 1) colspan="3" |
Обратите внимание, что хотя ячейка C находится в столбце 2, C является первой ячейкой, объявленной в строке 3, потому что столбец 1 занят ячейкой A , которая была объявлена в строке 2. Ячейка G - единственная ячейка, объявленная в строке 5, потому что ячейка F занимает другие столбцы, но был объявлен в строке 4.
Обходные пути
Выравнивание десятичной точки
К сожалению, единственный способ выровнять столбцы чисел по десятичной запятой - использовать два столбца, первый из которых выровнен по правому краю, а второй по левому краю.
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{ | 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 = " выравнивание текста : слева ; граница слева : нет ; отступ слева : 0 ; " | .1 | - | style = " text-align : right ; border-right : none ; padding-right : 0 ; " | 43 | style = " выравнивание текста : слева ; граница слева : нет ; отступ слева : 0 ; " | .21 | - | style = " text-align : right ; border-right : none ; padding-right : 0 ; " | 4 | style = " выравнивание текста : слева ; граница слева : нет ; отступ слева : 0 ; " | .321 | } |
|
Или же можно использовать шаблон {{ decimal cell }}:
Источник вики | Оформленный результат | ||||||||
---|---|---|---|---|---|---|---|---|---|
{ | class = "wikitable" ! colspan = 2 | Заголовок | - | {{десятичная ячейка | 432.1 } } | - | { {десятичная ячейка | 43.21 } } | - | { {десятичная ячейка | 4.321 } } | } |
|
Недостаток такого использования двух столбцов заключается в том, что поиск на веб-странице (с помощью браузера или поисковой системы) обычно не может найти текст, выходящий за границу столбца.
Кроме того, если в таблице есть интервал между ячейками (и, следовательно, border-collapse=separate
), что означает, что ячейки имеют отдельные границы с промежутком между ними, этот промежуток все равно будет виден.
Более грубый способ выровнять столбцы чисел - использовать пространство цифр
, которое должно быть шириной числа, хотя на практике зависит от шрифта:
Источник вики | Оформленный результат | |||
---|---|---|---|---|
{ | | 432,1 | - | & amp ; # 8199 ; 43.21 | - | & amp ; # 8199 ; & amp ; # 8199 ; 4.321 | } |
|
Другие компаньоны в этой строке: пробел пунктуации (
) для замены точки или запятой −
вместо легко доступного на клавиатуре пишущей машинки дефиса-тире - это такая же ширина, как у знака плюс, а также тире с цифрами, возможно, наиболее полезно для телефонные номера, которых вы явно не найдете в Википедии.
При использовании шрифтов OpenType также можно чередовать и - это особенно заметно в кернинге арабской цифры ⟨1⟩. В стандартном браузере шрифты без засечек «1» занимают ту же ширину, что и другие цифры, т.е. работает как если бы был включен.font-variant-numeric:tabular-nums
font-variant-numeric:proportional-nums
font-variant-numerals:tabular-nums
Некоторым может оказаться полезным {{ 0 }} для выравнивания.
В крайнем случае, при использовании предварительно отформатированного текста вы можете полностью отказаться от функции таблицы и просто начинать строки с пробела и помещать пробелы для размещения чисел, однако должна быть веская причина для использования предварительно отформатированного текста. текст в статье:
Источник вики (просто пробелы!): | Оформленный результат |
---|---|
432 . 1 43 . 21 4 . 321 | 432,1 43,21 4,321 |
Непрямоугольные столы
{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}}
может использоваться для разделения ячейки заголовка по диагонали, как в верхней левой ячейке ниже: [примечание 3]
Источник вики | Оформленный результат | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" ! {{заголовок с разделением по диагонали | От | До}} ! Твердый !! Жидкость !! Газ| -! Твердый| Преобразование твердое тело в твердое тело || Плавление || Сублимация| -! Жидкость| Замораживание || {{ sdash }} || Кипячение / испарение| -! Газ| Осаждение || Конденсация || {{ sdash }}|} |
|
Границы ячеек можно скрыть, добавив border: none; background: none;
к атрибутам стиля таблицы или ячейки (может не работать в старых браузерах). Другое использование - реализация таблиц с выравниванием по многим столбцам.
Источник вики | Оформленный результат | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "border: none; background: none;"! colspan = "2" rowspan = "2" style = "border: none; background: none;" | [[File: Pfeil_SO.svg | none | link = | 20px]] ! colspan = "3" | К| -! Твердый !! Жидкость !! Газ| -! rowspan = "3" | От ! Твердый| Преобразование твердое тело в твердое тело || Плавление || Сублимация| -! Жидкость| Замораживание || {{ sdash }} || Кипячение / испарение| -! Газ| Осаждение || Конденсация || {{ sdash }}|} |
|
Обратите внимание, что удаление ссылки с изображения зависит от того, является ли оно чисто декоративным (так как вспомогательные устройства игнорируют его) .
Источник вики | Оформленный результат | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "border: none; background: none;"! scope = "col" | Год ! scope = "col" | Размер| rowspan = "5" style = "border: none; background: none;" |! scope = "col" | Год ! scope = "col" | Размер| rowspan = "5" style = "border: none; background: none;" |! scope = "col" | Год ! scope = "col" | Размер| -| 1990 || 1000 |
|
Центрирование
Классы
Помимо базового , описанного выше, существует несколько других классов CSS .class="wikitable"
В первой строке кода таблицы после {|
, вместо того, чтобы указывать стиль напрямую, вы также можете указать класс CSS, который может использоваться для применения стилей. Стиль для этого класса можно указать по-разному:
- в самом программном обеспечении для каждого скина (например, класс сортируемый )
- коллективно для всех пользователей одной вики в MediaWiki: Common.css (например, в этом и некоторых других проектах есть или был класс wikitable, позже перемещенный в shared.css )
- отдельно для каждого скина в MediaWiki: Monobook.css и т. д.
- индивидуально на одной вики на подстранице пользователя
- индивидуально, но совместно для таблиц соответствующего класса на всех веб-страницах на локальном компьютере пользователя.
Вместо того, чтобы запоминать параметры таблицы, вы просто включаете соответствующий класс после {|
. Это помогает поддерживать единообразие форматирования таблиц и может позволить одно изменение класса исправить проблему или улучшить внешний вид всех таблиц, которые его используют одновременно. Например, это:
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | стиль = " границы интервал : 2 точек ; " | + Умножение стол | - ! scope = "col" | & раз ; ! scope = "col" | 1 ! scope = "col" | 2 ! scope = "col" | 3 | - ! scope = "row" | 1 | 1 || 2 || 3 | - ! scope = "row" | 2 | 2 || 4 || 6 | - ! scope = "row" | 3 | 3 || 6 || 9 | - ! scope = "row" | 4 | 4 || 8 || 12 | - ! scope = "row" | 5 | 5 || 10 || 15 | } |
|
становится это:
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | класс = "wikitable" | + Умножение стол | - ! scope = "col" | & раз ; ! scope = "col" | 1 ! scope = "col" | 2 ! scope = "col" | 3 | - ! scope = "row" | 1 | 1 || 2 || 3 | - ! scope = "row" | 2 | 2 || 4 || 6 | - ! scope = "row" | 3 | 3 || 6 || 9 | - ! scope = "row" | 4 | 4 || 8 || 12 | - ! scope = "row" | 5 | 5 || 10 || 15 | } |
|
просто заменив встроенный CSS для таблицы на class="wikitable"
. Это связано с тем, что wikitable
класс в MediaWiki: Common.css содержит ряд table.wikitable
правил стиля CSS. Все они применяются сразу, когда вы помечаете таблицу классом. Затем при желании можно добавить дополнительные правила стиля. Они переопределяют правила класса, позволяя использовать стиль класса в качестве основы и строить на нем:
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{ | класс = "wikitable" стиль = " стиль шрифта : курсив , размер шрифта : 120 % ; граница : 3 точек пунктирной красный ; " | + Умножение стол | - * ! scope = "col" | & раз ; ! scope = "col" | 1 ! scope = "col" | 2 ! scope = "col" | 3 | - ! scope = "row" | 1 | 1 || 2 || 3 | - ! scope = "row" | 2 | 2 || 4 || 6 | - ! scope = "row" | 3 | 3 || 6 || 9 | - ! scope = "row" | 4 | 4 || 8 || 12 | - ! scope = "row" | 5 | 5 || 10 || 15 | } |
|
Обратите внимание, что таблица сохраняет серый фон wikitable
класса, а заголовки по-прежнему выделены жирным шрифтом и центрированы. Но теперь форматирование текста было отменено локальным style=
оператором; весь текст в таблице выделен курсивом и имеет нормальный размер 120%, а граница для википедии заменена красной пунктирной рамкой.
Разборные столы
Классы также можно использовать для сворачивания таблиц, поэтому по умолчанию они скрыты. Используйте класс, mw-collapsible
чтобы включить сворачивание. Сворачиваемые таблицы тоже можно сортировать, включив sortable
класс . По умолчанию сворачиваемая таблица начинает разворачиваться. Чтобы изменить это, добавьте дополнительный класс mw-collapsed
. В качестве альтернативы вы можете добавить autocollapse
вместо mw-collapsed
, который будет автоматически сворачивать таблицу, если на странице присутствуют два или более сворачиваемых элемента.
Примечание . Предыдущие версии этой статьи рекомендовали этот collapsible
класс, но mw-collapsible
теперь он предпочтительнее. Это функция программного обеспечения MediaWiki, а не локальная настройка, и с ее помощью можно сделать сворачиваемыми любые элементы, а не только таблицы. mw-collapsible
также не требует строки заголовка в таблице, как collapsible
это было. Таблицы будут отображать элементы управления «[скрыть]» / «[показать]» в первой строке таблицы (независимо от того, является ли это строкой заголовка), если не присутствует заголовок таблицы.
Пример:
Источник вики | Оформленный результат | |||
---|---|---|---|---|
{ | class = "wikitable mw-collapsible autocollapse" | - ! Заголовок | - | Контент, который начинается скрытым | - | больше скрытого контента | } |
|
Без строки заголовка
Источник вики | Оформленный результат | ||
---|---|---|---|
{| class = "wikitable sortable mw-collapsible" |
|
Источник вики | Оформленный результат | ||||
---|---|---|---|---|---|
{| class = "wikitable sortable mw-collapsible mw-collapsed" |
|
Таблицы с подписями сворачиваются до заголовка таблицы. Используйте {{ nowrap }}, чтобы заголовок не помещался в крошечный вертикальный столбец, когда таблица свернута.
Источник вики | Оформленный результат | |||
---|---|---|---|---|
{| class = "wikitable sortable mw-collapsible"| + {{nowrap | Довольно длинная подпись к таблице}} |
|
Источник вики | Оформленный результат | |||
---|---|---|---|---|
{| class = "wikitable sortable mw-collapsible mw-collapsed"| + {{nowrap | Довольно длинная подпись к таблице}} |
|
Сортируемые таблицы
Таблицы можно сделать сортированными, добавив CSS sortable
; подробнее см. Справка: Сортировка . Поскольку это может быть очень полезно, при проектировании таблицы разумно помнить о возможностях и ограничениях этой функции. Например:
- Не делите таблицу на разделы по подзаголовкам, занимающим несколько строк. Вместо этого можно сделать дополнительный столбец, показывающий содержимое этих заголовков в каждой строке в краткой форме.
- В столбце с цифрами не помещайте текст, например "ca". или "ок." до или после числа - это нарушит числовую сортировку. Не помещайте текст или буквы алфавита в ячейки столбца, подлежащего числовой сортировке. Старайтесь не помещать диапазон чисел (это не влияет на позицию сортировки для числового режима сортировки, а в случае диапазона первое число определяет позицию, но если, возможно, после сортировки того или другого столбца элемент вверху - режим сортировки по алфавиту). Вместо этого используйте «значение сортировки данных», чтобы переопределить отображаемое содержимое в отношении его возможности сортировки для этого элемента.
Длинную форму сокращенного содержания можно поместить в качестве легенды за пределами таблицы.
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable sortable"| + Сортируемый стол| -! scope = "col" | По алфавиту! scope = "col" | Числовой! scope = "col" | Дата! scope = "col" class = "unsortable" | Несортированный| -| d || 20 || 2008-11-24 || Этот| -| б || 8 || 2004-03-01 || столбец| -| а || 6 || 1979-07-23 || не могу| -| c || 4 || 1492-12-08 || быть| -| е || 0 || 1601-08-13 || отсортировано.|} |
|
Числовые и годовые задачи сортировки
Сортировка и сворачивание
Можно свернуть сортируемую таблицу. Для этого вам нужно использовать код . Взяв приведенную выше таблицу и сделав ее разборной, вы получите следующее:{| class="wikitable sortable mw-collapsible"
Источник вики | Оформленный результат | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable sortable mw-collapsible"| + {{nowrap | Сортируемая и сворачиваемая таблица}}| -! scope = "col" | По алфавиту! scope = "col" | Числовой! scope = "col" | Дата! scope = "col" class = "unsortable" | Несортированный| -| d || 20 || 2008-11-24 || Этот| -| б || 8 || 2004-03-01 || столбец| -| а || 6 || 1979-07-23 || не могу| -| c || 4.2 || 1492-12-08 || быть| -| е || 0 || 1601-08-13 || отсортировано.|} |
|
Если вы хотите, чтобы таблица по умолчанию находилась в свернутом состоянии, используйте код вместо .{| class="wikitable sortable mw-collapsible mw-collapsed"
{| class="wikitable sortable mw-collapsible"
mw-datatable - выделение строки при наведении курсора. белый фон
- Примечание:
class=mw-datatable
переопределяет цвет фона для строки, но не цвет фона для отдельных ячеек.
class=mw-datatable
позволяет выделять строки. Это упрощает отслеживание данных и информации в строке, особенно в более широких таблицах. Прокрутите курсор по таблицам mw-datatable ниже, чтобы увидеть голубую полосу в таблицах со значкомclass=mw-datatable
.
class=mw-datatable
создает белый фон для ячеек данных ; в то время как class="wikitable"
создает серый фон для ячеек данных.
{| class = "mw-datatable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} производит:
| {| class = "wikitable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} производит:
|
Его можно использовать в сочетании с классом wikitable
для более похожего стиля и заполнения ячеек, при этом позволяя выделять строки при наведении курсора.
Источник вики | Оформленный результат | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable mw-datatable"| -! 1 !! 2 !! 3| -| 1-1 || 2-1 || 3-1| -| 1-2 || 2-2 || 3-2|} |
|
Ячейки, охватывающие несколько строк или столбцов
Можно создавать ячейки, занимающие два или более столбца. Для этого используется . Точно так же можно создавать ячейки, занимающие две или более строк. Для этого требуется . В коде таблицы необходимо исключить ячейки, которые покрываются таким промежутком . Результирующий подсчет столбцов и строк должен соответствовать.|colspan=n | content
|rowspan=m | content
Источник вики | Оформленный результат | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable" style = "text-align: center;"! col1! col2! col3! col4| -! row1| colspan = "2" | А| C| -! row2| AA| BB| CC| -! row3| AAA| rowspan = "2" | BBB| CCC| -! row4| AAAA| СССС|} |
|
В коде ячейка | colspan="2" | A
занимает два столбца. Обратите внимание, что в следующем столбце ячейки, которая должна содержать «B», не существует .
Аналогично: в коде ячейка | rowspan="2" | BBB
занимает две строки. Ячейка, которая должна содержать «BBBB», не существует .
Ссылка на раздел или ссылка на карту с привязкой строки
Чтобы включить ссылку раздела «ы якорь (или ссылку на карту » ы якорь), ссылки на конкретную строку в столике, потребности параметров , которые будут добавлены в начало строки или :id="section link anchor name"
|-
|- id="section link anchor name"
section link anchor name">
Обратите внимание, что каждое имя привязки ссылки на раздел должно отличаться от любого другого на странице (включая имена заголовков), чтобы создать действительный XHTML и обеспечить правильное связывание.
- Пример ссылки карты на строку
Когда метка страны, содержащая ссылку, нажата на карте, ссылка, закодированная, например, как [[#Table row 11|Slovenia]]
ссылка на привязку (в таблице), закодированная как |- id="Table row 11"
, заставляет страницу прокручиваться, так что выбранная строка таблицы находится наверху просмотра в браузере. Здесь мы используем семейство шаблонов , и выложить такую таблицу для нас:{{Image label begin}}
{{Image label small}}
{{Image label end}}
|
|
Шаблон строки
Независимо от того, используется ли вики-формат или HTML, вики-текст строк в таблице, а иногда даже в коллекции таблиц может иметь много общего, например:
- базовый код для строки таблицы
- код для режима цвета, выравнивания и сортировки
- фиксированные тексты, такие как единицы
- специальные форматы для сортировки
В таком случае может быть полезно создать шаблон, который создает синтаксис для строки таблицы с данными в качестве параметров. У этого может быть много преимуществ:
- легко изменить порядок столбцов или удалить столбец
- легко добавить новый столбец, если многие элементы нового столбца оставлены пустыми (если столбец вставлен, а существующие поля не имеют имени, используйте именованный параметр для нового поля, чтобы избежать добавления пустых значений параметров во многие вызовы шаблонов)
- вычисление полей из других полей, например, плотности населения из населения и площади
- дублирование контента и предоставление тегов span с
display: none;
целью иметь один формат для сортировки и другой для отображения - простая установка формата для всего столбца, например цвета и выравнивания
Пример:
Использование m: Справка: таблица / пример шаблона строки ( обсуждение , обратные ссылки , редактирование )
Источник вики | Оформленный результат | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class = "wikitable sortable"| -! scope = "col" | а ! scope = "col" | б ! scope = "col" | а / б{{ Справка: таблица / пример шаблона строки | 50 | 200 }}{{ Справка: таблица / пример шаблона строки | 8 | 11 }}{{ Справка: Таблица / пример шаблона строки | 1000 | 81 }}|} |
|
Условная строка таблицы
Для условной строки в таблице мы можем иметь:
Источник вики | Оформленный результат | ||||
---|---|---|---|---|---|
{| class = "wikitable" {{#if: 1 | {{!}} - ! scope = "row" {{!}} первая строка, первый столбец {{!}} первая строка, второй столбец}} {{#if: | {{!}} - ! scope = "row" {{!}} строка вторая, столбец один {{!}} строка вторая, столбец два}} | - ! scope = "row" {{!}} третья строка, первый столбец | строка три, столбец два|} |
|
С комментариями, объясняющими, как это работает, где обратите внимание, как отсутствует вторая строка:
Источник вики | Оформленный результат | ||||
---|---|---|---|---|---|
{| class = "wikitable" Показана первая строка, потому что '1' оценивается как ИСТИНА. -> {{#if: 1 | {{!}} - ! scope = "row" {{!}} первая строка, первый столбец Любые {{!}} Оцениваются до символа вертикальной черты '|' поскольку шаблон '!' просто содержит "|". -> {{!}} первая строка, второй столбец}} Вторая строка НЕ отображается, потому что пробел между ':' и '|' оценивается как ЛОЖЬ. -> {{#if: | {{!}} - ! scope = "row" {{!}} строка вторая, столбец один {{!}} строка вторая, столбец два}} Показана третья строка. -> | - ! scope = "row" {{!}} третья строка, первый столбец | строка три, столбец два|} |
|
Другой синтаксис таблицы
MediaWiki поддерживает следующие типы синтаксиса таблиц:
|
Синтаксис викикода- HTML (и XHTML)
- Смешанный XHTML и викикод ( не использовать )
Все три поддерживаются MediaWiki и создают (в настоящее время) действительный HTML-вывод, но синтаксис конвейерной передачи самый простой. Смешанный |
синтаксис HTML и wikicode (т.е. незакрытые |
и |-
теги) не обязательно будет поддерживаться браузером в будущем, особенно на мобильных устройствах.
См. Также HTML-элемент # Таблицы . Однако следует отметить, что thead
, tbody
, tfoot
, colgroup
и col
элементы в настоящее время не поддерживается в MediaWiki , по состоянию на июль 2015 года[Обновить].
Сравнение синтаксиса таблиц
XHTML | Вики-трубка | |||||
---|---|---|---|---|---|---|
Таблица | | {| | ||||
Подпись | | |+ caption | ||||
Заголовочная ячейка |
| ! scope="col" | column header
| ||||
Строка | | |- | ||||
Ячейка данных |
| | cell1 || cell2 || cell3 или же | ||||
Атрибут ячейки | | | style="font-size: 87%;" | cell1 | ||||
Образец таблицы |
| |||||
< таблица > < tr > < td > 1 td > < td > 2 td > tr > < tr > < td > 3 td > < td > 4 td > tr > < / таблица > | {|| 1 || 2| -| 3 || 4|} | |||||
Плюсы |
|
| ||||
Минусы |
|
| ||||
XHTML | Вики-трубка |
Синтаксис конвейера с точки зрения созданного HTML
Синтаксис вертикальной черты, разработанный Магнусом Манске , заменяет |
символы вертикальной черты ( ) и другие символы HTML. Существует онлайн-скрипт , который преобразует таблицы HTML в таблицы синтаксиса конвейера.
Каналы должны начинаться в начале новой строки, за исключением случаев, когда параметры отделяются от содержимого или когда используются ||
для разделения ячеек в одной строке. Параметры необязательны.
Столы
Таблица определяется , который генерирует .{| parameters |}
params>...
Рядов
Для каждой таблицы создается
тег HTML для первой строки. Чтобы начать новую строку, используйте:
| -
который порождает другой
.
Параметры можно добавить так:
| - параметры
который генерирует .params>
Примечание:
теги автоматически открываются перед первым
эквивалентом
теги автоматически закрываются в другом
эквиваленте и вэквивалентном
Клетки
Ячейки генерируются либо так:
| cell1 | cell2 | cell3
или вот так:
| ячейка1 || cell2 || cell3
которые оба генерируют:
cell1
cell2 .
cell3
||
Равен новая строка + |
.
Параметры в ячейках можно использовать так:
| параметры | ячейка1 || параметры | cell2 || параметры | cell3
что приводит к:
params>cell1
params>cell2
params>cell3
Заголовки
Используемый код создает a
, функционирующий так же, как ...
, но с другим стилем и семантическим значением . ... !
Символ используется вместо того , чтобы отверстие |
, и !!
может быть использован как ||
, чтобы ввести несколько заголовков на одной и той же линии. Однако в параметрах по-прежнему используется символ "|". Пример:
! параметры | ячейка1
Субтитры
Создается
тег, который генерирует HTML .|+caption
Вы также можете использовать параметры: | + params | caption, который генерирует .
Шаблоны ячеек таблицы
{{ Шаблоны ячеек таблиц }} предоставляют набор шаблонов для настройки текста и цвета в ячейках стандартным способом, создавая стандартные выходные данные, такие как «Да», «Нет» и «Н / Д», на цветном фоне.
Вертикально ориентированные заголовки столбцов
Иногда желательно (например, в таблице, состоящей преимущественно из чисел) повернуть текст так, чтобы он шел сверху вниз или снизу вверх, а не слева направо или справа налево. Раньше поддержка браузером этого типа стилей в качестве компонента HTML или CSS была спорадической (Internet Explorer был одним из немногих браузеров, которые поддерживали это в каскадных таблицах стилей, хотя и нестандартным образом).
Заключите текст каждого заголовка в шаблон {{ вертикальный заголовок }}. Например:
! {{вертикальный заголовок | Дата / страница}}
Если в тексте есть знак равенства, замените его на {{=}}
.
05/08 | 4266 | 7828 | 7282 | 1105 | 224 | 161 | 916 | 506 | 231 |
---|---|---|---|---|---|---|---|---|---|
04/08 | 4127 | 6190 | 6487 | 1139 | 241 | 205 | 1165 | 478 | 301 |
Альтернативное решение, которое работает в большинстве, если не во всех браузерах, - использовать изображения вместо текста. Например, в следующей таблице используются изображения SVG вместо текста для создания повернутых заголовков столбцов:
05/08 | 4266 | 7828 | 7282 | 1105 | 224 | 161 | 916 | 506 | 231 |
---|---|---|---|---|---|---|---|---|---|
04/08 | 4127 | 6190 | 6487 | 1139 | 241 | 205 | 1165 | 478 | 301 |
Обычно одна проблема с этим подходом заключается в том, что читатели перенаправляются на разные страницы, когда они нажимают на изображения. Чтобы устранить эту проблему или направить читателей на другую страницу, вы можете использовать |link=
параметр File:
спецификации. Заголовок столбца можно закодировать следующим образом:
! [[Файл: wpvg vg project.svg | alt = VG: Project | link = '' 'Википедия: WikiProject Video games' '']]
Изображение вики-ссылки на страницу Wikipedia: WikiProject Video games .
Если установить ссылку на пустую строку (например [[File:wpvg hd date page.svg |link=]]
), навигация не происходит, когда посетители нажимают на изображение. Обратите внимание, что также может быть хорошей идеей покрасить текст изображения в синий цвет, если вы используете изображения в качестве ссылок. Кроме того, в этом случае предпочтительным форматом изображения является SVG, поскольку его можно масштабировать до любого размера, создавая при этом меньше артефактов.
Более серьезная потенциальная проблема заключается в том, что «повернутый текст» не является текстом, который может использоваться программами чтения с экрана и другими технологиями для пользователей с ослабленным зрением. Таким образом, эти пользователи не смогут «читать» заголовки столбцов. Кроме того, веб-сканеры автоматизированных поисковых систем также не смогут его прочитать. Это решается путем постоянного использования |alt=
параметра в File:
спецификации каждого изображения для предоставления того же текста, что и на повернутом изображении; см. |alt=VG: Project
в примере выше.
Википедия как галерея изображений
Вики-столик можно использовать для отображения расположенных рядом изображений аналогично галерее изображений (отформатированных
), но с изображениями большего размера и меньшим количеством свободного места вокруг фотографий.
Простую галерею в рамке можно отформатировать, используя class="wikitable"
для создания минимальных тонких линий вокруг изображений в таблице:
{| class = "wikitable" | - | [[ Файл: Worms 01.jpg | 130px ]] | [[ Файл: Worms Wappen 2005-05-27.jpg | 125px ]] | [[ Файл: статуя-свободы-с-манхэттеном.jpg | 125px ]] | [[ Файл: Нью-Йорк-Янв2005.jpg | 125px ]] | - | Мост Нибелунгов в Вормс | Черви и его города-побратимы | Статуя Свободы | Нью-Йорк |}
Мост Нибелунгов в Вормс | Черви и его города-побратимы | Статуя Свободы | Нью-Йорк |
Преимущество википедальных галерей изображений по сравнению с
форматированием заключается в возможности «квадратить» каждое изображение, когда требуются одинаковые высоты, поэтому рассмотрите возможность размещения двухзначных размеров изображений (например, 199x95px
), где второе число ограничивает высоту:
{| class = "wikitable" | [[ Файл: Worms 01.jpg | 199x95px ]] | [[ Файл: Worms Wappen 2005-05-27.jpg | 199x95px ]] | [[ Файл: статуя-свободы-с-манхэттеном.jpg | 199x95px ]] | [[ Файл: Нью-Йорк-Янв2005.jpg | 100x95px ]] | - | Мост Нибелунгов в Вормс | Черви и его города-побратимы | Статуя Свободы | Нью-Йорк |}
Обратите внимание, что три изображения имеют 199x95px
одинаковую высоту 95px
(четвертое изображение намеренно меньше). "95px" задает высоту, но 199x
соответствует разной ширине (может даже быть 999x
):
Мост Нибелунгов в Вормс | Черви и его города-побратимы | Статуя Свободы | Нью-Йорк |
Следовательно, использование размера 199x95px
(или 999x95px
или чего-то еще) приводит к автоматическому изменению размера по высоте за пределами
тега и с возможностью установки более высоких эскизов ( 199x105px
) или даже для того, чтобы некоторые изображения были намеренно меньше, чем другие изображения с 95px
высотой. Очень небольшая высота (например 70px
) позволяет размещать на столе гораздо больше изображений:
{| class = "wikitable" | - | [[ Файл: Worms 01.jpg | 199x70px ]] | [[ Файл: Золотая звезда на blue.gif | 199x70px ]] | [[ Файл: Worms Wappen 2005-05-27.jpg | 199x70px ]] | [[ Файл: Золотая звезда на глубоком красном.gif | 199x70px ]] | [[ Файл: статуя-свободы-с-манхэттеном.jpg | 199x70px ]] | [[ Файл: Золотая звезда на blue.gif | 199x70px ]] | [[ Файл: Нью-Йорк-Янв2005.jpg | 199x70px ]] такая же высота -> | - |}
Вышеупомянутое wikitable-coding дает результат из 7 столбцов:
После того, как изображения были помещены в вики-таблицу, управление форматированием может быть изменено при добавлении дополнительных изображений.
Сдвиг / центрирование
Изображения в вики-таблице можно сдвигать, вставляя неразрывные пробелы (
) до или после кода изображения (например, [[Image:...]]
) . Однако для автоцентрирования просто требуется использование |center
параметра (см. WP: Расширенный синтаксис изображения # Местоположение ).
В приведенном ниже примере обратите внимание на то, как Col2 использует |center
, но Col3 использует
:
{| class = "wikitable" | - | [[Файл: Domtoren vanaf Brigittenstraat.jpg | 299x125px]] | [[Файл: Utrecht 003.jpg | 299x125px | центр ]] | & nbsp; [[Файл: Uitzicht - Domtoren.jpg | 299x125px]] & nbsp; | - | Домская башня со стороны Бригиттенстраат | Монастырский двор Утрехтской Домской церкви | & nbsp; & nbsp; Вид с колокольни |}
Приведенная выше кодировка генерирует таблицу ниже: обратите внимание, что среднее изображение сада центрировано (но не левое изображение), а правое изображение имеет 2 пробела перед "View ...", чтобы дать приблизительное центрирование:
Башня Дом на улице Бригиттенстраат | Монастырский двор Утрехтской Домской церкви | Вид с колокольни |
Также обратите внимание, что тег ...
сделал заголовок меньшего размера текста. Шрифты также могут иметь размер в процентах ( style="font-size: 87%;"
), где точный процентный размер, отображаемый на экране, зависит от различных размеров, разрешенных для конкретного шрифта; браузер приблизится к ближайшему возможному размеру.
| style = "размер шрифта: 87%;" | Вид с колокольни
Атрибут столбца, приведенный выше, используется style=
для установки размера шрифта заголовка после второго символа вертикальной черты.
A font-size: 65%;
слишком мелкий, а font-size: 87%;
шрифт среднего размера, немного больше, чем тот, который создается тегом .
Отступы в таблицах
В то время как таблицы обычно не должны иметь отступ, когда окружающие их абзацы также имеют отступ, вы можете сделать отступ в таблицах, используя один или несколько двоеточий (" :
", обычный код отступа ) в начале строки, так же, как если бы вы делали отступ для любых других вики-контент.
Обратите внимание, что отступ, применяемый только к первой строке определения таблицы (строка, начинающаяся с " {|
"), достаточен для отступа всей таблицы. Не пытайтесь использовать двоеточия для отступа где-либо в остальной части кода таблицы (даже в начале строки), так как это помешает программному обеспечению MediaWiki правильно прочитать код таблицы.
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
: { | class = "wikitable" | - ! Заголовок 1 ! Заголовок 2 | - | строка 1, ячейка 1 | строка 1, ячейка 2 | - | строка 2, ячейка 1 | строка 2, ячейка 2 | } |
|
Та же таблица без отступов будет такой:
Источник вики | Оформленный результат | ||||||
---|---|---|---|---|---|---|---|
{ | class = "wikitable" | - ! Заголовок 1 ! Заголовок 2 | - | строка 1, ячейка 1 | строка 1, ячейка 2 | - | строка 2, ячейка 1 | строка 2, ячейка 2 | } |
|
Добавление флагов и связывание названий стран в списках стран
- Это быстро. Работает с викитекстом компактных или длинных таблиц. Одинарные или двойные перемычки между ячейками.
- Примечание. Пользователь: PrimeHunter ( Обсуждение ) предоставил код. Обратитесь к нему за помощью.
- Примечание. В настройках редактирования установите флажок «включить панель инструментов редактирования. Иногда ее называют редактором вики-текста 2010».
Убедитесь, что страны, штаты, провинции или города и т. Д. Находятся в первом столбце. Регулярное выражение оборачивает весь текст в первой ячейке каждой строки с шаблоном. Так что сделайте это, прежде чем добавлять какие-либо стили в первый столбец.{{flaglist}}
{{flaglist|Country name}}
Щелкните ссылку для редактирования источника вики-текста. Щелкните «Дополнительно» на панели инструментов редактирования. Затем нажмите на значок поиска и замены справа. Установите флажок «Считать строку поиска регулярным выражением». Заполните поле «Искать»: Заполните поле «заменить на»: Затем нажмите «Заменить все». Почти все страны будут связаны и будут иметь флаги.(\|-.*\n\|\s*)([^\|\n]*)
$1{{flaglist|$2}}
Для красных ссылок при необходимости создайте переадресацию на правильные шаблоны данных страны . Постоянно сохраните эту исходную таблицу в изолированной программной среде пользователя, не перезаписывая ее. Это сделано для того, чтобы перенаправления сохранялись из-за того, что они используются на этой странице песочницы. В противном случае администраторы удалят неиспользуемые перенаправления, и вам придется выполнять эту утомительную, трудоемкую задачу перенаправления каждый раз, когда вы полностью обновляете таблицу. В сводке редактирования таких перенаправлений добавьте что-то вроде этого: «Пожалуйста, не удаляйте это перенаправление. Иногда оно используется в обновлениях [[NAME OF ARTICLE WITH TABLE]]
.»
Выравнивание данных в столбцах данных по правому краю
|
|
Если большинство столбцов состоит из ячеек данных, вы можете выбрать выравнивание данных по правому краю. Это просто. Просто добавьте style=text-align:right
в верхнюю строку викитекста таблицы:
{| class=wikitable style=text-align:right
или же
{| class="wikitable sortable mw-datatable" style=text-align:right
и так далее.
Выравнивание текста в первом столбце по левому краю
Это можно сделать в редакторе исходного текста вики-текста. В настройках редактирования установите флажок: «включить панель инструментов редактирования. Иногда ее называют редактором вики-текста 2010 года».
В разделе таблицы нажмите «редактировать источник» (редактирование вики-текста). Щелкните «Дополнительно» на панели инструментов редактирования. Затем нажмите на значок поиска и замены справа. Во всплывающей форме установите флажок «Считать строку поиска регулярным выражением».
Заполните поле «Искать» с помощью (\|-\n\|)
. В поле "заменить на" введите
$1style=text-align:left|
Затем нажмите «Заменить все». Весь текст в первом столбце будет выровнен по левому краю их ячеек.
Если по какой-то причине эти ячейки являются ячейками заголовка, заполните поле «Искать» значком (\|-\n\!)
. Обратите внимание на восклицательный знак в ячейке заголовка. В поле "заменить на" введите
$1style=text-align:left|
.
Затем нажмите «Заменить все».
Преобразование электронных таблиц и таблиц базы данных в вики-формат
- См. Также раздел «Визуальный редактор» ниже и информацию о таблице.
Для преобразования из электронных таблиц (например, созданных в Gnumeric , Microsoft Excel или LibreOffice / OpenOffice.org / StarOffice Calc) вы можете использовать конвертер Copy & Paste Excel-to-Wiki или генератор таблиц MediaWiki .
Вы можете сохранять таблицы в формате .csv и использовать конвертер CSV в Wikitable . Другая версия здесь .
CSV Преобразователь преобразует запятую формат (CSV) в таблицу или вики - текста HTML. См. ( Документацию ). Вы можете использовать это для импорта таблиц как из электронных таблиц, так и из баз данных (таких как MySQL , PostgreSQL , SQLite , FileMaker , Microsoft SQL Server & Access , Oracle , DB2 и т. Д.).
Преобразование строк в столбцы и столбцов в строки
Иногда возникает необходимость переставить столбцы и строки (переместить строки в столбцы, а столбцы в строки). Например, заголовки года в левой таблице ниже должны стать заголовками столбцов в правой таблице (в усеченном виде). Один из способов сделать это - использовать сводную таблицу в программе для работы с электронными таблицами.
Год Состояние Показатель 2019 г. AL 16,3 2019 г. АК 17,8 2019 г. Аризона 26,8 2019 г. AR 13,5 2019 г. CA 15 2019 г. CO 18 2019 г. CT 34,7 2019 г. DE 48 2019 г. FL 25,5 2019 г. GA 13,1 2019 г. ПРИВЕТ 15,9 2019 г. Я БЫ 15.1 2019 г. Иллинойс 21,9 2019 г. В 26,6 2019 г. Я 11,5 2019 г. KS 14,3 2019 г. KY 32,5 2019 г. ЛА 28,3 2019 г. МЕНЯ 29,9 2019 г. Доктор медицины 38,2 2019 г. MA 32,1 2019 г. MI 24,4 2019 г. MN 14,2 2019 г. РС 13,6 2019 г. МО 26,9 2019 г. MT 14.1 2019 г. NE 8,7 2019 г. NV 20,1 2019 г. NH 32 2019 г. Нью-Джерси 31,7 2019 г. НМ 30,2 2019 г. Нью-Йорк 18,2 2019 г. NC 22,3 2019 г. ND 11,4 2019 г. ОЙ 38,3 2019 г. ОК 16,7 2019 г. ИЛИ ЖЕ 14 2019 г. PA 35,6 2019 г. RI 29,5 2019 г. SC 22,7 2019 г. SD 10,5 2019 г. TN 31,2 2019 г. Техас 10,8 2019 г. UT 18,9 2019 г. VT 23,8 2019 г. VA 18,3 2019 г. WA 15,8 2019 г. WV 52,8 2019 г. WI 21,1 2019 г. WY 14.1 2018 г. AL 16,6 2018 г. АК 14,6 2018 г. Аризона 23,8 2018 г. AR 15,7 2018 г. CA 12,8 2018 г. CO 16,8 2018 г. CT 30,7 2018 г. DE 43,8 2018 г. FL 22,8 2018 г. GA 13,2 2018 г. ПРИВЕТ 14,3 2018 г. Я БЫ 14,6 2018 г. Иллинойс 21,3 2018 г. В 25,6 2018 г. Я 9,6 2018 г. KS 12,4 2018 г. KY 30,9 2018 г. ЛА 25,4 2018 г. МЕНЯ 27,9 2018 г. Доктор медицины 37,2 2018 г. MA 32,8 2018 г. MI 26,6 2018 г. MN 11,5 2018 г. РС 10,8 2018 г. МО 27,5 2018 г. MT 12,2 2018 г. NE 7,4 2018 г. NV 21,2 2018 г. NH 35,8 2018 г. Нью-Джерси 33,1 2018 г. НМ 26,7 2018 г. Нью-Йорк 18,4 2018 г. NC 22,4 2018 г. ND 10.2 2018 г. ОЙ 35,9 2018 г. ОК 18,4 2018 г. ИЛИ ЖЕ 12,6 2018 г. PA 36,1 2018 г. RI 30,1 2018 г. SC 22,6 2018 г. SD 6.9 2018 г. TN 27,5 2018 г. Техас 10,4 2018 г. UT 21,2 2018 г. VT 26,6 2018 г. VA 17,1 2018 г. WA 14,8 2018 г. WV 51,5 2018 г. WI 19,2 2018 г. WY 11.1 2017 г. AL 18 2017 г. АК 20,2 2017 г. Аризона 22,2 2017 г. AR 15.5 2017 г. CA 11,7 2017 г. CO 17,6 2017 г. CT 30,9 2017 г. DE 37 2017 г. FL 25,1 2017 г. GA 14,7 2017 г. ПРИВЕТ 13,8 2017 г. Я БЫ 14,4 2017 г. Иллинойс 21,6 2017 г. В 29,4 2017 г. Я 11,5 2017 г. KS 11,8 2017 г. KY 37,2 2017 г. ЛА 24,5 2017 г. МЕНЯ 34,4 2017 г. Доктор медицины 36,3 2017 г. MA 31,8 2017 г. MI 27,8 2017 г. MN 13,3 2017 г. РС 12,2 2017 г. МО 23,4 2017 г. MT 11,7 2017 г. NE 8.1 2017 г. NV 21,6 2017 г. NH 37 2017 г. Нью-Джерси 30 2017 г. НМ 24,8 2017 г. Нью-Йорк 19,4 2017 г. NC 24,1 2017 г. ND 9.2 2017 г. ОЙ 46,3 2017 г. ОК 20,1 2017 г. ИЛИ ЖЕ 12,4 2017 г. PA 44,3 2017 г. RI 31 год 2017 г. SC 20,5 2017 г. SD 8,5 2017 г. TN 26,6 2017 г. Техас 10,5 2017 г. UT 22,3 2017 г. VT 23,2 2017 г. VA 17,9 2017 г. WA 15,2 2017 г. WV 57,8 2017 г. WI 21,2 2017 г. WY 12,2 Состояние 2017 г. 2018 г. 2019 г. AL АК Аризона
Например; данные для таблицы коэффициентов передозировки по штатам для показателей смертности от передозировки наркотиков в Соединенных Штатах и общих показателей за определенный период времени взяты из файла csv . Он конвертируется в wikitable формат с помощью одного из ранее упомянутых конвертеров csv. Это приведенная выше таблица слева. Чтобы упростить этот пример, годы до 2017 года были удалены в вики-тексте. Затем он вставляется в программу для работы с электронными таблицами, такую как бесплатное программное обеспечение LibreOffice Calc .
Выберите ячейку данных. Затем щелкните команду « Сводная таблица » в меню «Вставка». Нажмите ОК во всплывающем окне. В следующем диалоговом окне перетащите « Год » в поле « Поля столбца » и перетащите « Состояние » в поле « Поля строк ». Перетащите « Скорость » в поле « Поля данных ». Щелкните ОК. Таблица будет преобразована в новый формат с указанием лет в заголовках столбцов. Это легче сделать, чем описать. Для получения справки см .: LibreOffice: сводные таблицы . И вот .
Скопируйте новую таблицу прямо со страницы Calc в визуальный редактор или в один из ранее упомянутых вики-конвертеров. Затем используйте VE, чтобы удалить столбец и строку суммирования.
Таблицы и визуальный редактор (VE)
- См. Также: mw: Help: VisualEditor / User guide # Редактирование таблиц . И см .: Commons: преобразование таблиц и диаграмм в вики-код или файлы изображений .
См . Phab: T108245 : «Полная поддержка базового редактирования таблиц в визуальном редакторе». Смотрите список задач. Готовые задачи поражены . На техническом языке бывает сложно понять, что именно было улучшено или какие функции были добавлены. Пожалуйста, добавьте пояснительную информацию ниже.
Песочницы очень помогают. Например; ваша пользовательская страница: Special: MyPage . Создайте и добавьте в закладки несколько личных песочниц. Визуальный редактор загружается очень быстро в пустых песочницах: Special: MyPage / Sandbox , Special: MyPage / Sandbox2 , Special: MyPage / Sandbox3 . Столько, сколько захотите. Поделитесь ссылкой, когда просите помощи. Чтобы найти все ваши песочницы: Special: PrefixIndex / User: - щелкните ссылку, добавьте имя пользователя в место с меткой «Отображать страницы с префиксом:».
Вставить пустую строку или столбец
Щелкните заголовок столбца или строки. Затем нажмите на стрелку. Во всплывающем меню нажмите «Вставить».
Перемещение или удаление столбцов и строк
Щелкните заголовок столбца или строки. Затем нажмите на стрелку. Во всплывающем меню нажмите «Переместить» или «Удалить».
Копировать столбец из одной таблицы в другую
Это полезно для многих вещей. Например; для быстрого обновления списков стран или добавления / обновления столбца рейтинга. См. Справку: Сортировка по ранжируемым столбцам и номерам строк. См. Также: Commons: преобразование таблиц и диаграмм в вики-код или файлы изображений . См. Раздел об обновлении Списка стран по количеству заключенных .
Запустите визуальный редактор. В копируемом столбце щелкните ячейку заголовка или любую желаемую верхнюю ячейку. Затем, удерживая нажатой клавишу «Shift», щелкните ячейку ниже или в конце столбца. Это выберет столбец до этой ячейки. Затем нажмите «Копировать» в меню редактирования вашего браузера. В некоторых браузерах это можно сделать из всплывающего контекстного меню. Затем щелкните любое пустое место на странице, чтобы отменить выбор столбца.
Перейдите к столбцу, который вы хотите заменить или заполнить (в этой или другой таблице). Убедитесь, что визуальный редактор запущен. Если вы копируете весь столбец, включая ячейку заголовка, выберите только ячейку заголовка для этого столбца, щелкнув по ней. Затем нажмите «вставить» в меню редактирования вашего браузера. Таким же образом можно вставить в пустой столбец. Просто выберите ячейку заголовка. Затем в браузере: меню редактирования> вставить.
Или вы можете выбрать часть столбца и вставить в нее. Например; если вы не хотите заменять ячейку заголовка.
Все вышеперечисленное иногда работает при копировании в столбец или из столбца электронной таблицы (например, бесплатного программного обеспечения LibreOffice Calc ).
Примечание . Визуальный редактор копирует шаблоны (как в столбце названий стран / штатов / провинций с шаблонами флагов), но не копирует встроенные стили, такие как стили, используемые для выравнивания этих имен по левому краю. Все это можно добавить сразу в любом текстовом редакторе. Например; если шаблон флага является единственным шаблоном в таблице, замените его {{
наstyle=text-align:left|{{
Скопируйте или удалите несколько строк
Щелкните ячейку в верхнем углу области, которую вы хотите выделить. Затем, удерживая нажатой клавишу «Shift», щелкните ячейку в противоположном верхнем углу той же строки. Затем спуститесь вниз и, удерживая нажатой клавишу «Shift», щелкните ячейку нижнего угла на той же стороне области, которую вы хотите выделить. Теперь у вас будет выбран прямоугольник или квадрат из таблицы.
При необходимости нажмите «копировать» или «вырезать» в меню редактирования вашего браузера. «Удалить» не работает для нескольких строк и столбцов.
Щелкните ячейку в верхнем левом углу той области, которую вы хотите вставить в таблицу. Затем нажмите «вставить» в меню редактирования вашего браузера. Для очень больших площадей это может занять от нескольких секунд до минуты. Вы можете сначала проделать эту работу в песочнице. Затем сохраните и отредактируйте дальше, прежде чем помещать что-либо в статью.
«Вырезать» очистит выбранные ячейки. Он их не удаляет. После того, как он пустой, очень легко удалить все пустые ячейки, строки и столбцы в редакторе исходного кода. Переключитесь на него, щелкнув стрелку в правом верхнем углу окна редактирования.
Возможно, еще быстрее будет использовать визуальный редактор для копирования нужных частей из таблицы в новую пустую таблицу.
Копировать таблицу с веб-страницы в визуальный редактор
Теперь можно копировать и вставлять некоторые таблицы с веб-страницы прямо в визуальный редактор (VE). Не все таблицы работают. Используйте пустую песочницу, чтобы сделать это быстрее всего. Сохраните его и отредактируйте, прежде чем вставлять в статью.
Выберите таблицу на веб-странице. Затем нажмите «Копировать» в меню редактирования вашего браузера. В некоторых браузерах это можно сделать из всплывающего контекстного меню. Запустите визуальный редактор на любой странице. Затем вставьте таблицу на страницу.
Если это не сработает, щелкните меню вставки, а затем «Таблица». Обычно он имеет первый заголовок в выбранной таблице. Затем нажмите «вставить» в меню редактирования вашего браузера. Таблица появится через некоторое время. Это может занять от 3 секунд до минуты для очень больших таблиц.
Скопируйте таблицу из Интернета в Excel2Wiki в редактор викитекстов в VE
Для копирования таблиц веб-страниц, которые нельзя скопировать непосредственно в визуальный редактор (как описано в предыдущем разделе): попробуйте скопировать таблицу в Excel2Wiki . Нажмите «конвертировать». Скопируйте и вставьте вики-текст таблицы в редактор вики-текста. Сохранить. Дальнейшее редактирование в VE.
Скопировать список (не в таблицу) в Excel2Wiki в редактор викитекстов в VE
Вставьте любой список (текст и / или числа) в Excel2Wiki . Нажмите «конвертировать». Скопируйте и вставьте вики-текст таблицы в редактор вики-текста. Сохранить. Дальнейшее редактирование в VE. Например; добавьте дополнительные столбцы или скопируйте столбец и вставьте его в другие таблицы. Перед вставкой списка в Excel2Wiki вы можете удалить блок текста. Некоторые текстовые редакторы могут делать это, если для текста установлен шрифт фиксированной ширины, например Courier New . Например; бесплатное ПО NoteTab Light : меню «Изменить»> «Блок»> «Вырезать». Заполните всплывающую форму, указав начальный столбец, ширину блока, строки блока. Нажмите ОК, и этот прямоугольник текста будет удален. Это экономит много времени.
Сортировка по алфавиту или числам с помощью бесплатной электронной таблицы и VE
- Примечание. Для получения дополнительной информации см. Справка: Сортировка . См. Раздел о расположении таблицы в начальном алфавитном порядке.
В программах для работы с электронными таблицами можно сделать многое, чего нельзя сделать в визуальном редакторе. Выделите и скопируйте таблицу прямо со страницы (не заходите в вики-текст или HTML-код). Вставьте таблицу в программу для работы с электронными таблицами, например в бесплатную программу LibreOffice Calc (см. Бесплатное руководство [1] ) или в другую программу для работы с электронными таблицами. См. Список программного обеспечения для работы с электронными таблицами .
В Calc щелкните любую ячейку в столбце, который вы хотите отсортировать, а затем щелкните один из параметров сортировки в меню данных в верхней части окна Calc. Щелкните «по возрастанию» или «по убыванию» для сортировки в алфавитном или числовом порядке в зависимости от содержимого столбца. Нажмите «Сортировка», чтобы увидеть дополнительные параметры.
Чтобы переместить строку (строки) заголовка обратно вверх: Выберите всю строку (строки). Чтобы выбрать всю строку (строки), щелкните пронумерованные столбцы Calc, расположенные в крайнем левом углу любого листа. Нажмите и удерживайте клавишу ALT. Щелкните левой кнопкой мыши и удерживайте любую ячейку в этом разделе (номера строк не работают). Используя мышь, перетащите исходную строку (строки) в место назначения. Отпустите кнопку мыши.
Вставьте эту отсортированную таблицу (или только выбранные интересующие столбцы) в новую таблицу в визуальном редакторе. Скопируйте прямо из электронной таблицы, а затем вставьте прямо в новую таблицу визуального редактора, где была выбрана первая ячейка заголовка. Это может занять до минуты.
Копировать таблицу из PDF в визуальный редактор
Загрузите PDF-файл на бесплатный онлайн-сайт PDF-to-Excel. Например; здесь . Загрузите файл Excel. Откройте его в бесплатной LibreOffice Calc или другой программе для работы с электронными таблицами. Если вам нужна только одна таблица с длинной страницы Excel, вы можете выбрать эту таблицу на странице Calc. Затем скопируйте таблицу на новую страницу в Calc.
Редактируйте и перемещайте столбцы и строки в Calc. Чтобы перетащить столбец, сначала выберите его, щелкнув номер его заголовка. Затем нажмите и удерживайте клавишу ALT. Затем щелкните ячейку данных и перетащите столбец в новое место. Или щелкните правой кнопкой мыши и удалите выбранный столбец (клавиша ALT не требуется). Строки аналогично перемещаются (при нажатой клавише ALT) или удаляются. Сортируйте, как описано в предыдущем разделе.
Скопируйте таблицу в песочницу вики. В Calc выберите таблицу. Скопируйте прямо из нее, а затем вставьте в новую таблицу визуального редактора, в которой была выбрана первая ячейка заголовка. Это может занять до минуты.
Добавьте запятые или точки, чтобы отделить каждую третью цифру в числах
Страны используют запятые, точки и пробелы для разделения каждой третьей цифры в числах.
Чтобы заменить пробелы запятыми или точками, вставьте список, строку или столбец в текстовый редактор ( например, Блокнот ). Используйте замену (из меню редактирования в Блокноте). См. Предыдущие разделы, чтобы узнать, как скопировать исправленный список в таблицу.
Если вы уже находитесь в электронной таблице, используйте функцию «Найти и заменить» после выбора нужного столбца или строки.
Если между каждой третьей цифрой нет разделителя, вставьте список, строку или столбец в электронную таблицу (например, LibreOffice Calc). Для этого щелкните заголовок первого столбца в пустой таблице. Это выберет этот столбец. Затем нажмите «Вставить» в меню редактирования Calc. Во всплывающем окне нажмите «Фиксированная ширина». Снимите все флажки. Щелкните ОК. Это вставит его в первый столбец. В Calc сохраните его в формате .ods по умолчанию. Это позволит сделать следующий шаг.
Затем выберите столбец, щелкнув его заголовок. Щелкните «числовой формат» в меню формата. Затем в подменю нажмите «разделитель тысяч». Это добавит запятые или точки в зависимости от языка по умолчанию, который вы выбрали в Calc для настройки локали. (меню инструментов> параметры> языковые настройки> языки> форматы> настройки локали). Например; с английским вы можете выбрать США, Великобританию, Южную Африку или одну из многих других англоязычных стран, перечисленных для английского языка. Скопируйте этот столбец в таблицу Википедии через VE.
Рассмотрите также функцию синтаксического анализатора {{Formatnum}}, шаблон {{ Number format }} и ознакомьтесь с Википедией: Руководство по стилям / датам и числам .
Округление чисел (обычно до нуля десятичных знаков)
В большинстве случаев, особенно с долларами и центами, данные более полезны для читателей, если они округлены до десятичных знаков.
Это легко сделать в электронной таблице. Например; в LibreOffice Calc выберите столбец, щелкнув в самом верху его столбца. Затем перейдите в меню «Формат»> «Ячейки». Появится всплывающее окно. Щелкните категорию «Число». Выберите количество десятичных знаков (ноль, если десятичные знаки не нужны). Вы также можете выбрать из списка примеров.
На этой всплывающей странице вы также выбираете разделитель тысяч или нет. Выбор из списка примеров также установит или снимет отметку с этого поля. Когда закончите, скопируйте эту таблицу или столбец в таблицу Википедии через VE.
Суммирование или усреднение списка чисел
Запустите VE. В таблице выберите столбец или часть столбца чисел. Для этого щелкните нужную верхнюю ячейку. Затем, удерживая нажатой клавишу «Shift», щелкните ячейку ниже или в конце столбца. Это выберет столбец до этой ячейки.
После выбора вы сразу увидите всплывающее окно с общей суммой выбранных ячеек и средним значением.
Смотрите также
- Справка: Введение в таблицы с разметкой Wiki : введение в таблицы.
- Справка: Базовая разметка таблиц : основы разметки таблиц вики.
- Справка: Сортировка : информация о сортируемых таблицах.
- Википедия: Расширенное форматирование таблиц : дополнительные темы.
- Википедия: Руководство по стилю / Таблицы : Руководство по стилю указывает лучшие практики для таблиц.
- Википедия: Таблицы, что можно и чего нельзя : краткое руководство к Руководству по стилю для таблиц.
- Пользователь: Dcljr / Таблицы : учебные таблицы.
- Таблица (HTML) : теги, используемые для таблиц HTML.
- Категория: Таблицы Википедии
Шаблоны
- Категория: Шаблоны таблиц : все шаблоны, в которых используются таблицы.
- Категория: Многоколоночные шаблоны : шаблоны для использования колонок без таблиц.
- Категория: Шаблоны диаграмм, диаграмм и графиков
- Категория: Форматирование диаграмм, диаграмм и графиков и шаблоны функций
- Категория: Редакторы шаблонов Википедии
- {{ List to table }}: шаблон и его категория обслуживания: Категория: Статьи, требующие таблиц
- {{ Horizontal TOC }}: подходит для списков стран в табличном формате.
- {{ Table }}: шаблон для определения классов CSS таблиц, таких как "wikitable" и "collapsible".
- {{ Aligned table }}: для определения таблиц в качестве шаблона, позволяющего включать в другие шаблоны и области, где синтаксис таблиц является проблематичным.
- Примеры:
- {{ Chess diagram }}: шаблон шахматной доски.
- {{ Goban }}: перейти к шаблону доски.
Заметки
- ^ граница: нет; позволяет избежать неприглядного пустого столбца в таблицах, более узких, чем окно браузера в Android Chrome.
- ^ In
style="padding: 3em 4em 5%;"
значение4em
используется как для «левого», так и для «правого» заполнения, поэтому порядок движения по часовой стрелке следующий: верх (3em) → право [и, следовательно, также левый] (4em) → низ (5%); в этом случае нет «→ left», потому что «левый» отступ уже был определен. Вstyle="padding: 3em 5%;"
, значение3em
используется как для "верхнего", так и для "нижнего" заполнения, в то время как значение5%
используется как для "левого", так и для "правого" заполнения, поэтому порядок движения по часовой стрелке следующий: верх [и, следовательно, также нижний] (3em ) → справа [а значит, и слева] (5%); в этом случае нет ни «→ bottom», ни «→ left», потому что отступы «bottom» и «left» уже определены. То же самое относится и кstyle="padding: 1em 20px 8% 9em;"
, иstyle="padding: 3%;"
. - ^ Упрощенная версия шаблона: Table_of_phase_transitions
Внешние ссылки
- VBA-Macro для преобразования таблиц EXCEL , опубликованный в немецком проекте Wikipedia ( английский перевод включен)
- HTML-таблицы в вики-конвертер в WMF Labs
- Копирование и вставка конвертера Excel в Wiki в WMF Labs
- Генератор таблиц - Mediawiki , генератор таблиц WYSIWYG
- Wikitable Editor , визуальный редактор таблиц в вики-коде
- HTML-WikiConverter , различные версии и языки
- pywikipediabot , может конвертировать HTML-таблицы в wiki
- Таблица названий цветов CSS и HEX-кодов
- Запрос фабрикатора для заголовков плавающих таблиц
Родственные проекты Викимедиа
- Редактирование Викитекста / таблиц в Викиучебниках
- Редактирование Wikitext / таблиц, готовых к использованию в Wikibooks
- mw: Help: Tables : справочная страница MediaWiki по таблицам.
- m: Таблицы разметки Wiki : Мета-Wiki информация о таблицах.
- m: Справка: Сортировка : Мета-вики-информация о сортируемых таблицах.
- m: Цвета фона таблицы : Таблица цветов фона MediaWiki.
- Commons: ресурсы диаграмм и графиков: ресурсы диаграмм и графиков в Commons
- Commons: Преобразование таблиц и диаграмм в вики-код или файлы изображений : включает информацию о преобразовании разметки таблиц.