Таблица — это набор столбцов и строк, который организует и размещает данные или изображения. Таблицы можно создавать на страницах Википедии с использованием специального синтаксиса викитекста , и для их настройки можно использовать множество различных стилей и приемов.
Таблицы можно использовать в качестве инструмента форматирования, но вместо этого рассмотрите возможность использования многоколоночного списка .
Чтобы автоматически вставить таблицу, нажмите
или (Вставить таблицу) на панели инструментов редактирования . На панели инструментов «Вектор» значок таблицы находится в меню «Дополнительно». Если «Вставить таблицу» отсутствует на панели инструментов, следуйте этим инструкциям, чтобы добавить ее.
При нажатии кнопки «Вставить таблицу» вставляется следующий текст :
{| class = "wikitable" |+ Текст заголовка |- ! Текст заголовка !! Текст заголовка !! Текст заголовка |- | Пример || Пример || Пример |- | Пример || Пример || Пример |- | Пример || Пример || Пример |} Этот код создает следующую таблицу:
Образец текста («Текст заголовка» или «Пример») предназначен для замены фактическими данными. Вы можете заполнить таблицу в исходном режиме. Или воспользоваться визуальным редактором (VE).
С помощью визуального редактора (VE) вы напрямую заполняете ячейки, не прибегая к викитексту. VE позволяет легко добавлять или удалять строки или столбцы. В VE это то, что отображается при нажатии на значок таблицы (в меню «Вставка»):
Кроме того, обычно можно добавить или импортировать таблицу, которая существует в другом месте (например, в электронной таблице на другом веб-сайте), непосредственно в визуальный редактор следующим образом:
Другие инструменты, такие как те, которые используются для создания вики-таблиц из Excel, могут быть использованы для создания вики-разметки из электронных таблиц и таблиц баз данных. См. § Внешние ссылки для списка некоторых.
||и !!) для необязательного добавления последовательных ячеек в одну строку.|) в заголовок таблицы или ячейку, используйте <nowiki>|</nowiki>экранированную разметку.Каждая отметка, за исключением конца таблицы ( |}), опционально принимает один или несколько атрибутов . Атрибуты должны находиться на той же строке, что и отметка.
|или ||, !или !!, и |+) содержат содержимое — отделяйте любой атрибут от его содержимого одной вертикальной чертой ( |), при этом атрибуты должны предшествовать содержимому.{|и |-) не содержат напрямую содержимое. Не добавляйте вертикальную черту ( |) после любых атрибутов.Обычно в таблицы включаются следующие атрибуты: class, например class="wikitable"; style, для стилей CSSscope ; , для обозначения ячеек заголовков строк или столбцов; rowspan, для расширения ячеек более чем на одну строку; colspan, для расширения ячеек более чем на один столбец.
Хотя синтаксис HTML-таблиц также работает, специальный wikicode может использоваться в качестве сокращения для создания таблицы. Коды вертикальной черты или символа "труба" ( | ) функционируют точно так же, как разметка 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 и Таблица (HTML) . Однако элементы <thead>, <tbody>, <tfoot>, <colgroup>, и <col>в настоящее время не поддерживаются в MediaWiki , по состоянию на декабрь 2021 [update]г.
Таблица может быть полезна, даже если ни одна из ячеек не имеет содержимого. Например, цвета фона ячеек можно изменить с помощью параметров ячеек, превратив таблицу в диаграмму, как meta:Template talk:Square 8x8 pentomino example. «Изображение» в виде таблицы гораздо удобнее редактировать, чем загруженное изображение.
Если все ячейки в строке пусты, ячейки все равно отображаются. Если ячейка заголовка также пуста для этой строки, все ячейки отображаются, но они узкие. Это можно исправить с помощью простого <br> в одной из ячеек. Вот что делается здесь:
Каждая строка должна иметь такое же количество ячеек, как и другие строки, чтобы количество столбцов в таблице оставалось постоянным.
С colspanи rowspanячейки могут охватывать несколько столбцов или строк; ( )
Если содержимое ячейки , содержащее символ вертикальной черты , отображается неправильно, просто добавьте пустой формат для этой ячейки. Второй символ вертикальной черты в строке не будет отображаться; он зарезервирован для добавления формата. Wikicode между первой и второй вертикальной чертой — это формат, но поскольку пустота или ошибка там игнорируются, он просто исчезает. Когда это происходит, добавьте фиктивный формат. Используйте третий символ вертикальной черты для отображения первого символа вертикальной черты.|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) <nowiki>|</nowiki>(предпочтительно) или 2) html : |или |. Каждая строка кода ячейки в следующей таблице имеет одну вертикальную черту wikicode.
Отображение соседних труб
Викитекст
{| класс = викитаблица |- |< сейчасики > | </nowiki> Pipes34 : <nowiki> || </ новики > |- | | Трубы34: || |} Производит
Template , из-за порядка, в котором анализируются вещи, эквивалентен вводу одного символа |. Одиночный тег parser-tag здесь не применяется. Посмотрите, как они не экранируют вторую вертикальную черту, как | и выше:{{!}}<nowiki />|<nowiki>|</nowiki>
Распространенные механизмы, которые не работают в таблицах.
Викитекст
{| class = wikitable |- |< nowiki /> | Труба3:| |- | Труба2: {{ ! }} Труба3: {{ ! }} |} Производит
Заголовки столбцов идентифицируются с помощью ! scope="col" |вместо |. Заголовки строк идентифицируются с помощью ! scope="row" |вместо |. Каждая ячейка заголовка должна быть на отдельной строке в вики-разметке. Разметку scope="col"и scope="row"следует использовать для заголовков столбцов и строк во всех таблицах данных, поскольку она явно связывает заголовок с соответствующими ячейками, что помогает обеспечить единообразие для программ чтения с экрана. Руководство по стилю требует использования области действия для заголовков столбцов и строк .
Для сложных таблиц , когда заголовок охватывает два столбца или строки, используйте ! scope="colgroup" colspan="2" |или ! scope="rowgroup" rowspan="2" |соответственно, чтобы четко обозначить заголовок как заголовок столбца двух столбцов или заголовок строки двух строк. Если заголовки неясны, это может вызвать проблемы с доступом; поэтому используйте id=для установки уникального значения без пробелов для каждого заголовка, затем ссылайтесь на идентификатор(ы) в ячейках данных с неясными заголовками, используя headers=пробел, разделяющий каждый идентификатор.
Ячейки заголовков обычно отображаются иначе, чем обычные ячейки, в зависимости от браузера. Они часто отображаются жирным шрифтом и центрируются. Если такой рендеринг нежелателен с эстетической точки зрения, таблицу можно стилизовать с помощью класса "plainrowheaders", который выравнивает заголовки строк по левому краю и удаляет жирное начертание. Выравнивание заголовков строк по левому краю происходит только в том случае, если class=wikitableи scope=rowиспользуются оба.
Типичный пример можно разметить следующим образом:
Викитекст
{| class = "wikitable plainrowheaders" |+ Заголовок таблицы ! scope = col | Заголовок столбца 1 ! scope = col | Заголовок столбца 2 ! scope = col | Заголовок столбца 3 |- ! scope = row | Заголовок строки 1 | Ячейка 2 || Ячейка 3 |- ! scope = row | Заголовок строки A | Ячейка B || Ячейка C |} Производит
Обратите внимание, что с заголовками строк вам необходимо использовать отдельную строку в викитексте для ячейки заголовка строки. Смотрите правильный формат в последней таблице в предыдущем разделе. Обратите внимание на использование одинарных и двойных вертикальных линий (черточек).
Ниже показано, как class=plainrowheadersвыглядит та же таблица (без ), если викитекст ячейки данных находится на той же строке, что и викитекст заголовка строки. Обратите внимание, что текст ячейки данных выделен жирным шрифтом, а фон ячейки данных имеет тот же оттенок серого, что и заголовки столбцов и строк. Ячейки данных обычно должны иметь простой нежирный текст и более светлый фон.
Викитекст
{| class = wikitable |+ Заголовок таблицы ! scope = col | Заголовок столбца 1 ! scope = col | Заголовок столбца 2 ! scope = col | Заголовок столбца 3 |- ! scope = row | Заголовок строки 1 || Ячейка 2 || Ячейка 3 |- ! scope = row | Заголовок строки A || Ячейка B || Ячейка C |} Производит
Оба они генерируют одинаковый вывод. Выберите стиль на основе количества ячеек в каждой строке и общего текста внутри каждой ячейки.
Викитекст
{| |- | А | Б |- | С | Г |}{| |- | А || Б |- | С || Г |}Производит (обратите внимание, что границ нет).
Обратите внимание, что в этом примере class="wikitable"используется для стилизации таблицы с помощью внешней таблицы стилей Википедии для таблиц. Он добавляет границы, фоновую заливку и жирный текст заголовка.
Викитекст
{| class = wikitable style = "text-align: center;" |+ Таблица умножения |- ! × ! 1 ! 2 ! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |} Производит
width=X устарело в HTML 5 , и поэтому MediaWiki может в конечном итоге игнорировать его . См.: Wikipedia: HTML 5#Атрибуты таблиц . Вместо этого используйте стили CSS: например, style="width: Xpx;"или style="width: Xem;"или другие единицы CSS. Число само по себе обозначает пиксели.Смотрите примеры ширины на этой подстранице . Там проще сузить окно браузера и не потерять место, как на длинной странице, например, здесь на Help:Table. Общая ширина таблицы не действует одинаково на мобильном представлении Википедии, как на мобильных представлениях на веб-страницах за пределами Википедии. Смотрите примеры подстраниц.
В Википедии по большей части не рекомендуется устанавливать ширину, поскольку это мешает браузеру подгонять содержимое под окно браузера, размер устройства, настройки масштабирования, выбор размера шрифта пользователем и другие ограничения. Подробные столбцы заметок почти всегда являются проблемой, особенно когда есть несколько других столбцов. Редакторы часто пытаются сделать столбец заметок шире, что портит другие столбцы. По этой причине следует избегать подробных столбцов заметок или сокращать заметки и вместо этого добавлять ссылки на более длинные заметки под таблицей.
style=max-width:Xemможет использоваться в заголовках таблиц. Следующий фрагмент таблицы адаптирован из этой версии Списка стран по уровню благосостояния на взрослого человека . Цель состоит в том, чтобы сузить столбцы данных и разнести названия стран по одной строке каждый. Все это упрощает просмотр списка стран. Но названия стран должны переноситься по словам, если это необходимо (в узких портретных представлениях на некоторых мобильных телефонах и т. д.). Поэтому он style=max-width:Xemиспользовался в заголовках выбранных столбцов. Он также позволяет избежать использования переносов строк заголовков <br>, которые раздражают людей, использующих программы чтения с экрана, из-за пауз. Единицы em хороши, потому что они увеличиваются в размере вместе с настройкой масштабирования. Важно проверить, правильно ли работает выбранная вами максимальная ширина в мобильных телефонах и не разрывает ли она слова. Возможно, вам придется немного ее увеличить. Вот соответствующий вики-текст заголовка:
Викитекст
{{ static row numbers }}{{ sticky header }}{{ table alignment }} {| class = "wikitable sortable static-row-numbers sticky-header col1left" style = text-align:right |+ Медианное и среднее богатство на взрослого человека ([[USD]]) по странам |- ! Местоположение ! style = max-width:4em | Медианное богатство ! style = max-width:4em | Среднее богатство ... Производит
{{ sort under }} еще больше сужает столбцы таблицы:
{{ статические номера строк }}{{ прикрепленный заголовок }}{{ сортировка по }}{{ выравнивание таблицы }} {| класс = "wikitable сортируемая статические-номера-строк прикрепленный-заголовок сортировка-по col1left" стиль = text-align:right Если использовать {{ sticky header }} , то для мобильных телефонов лучше использовать еще более узкие заголовки:
Ниже показано, как выглядит таблица без подписи style=max-width:Xemи без нее .
Уменьшите окно браузера, чтобы увидеть, как таблица ниже сокращается по сравнению с таблицами выше. Таблица выше (даже если добавлено несколько дополнительных столбцов) сохраняет одну строку на страну для более узких браузеров и экранов. Поэтому она более удобна для чтения и сканирования в длинных таблицах стран. Формат таблицы ниже может значительно увеличить количество строк и потребовать большей вертикальной прокрутки, особенно если добавлено больше столбцов.
Чтобы принудительно задать начальную ширину столбцов в соответствии с определенными требованиями, а не принимать ширину самого широкого текстового элемента в ячейках столбца, следуйте этому примеру. Обратите внимание, что перенос текста принудительно выполняется для столбцов, где этого требует ширина. Не используйтеmin-width:Xpx;
Викитекст
{| class = wikitable |- ! scope = "col" style = "width: 50px;" | Название ! scope = "col" style = "width: 250px;" | Эффект ! scope = "col" style = "width: 350px;" | Игры найдены в |- | Poké Ball || Regular Poké Ball || Все версии |- | Great Ball || Better than a Poké Ball || Все версии |} Производит
Чтобы задать ширину столбцов в таблице без заголовков, укажите ширину в первой ячейке для каждого столбца.
Викитекст
{| class = wikitable |- | style = "width: 100pt;" | Ширина этого столбца составляет 100 пунктов | style = "width: 200pt;" | Ширина этого столбца составляет 200 пунктов | style = "width: 250pt;" | Ширина этого столбца составляет 250 пунктов |- | blah || blih || bluh |} Производит
Вы также можете использовать проценты, например, style="width: 50%;"для выравнивания ширины таблицы из двух столбцов.
Одно из применений настройки ширины — выравнивание столбцов последовательных таблиц. Ниже приведены отдельные таблицы со столбцами, установленными на 350px и 225px.
Викитекст
{| class = wikitable |- ! scope = col style = "ширина: 350px;" | Страна ! scope = col style = "ширина: 225px;" | Столица |- | Нидерланды || Амстердам |} {| class = wikitable |- ! scope = col style = "ширина: 350px;" | Страна ! scope = col style = "ширина: 225px;" | Столица |- | Франция || Париж |} Производит
Можно указать высоту всей таблицы, а также высоту строки. Высота средней строки ниже установлена в , style=height:7emа общая высота всей таблицы установлена в style=height:14emединицах. Выполнение математических расчетов показывает, что высота верхней и нижней строк составляет 3,5 единицы em каждая. 3,5 + 3,5 + 7 = 14. Если есть перенос слов, то высота увеличится, чтобы учесть это (за исключением мобильных устройств, где нижняя часть таблицы будет обрезана).
Разметка Wiki
{| class = wikitable style = height:14em; |- ! Left !! Center !! Right |- | Верхняя левая ячейка || Верхняя центральная ячейка || Верхняя правая ячейка |- style = height:7em | Средняя левая ячейка || Средняя центральная ячейка || Средняя правая ячейка |- | Нижняя левая ячейка || Нижняя центральная ячейка || Нижняя правая ячейка |}Производит
Явные заголовки таблиц (или названия ) рекомендуются для таблиц данных в качестве лучшей практики; Руководство по стилю Википедии считает их высокоприоритетными по причинам доступности ( экранные ридеры ), поскольку заголовок явно связан с таблицей, в отличие от обычного заголовка викитекста или вводного предложения. Все таблицы данных в Википедии требуют заголовков. Заголовок предоставляется с |+разметкой, похожей на строку таблицы ( |-), но он не содержит ячеек и не находится внутри границы таблицы. Заголовки всегда отображаются, появляясь как заголовок, центрированный (в большинстве браузеров), над таблицей. Заголовок может быть стилизован (с помощью встроенного, а не блочного CSS) и может включать викиссылки, ссылки на ссылки и т. д.
Многие редакторы статей не любят заголовки таблиц, когда таблица находится прямо под заголовком похожей статьи или недалеко от него. Но пользователям экранных дикторов все равно нужна подпись таблицы, чтобы быстро переходить от таблицы к таблице. В этом случае используйте популярный шаблон {{ sro }} : Шаблон:Только для экранных дикторов . Добавьте шаблон в заголовок таблицы, и тогда его увидят только пользователи экранных дикторов. Пример:
Резюме предоставляет обзор данных таблицы для текстовых и аудиобраузеров и обычно не отображается в графических браузерах. Резюме (также высокий приоритет Руководства по стилю для таблиц) является синопсисом содержимого и не повторяет текст заголовка; думайте о нем как об аналоге описания изображения .alt Резюме добавляется с помощью , на той же строке, что и , которая открыла таблицу, вместе с любыми и другими параметрами для таблицы в целом. Однако этот атрибут устарел в HTML 5 .summary="Summary text here."{|class=summary=
Пример разметки Wiki , показывающий выровненную по левому краю подпись со ссылкой на источник:
{| class = wikitable |+ style = "text-align: left;" | Данные за 2014–2015 гг. по регионам<ref name="Garcia 2005"/> |- ! scope = col | Год !! scope = col | Африка !! scope = col | Америка !! scope = col | Азия и Тихоокеанский регион !! scope = col | Европа |- ! scope = row | 2014 | 2300 || 8950 || ''9325'' || 4200 |- ! scope = row | 2015 | 2725 || ''9200'' || 8850 || 4775 |} Производит
Можно создавать ячейки, которые простираются на два или более столбцов. Для этого используется . Аналогично можно создавать ячейки, которые простираются на две или более строк. Для этого требуется . В коде таблицы необходимо исключить ячейки, которые покрываются таким диапазоном . Полученное количество столбцов и строк должно соответствовать.|colspan=n | content|rowspan=m | content
Викитекст
{| класс = wikitable стиль = "text-align: center;" ! кол1! кол2! кол3! col4|-! строка1| диапазон столбцов = 2 | A <!-- подсчет столбцов: ячейка «B» не может существовать -->| С|-! строка2| АА| ББ| СС|-! строка3| ААА| диапазон строк = 2 | BBB | КСС|-! строка4| АААА<!-- подсчет строк: ячейка «BBBB» не может существовать -->| CCCC|}Производит
В коде ячейка | colspan="2" | Aохватывает два столбца. Обратите внимание, что в следующем столбце ячейка, которая, как ожидается, должна содержать "B", не существует .
Аналогично: в коде ячейка | rowspan="2" | BBBохватывает две строки. Ячейка, которая должна содержать «BBBB», не существует .
Викитекст
{| класс = wikitable |-! Столбец 1 !! Столбец 2 !! Столбец 3|-| диапазон строк = 2 | A | colspan = 2 style = "text-align: center;" | B <!-- столбец 3 этой строки занят ячейкой B (которая находится слева) -->|-<!-- столбец 1 этой строки занят ячейкой A (выше) -->| С| Д|-| Э| rowspan = 2 colspan = 2 style = "text-align: center;" | F <!-- столбец 3 этой строки занят ячейкой F (слева) -->|-| Г<!-- столбцы 2 и 3 этой строки заняты ячейкой F (выше) -->|-| colspan = 3 style = "text-align: center;" | H <!-- столбцы 2 и 3 этой строки заняты ячейкой H (слева) -->|}Производит
Обратите внимание, что использование rowspan=2for cell G в сочетании с rowspan=3for cell F для получения еще одной строки под G и F не сработает, поскольку все (неявные) ячейки будут пустыми.
Ниже приведена та же таблица с порядком объявленных строк и ячеек, показанным в скобках. Также показано использование rowspanи .colspan
Викитекст
{| class = wikitable |- ! Столбец 1<br>(строка 1 ячейка 1) !! Столбец 2<br>(строка 1 ячейка 2) !! Столбец 3<br>(строка 1 ячейка 3) |- | rowspan = 2 | A < br > (строка 2 ячейка 1) < br >< code > rowspan=2 </ code > | colspan = 2 style = "text-align: center;" | B < br > (строка 2 ячейка 2) < br >< code > colspan=2 </ code > |- | C < br > (строка 3 ячейка 1) <!-- столбец 1 занят ячейкой A --> | D < br > (строка 3 ячейка 2) |- | E < br > (строка 4 ячейка 1) | rowspan = 2 colspan = 2 style = "text-align: center;" | F < br > (строка 4 ячейка 2) < br >< code > rowspan=2 colspan=2 </ code > |- | G < br > (строка 5 ячейка 1) <!-- столбец 2+3 занят ячейкой F --> |- | colspan = 3 style = "text-align: center;" | H < br > (строка 6 ячейка 1) < br >< code > colspan=3 </ code > |} Производит
Обратите внимание, что хотя ячейка C находится в столбце 2, C является первой ячейкой, объявленной в строке 3, поскольку столбец 1 занят ячейкой A , которая была объявлена в строке 2. Ячейка G является единственной ячейкой, объявленной в строке 5, поскольку ячейка F занимает другие столбцы, но была объявлена в строке 4.
Примечание: Wikipedia:HTML 5#Атрибуты таблиц . CSS для замены устаревших атрибутов границ, отступов, интервалов и т. д.
Добавьте границу вокруг таблицы, используя свойство 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;" | Справа |- style = "text-align: center;" | [[ Файл : Starred.svg | 120px ]] | [[ Файл : Star full.svg | 120px ]] | [[ Файл : Stargreen.svg | 120px ]] |- style = "text-align: center;" | Красная звезда || Оранжевая звезда || Зеленая звезда |} Производит
Обратите внимание, что тексты в нижнем ряду выровнены по центру style="text-align: center;", а изображения звезд не выровнены по левому краю.
Пока в File:спецификациях не указан параметр, |thumbони не показывают строки заголовка в таблице (только при наведении мыши). Цвет границы darkgrayсоответствует типичным таблицам или информационным полям в статьях; однако это может быть любое название цвета (например, style="border: 1px solid darkgreen;") или может использоваться шестнадцатеричный цвет (например, #DDCCBB).
Викитекст
{| граница = 1 |- | А || Б || В |- | Г || Д || Е |} Производит
Если все ячейки имеют одинаковый цвет границ, то полученные двойные границы могут быть нежелательны; добавьте border-collapse: collapse;свойство CSS в открывающий тег таблицы, чтобы уменьшить их до одинарных ( устарелоcellspacing=... ) .
Кроме того, W3C разрешает использовать устаревший border=атрибут в корне таблицы ( {|), если его значение равно «1». Это добавляет однопиксельную границу цвета по умолчанию к таблице и всем ее ячейкам одновременно:
Использование border-collapseсвойства для объединения двойных границ, как описано выше:
Викитекст
{| border = 1 style = "border-collapse: collapse;" |- | A || B || C |- | D || E || F |} Производит
Два класса таблиц floatleftи floatright(чувствительны к регистру) помогают перемещать таблицу и настраивать поля таблицы так, чтобы они не прилипали к тексту. floatleftперемещает таблицу влево и настраивает правое поле. floatrightделает наоборот. Пример:
Викитекст
Этот абзац находится перед таблицей. Текст в столбце 2 охватывает обе строки из-за спецификатора формата "rowspan=2", поэтому нет кодировки для "Col 2" во 2-й строке, только Col 1 и Col 3. {| class = "wikitable floatright" | Col 1, row 1 | rowspan = "2" | Col 2, row 1 (и 2) | Col 3, row 1 |- | Col 1, row 2 | Col 3, row 2 |} {| class = "wikitable floatleft" | Col 1, row 1 | rowspan = "2" | Col 2, row 1 (и 2) | Col 3, row 1 |- | Col 1, row 2 | Col 3, row 2 |} Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo Invente Veritatis et quasi Architecto Beatae vitae dicta Sunt, Explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut Labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit Laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?Как это выглядит в браузере:
Этот абзац находится перед таблицей. Текст в столбце 2 охватывает обе строки из-за спецификатора формата "rowspan=2", поэтому для "Col 2" во 2-й строке нет кодировки, только Col 1 и Col 3.
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo Invente Veritatis et quasi Architecto Beatae vitae dicta Sunt, Explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut Labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit Laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Обратите внимание, что хотя существуют и другие способы размещения таблицы, например style="float:left;", style="float:right;", , единственными параметрами, которые позволяют расположить таблицу под перемещаемым мультимедийным объектом, являются floatleftи floatright. Например:
Выравнивание таблицы с floatleftклассом дает:
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo Invente Veritatis et quasi Architecto Beatae vitae dicta Sunt, Explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut Labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit Laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Но если сопоставить его с, style="float:left;"то получится:
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo Invente Veritatis et quasi Architecto Beatae vitae dicta Sunt, Explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut Labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit Laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, 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 = "поле слева: авто; поле справа: авто; граница: нет;" |+ Ячейки выравниваются по левому краю, таблица центрируется |- ! область действия = "столбец" | Дуис ! область действия = "столбец" | аут ! область действия = "столбец" | раздражение |- | печаль || в осуждении || в сладострастном величии |- | эссе циллум долоре || eu fugiat nulla || париатур. |} ...текст после таблицыКак это выглядит в браузере:
Текст перед таблицей...
...текст после таблицы.
Заголовки можно закрепить, чтобы они всегда были вверху (или слева) при прокрутке большой таблицы. Смотрите {{ Sticky header }} и {{ Sticky table start }} .
Вложенность таблиц данных с ячейками заголовков затрудняет их корректный анализ вспомогательными программами чтения с экрана .
Редакторы иногда используют таблицы без заголовков в качестве вспомогательного средства для макета контента, особенно там, где это проще, чем эквивалентное использование div и стилей CSS. Для сложных макетов можно использовать rowspanи colspan, но опять же иногда проще и удобнее использовать вложенные таблицы.
Вложенные таблицы должны начинаться с новой строки.
В следующем примере показаны пять различных таблиц, вложенных в ячейки шестой, основной таблицы. Ни одна из них не имеет ячеек заголовков. Автоматически две таблицы |A| и |B|B| выравниваются по вертикали вместо обычного расположения текстовых символов в ячейке рядом друг с другом. floatиспользуется для фиксации каждой из таблиц |C| и |D| в их собственном положении в одной ячейке таблицы. Это может использоваться для диаграмм и схем.
Викитекст:
{| style = "border: 1px сплошной черный;" | style = "border: 1px solid black;" | α | style = "border: 1px сплошной черный; text-align:center;" | cell2 {| style = "border: 2px solid black; background: #ffffcc;" <!-- Вложенная таблица должна быть на новой строке --> | стиль = "border: 2px solid darkgray;" | ВЛОЖЕННЫЙ |-| стиль = "граница: 2px сплошной темно-серый;" | ТАБЛИЦА |}| style = "border: 1px solid black; vertical-align: bottom;" | исходная таблица снова | стиль = "граница: 1 пиксель сплошной черный; ширина: 100 пикселей" | {| style = "граница: 2px сплошной черный; фон: #ffffcc" | стиль = "граница: 2px сплошной темно-серый;" | A |}{| style = "граница: 2px сплошной черный; фон: #ffffcc" | стиль = "граница: 2px сплошной темно-серый;" | B | стиль = "граница: 2px сплошной темно-серый;" | B |}| стиль = "граница: 1 пиксель, сплошной черный; ширина: 50 пикселей" | {| style = "border: 2px solid black; background:#ffffcc; float:left" | стиль = "граница: 2px сплошной темно-серый;" | C |}{| style = "border: 2px solid black; background:#ffffcc; float:right" | стиль = "граница: 2px сплошной темно-серый;" | D |}|}Ниже приведены два способа указания цвета текста и фона для одной ячейки:
Викитекст
{| |- | style = "цвет фона: красный; цвет: белый;" | abc | def | style = "цвет фона: красный;" |< span style = "цвет: белый;" > ghi </ span > | jkl |} Производит
Как и другие параметры, цвета можно указывать для всей строки или всей таблицы; параметры для строки переопределяют значение для таблицы, а параметры для ячейки переопределяют параметры для строки.
Нет простого способа указать цвет для всего столбца: каждая ячейка в столбце должна быть указана индивидуально. Инструменты могут сделать это проще. [ which? ]
Разметка Wiki
{| style = "цвет фона: желтый; цвет: зеленый;" |- | stu || style = "цвет фона: серебристый;" | vwx || yz |- style = "цвет фона: красный; цвет: белый;" | stu || style = "цвет фона: серебристый;" | vwx || yz |- | stu || style = "цвет фона: серебристый;" | vwx || yz |} Производит
Чтобы таблица сливалась с фоном, используйте style="background-color: none;"или style="background-color: transparent;". (Внимание: style="background-color: inherit;", не работает с некоторыми старыми браузерами, включая IE6, поэтому убедитесь, что таблица будет понятна, если настройка цвета не сработает.)
Чтобы заставить ячейку соответствовать одному из цветов шаблона по умолчанию class=wikitable, используйтеstyle="background-color:#EAECF0;" для более темного заголовка иstyle="background-color:#F8F9FA;" для более светлого тела. #A2A9B1 — цвет границы вики-таблиц.
style="background-color:…"работает в сортируемых ячейках заголовков. style="background:…"не работает. Это нарушает сортировку в этой ячейке. См. Help:Sortable tables . Поэтому используйте style="background-color:…"для всех ячеек заголовков столбцов, независимо от того, сортируются они в данный момент или нет. Кто-то может попытаться сделать их сортируемыми позже.
В начале ячейки добавьте свой параметр, за которым следует одинарная вертикальная черта. Например, style="width: 300px;"|устанавливает для этой ячейки ширину 300 пикселей. Чтобы задать более одного параметра, оставляйте пробел между ними.
Викитекст
{| style = "цвет: белый;" |- | style = "цвет-фона: красный;" | ячейка1 | style = "ширина: 300 пикселей; фон: синий;" | ячейка2 | style = "цвет-фона: зеленый;" | ячейка3 |} Производит
По умолчанию текст выравнивается по вертикальной середине ячейки:
Чтобы выровнять текст по верху ячейки, примените style="vertical-align: top;"CSS к строкам (к сожалению, похоже, это необходимо применять индивидуально к каждой строке). valign=...Атрибут устарел , и MediaWiki может прекратить его использование.
Викитекст
{| class = wikitable style = "width: 400px;" |- style = "vertical-align: top;" ! scope = "row" style = "width: 10%;" | Заголовок строки | style = "width: 70%;" | Более длинный фрагмент ... | style = "width: 20%;" | Короткий текст |} Производит
Содержимое ячейки может быть отступлено или дополнено с любой стороны. Также текст может быть выровнен. Во второй строке текст выравнивается по правому краю. Смотрите следующие примеры.
Викитекст
{| class = wikitable |- | Содержимое ячейки без отступа или дополнения |- | style = "padding-left: 2em;" | style="padding-left: 2em;" |- | style = "text-align:right; padding-right: 2em;" | style="text-align:right; 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%;" {{ space | 4 }} (Сверху и снизу: 3em. Слева и справа: 5%) |- | style = "padding: 3em 4em 5%;" | style="padding: 3em 4em 5%;" {{ space | 4 }} (Сверху: 3em. Слева и справа: 4em. Снизу: 5%) |- | style = "padding: 3%;" | style="padding: 3%;" {{ space | 4 }} (Сверху, справа, снизу и слева: все 3%) |- | style = "padding: 1em 20px 8% 9em;" | style="padding: 1em 20px 8% 9em;" {{ space | 4 }} (Сверху: 1em. Справа: 20px. Снизу: 8%. и Слева: 9em.) |} Производит
Шаблон для аргументов:
Аргументы style="padding: "можно рассматривать как упорядоченные по 12-часовому формату , начиная с полудня и идущие по часовой стрелке , в следующем смысле: «верх» ассоциируется с полуднем (т. е. 12 часов, верх часов ) , «право» — это 3 часа, «низ» — это 6 часов, а «лево» — это 9 часов. Аргументы упорядочены по часовой стрелке, начиная с полудня: верх → правый → низ → левый (см. эту сноску [примечание 2] для примера с пояснением).
Этот же порядок используется и в других местах, например, при указании границ ячейки с помощью border-style: .
Установка отступа ячеек по умолчанию
Используйте cellpadding=для установки отступа по умолчанию для каждой ячейки в таблице. Если class=wikitableиспользуется, то cellpaddingигнорируется. Расстояние по умолчанию между ячейками можно изменить с помощью cellspacing=.
Если cellpaddingне используется
Викитекст
{| style = "border:1px solid black" |- | Ячейка || Ячейка |- | Ячейка || Ячейка |} Производит
С использованием cellpadding=10:
Викитекст
{| cellpadding = 10; style = "border:1px solid black" |- | Ячейка || Ячейка |- | Ячейка || Ячейка |} Производит
С использованием cellpadding=0:
Викитекст
{| cellpadding = 0; style = "border:1px solid black" |- | Ячейка || Ячейка |- | Ячейка || Ячейка |} Производит
Используя cellpadding=0и cellspacing=0:
Викитекст
{| cellpadding = 0; cellspacing = 0; style = "border:1px solid black" |- | Ячейка || Ячейка |- | Ячейка || Ячейка |} Производит
Тот же CSS, который используется для таблиц, можно использовать в спецификаторе формата ячейки (заключенном в |... |), чтобы добавить рамку вокруг каждой ячейки:
Викитекст
{| style = "border-spacing: 2px; border: 1px solid darkgray;" ! style = "width: 140px;" | Слева ! style = "width: 150px;" | По центру ! style = "width: 130px;" | Справа |- style = "text-align: center;" | style = "border: 1px solid blue;" | [[ Файл : Starred.svg | 120px ]] | style = "border: 1px solid #777777;" | [[ Файл : Star full.svg | 120px ]] | style = "border: 1px solid #22AA55;" | <!-- зеленоватая рамка --> [[ Файл : Stargreen.svg | 120px ]] |- style = "text-align: center;" | Красная звезда || Оранжевая звезда || Зеленая звезда |} Производит
Обратите внимание, что только ячейки изображения имеют индивидуальные границы, а не текст. Нижние шестнадцатеричные цвета (например, #616161) ближе к черному. Обычно все границы в таблице будут одного определенного цвета.
Свойства style='border:'и style='border-style:'могут принимать следующие аргументы:
border-top, border-right, border-bottom,border-leftВикитекст
{| ! style = "border-top: solid;" | <code>style="border-top: solid;"</code> |- | style = "border-top: solid 2px red; border-right: pointshed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |< pre > border-top: solid 2px red; border-right: пунктирная зеленая 3px;border-bottom: double 5px blue;border-left: dotted 6px yellow;</pre>|}Produces
style='border-style:'To set the left, right, bottom, or top border of a single cell, one may use style='border-style:' which takes between 1 and 4 arguments, each of which is either none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, or initial.
These arguments are ordered according to the pattern described here.
For instance, style="border-style: solid none solid none;" where the four parameters correspond respectively to the
'border-style: top right bottom left;'
borders of the cell.
For reasons described after this example, there are many ways to change the following code that would not result in any changes to the table that is actually displayed.
Wikitext
{| class=wikitable|-| Top_Left<!-- border-style: top right bottom left; -->| style="border-style: solid solid none none;" | Top_Center| Top_Right|-| style="border-style: none none solid solid;" | Middle_Left| style="border-style: none none none none;" | Middle_Center| style="border-style: solid solid none none;" | Middle_Right|-| Bottom_Left| style="border-style: none none solid solid;" | Bottom_Center| Bottom_Right|}Produces
Note, however, that in the following table, none of the central cell's (i.e. Middle_Center's) borders are removed despite the code style="border-style: none none none none;":
Wikitext
{| class=wikitable|-| Top_Left || Top_Center || Top_Right|-| Middle_Left| style="border-style: none none none none;" | Middle_Center| Middle_Right|-| Bottom_Left || Bottom_Center || Bottom_Right|}Produces
This happens because the code class="wikitable" places a border (top, right, bottom, and left) around every cell in the table so that, for instance, there are actually two borders between the cells "Middle_Center" and "Middle_Right".
So to remove the border between cells "Middle_Center" and "Middle_Right", it is necessary to remove both the right border of "Middle_Center" and the left border of "Middle_Right":
Wikitext
{| class=wikitable|-| Top_Left || Top_Center || Top_Right|-| Middle_Left<!-- 'border-style: top right bottom left;' -->| style="border-style: none none none none;" | Middle_Center| style="border-style: none none none none;" | Middle_Right<!-- In the above line, the three left-most "none" arguments can be replaced with "solid" (or other valid arguments) and there would be no change to the table that is displayed. Only the fourth argument, which is Middle_Right's left border, needs to be "none". For example, the line above could be replaced with:| style="border-style: solid solid solid none;" | Middle_Right-->|-| Bottom_Left || Bottom_Center || Bottom_Right|}Produces
To remove selected external borders of a wikitable, both remove them from the adjacent cells and begin the whole table with code like {| class="wikitable" style="border: none;".
Note that replacing {| class="wikitable" with
{| style="border-collapse: collapse;"
has the effect of removing all cell borders that would otherwise appear by default around every cell in the table.
With this change, you must insert a single cell border between two adjacent cells rather than remove two cell borders.
See Help:Sortable tables sections on row numbers. And:
In a table that spans the entire width of a page, cells narrower than the widest cell tend to wrap. To keep an entire column from wrapping, use style="white-space: nowrap;" in a non-header cell on the longest/widest cell to affect the entire column. This is not a good idea though, because in cell phones the column will not wrap, and part of the table may extend past the screen (especially in portrait view).
Without nowrap, as it appears in a browser:
Wikitext
{|class="wikitable sortable"|-! scope=col | Episode! scope=col | Date! scope=col | Summary|-|"The Journey Begins"|January 1, 2010|[[Lorem ipsum]] ... <!-- This text is a truncation of the actual (long) text displayed in the output below -->|}Produces
With nowrap, on both the Episode and Date columns, as it appears in a browser:
Wikitext
{|class="wikitable sortable"|-! scope=col | Episode! scope=col | Date! scope=col | Summary|-| style="white-space: nowrap;" |"The Journey Begins"| style="white-space: nowrap;" |January 1, 2010|[[Lorem ipsum]] ... <!-- This text is a truncation of the actual (long) text displayed in the output below -->|}Produces
You can add tooltips to columns by using the {{Tooltip}} template. Simply replace the column-title with {{Tooltip|Column title|The tool tip}}, which makes it appear like so: Column title.
{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}} can be used to diagonally split a header cell, as in the top-left cell in the rendered result below:[note 3]
Wikitext
{| class=wikitable! {{diagonal split header|From|To}}! Solid !! Liquid !! Gas|-! Solid| Solid-solid transformation || Melting || Sublimation|-! Liquid| Freezing || {{sdash}} || Boiling/evaporation|-! Gas| Deposition || Condensation || {{sdash}}|}Produces
Cell borders can be hidden by adding border: none; background: none; to the style attributes of either the table or the cell,[note 4] though this may not work in older browsers. Another use case for this is for implementing aligned multi-column tables:
Wikitext
{| 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 | To|-! Solid !! Liquid !! Gas|-! rowspan=3 | From! Solid| Solid–solid transformation || Melting || Sublimation|-! Liquid| Freezing || {{sdash}} || Boiling/evaporation|-! Gas| Deposition || Condensation || {{sdash}}|}Produces
Note that the removal of the link on an image is dependent on it being purely decorative (as it will be ignored by assistive devices).
Wikitext
{| class=wikitable style="border: none; background: none;"! scope=col | Year! scope=col | Size| rowspan=5 style="border: none; background: none;"|! scope=col | Year! scope=col | Size| rowspan=5 style="border: none; background: none;"|! scope=col | Year! scope=col | Size|-| 1990 || 1000<br>(est) || 2000 || 1357 || 2010 || 1776|-| 1991 || 1010 || 2001 || 1471 || 2011 || 1888|-| colspan=2 style="text-align: center;"|⋮| colspan=2 style="text-align: center;"|⋮| colspan=2 style="text-align: center;"|⋮|-| 1999 || 1234 || 2009 || 1616 || 2019 || 1997<br>(est)|}Produces
Regardless of whether wikitable format or HTML is used, the wikitext of the rows within a table, and sometimes even within a collection of tables, may have much in common, e.g.:
In such a case, it can be useful to create a template that produces the syntax for a table row, with the data as parameters. This can have many advantages:
display: none; for the purpose of having one format for sorting and another for displayExample:
Using {{Help:Table/example row template}}
Wikitext
{| class="wikitable sortable"|-! scope=col | a! scope=col | b! scope=col | a/b{{Help:Table/example row template| 50|200}}{{Help:Table/example row template| 8| 11}}{{Help:Table/example row template|1000| 81}}|}Produces
For a conditional row in a table, we can have:
Wikitext
{| class=wikitable {{ #if:1|{{!}}- ! scope=row {{!}} row one, column one {{!}}row one, column two}} {{ #if: |{{!}}- ! scope=row {{!}} row two, column one {{!}}row two, column two}} |- ! scope=row {{!}} row three, column one | row three, column two|}Produces
With comments to explain how it works, where note how the second row is missing:
Wikitext
{| class=wikitable <!-- Row one is shown because the '1' evaluates to TRUE. --> {{ #if:1|{{!}}- ! scope=row {{!}} row one, column one <!-- Any {{!}}'s are evaluated to the pipe character '|' since the template '!' just contains '|'. --> {{!}}row one, column two}} <!-- Row two is NOT shown because the space between the ':' and the '|' evaluates to FALSE. --> {{ #if: |{{!}}- ! scope=row {{!}} row two, column one {{!}}row two, column two}} <!-- Row three is shown. --> |- ! scope=row {{!}} row three, column one | row three, column two|}Produces
There are several other CSS classes, besides the basic class=wikitable, documented above.
In the first line of table code, after the {|, instead of specifying a style directly, you can also specify a CSS class, which may be used to apply styles. The style for this class can be specified in various ways:
Instead of remembering table parameters, you just include an appropriate class after the {|. This helps keep table formatting consistent, and can allow a single change to the class to fix a problem or enhance the look of all the tables that are using it at once. For instance, this:
Wikitext
{| style="border-spacing: 2px;"|+ Multiplication table|-! scope=col | ×! scope=col | 1! scope=col | 2! scope=col | 3|-! scope=row | 1| 1 || 2 || 3|-! scope=row | 2| 2 || 4 || 6|}Produces
becomes this:
Wikitext
{| class=wikitable|+ Multiplication table|-! scope=col | ×! scope=col | 1! scope=col | 2! scope=col | 3|-! scope=row | 1| 1 || 2 || 3|-! scope=row | 2| 2 || 4 || 6|}Produces
simply by replacing inline CSS for the table by class=wikitable. This is because the wikitable class in MediaWiki:Common.css contains a number of table.wikitable CSS style rules. These are all applied at once when you mark a table with the class. You can then add additional style rules if desired. These override the class's rules, allowing you to use the class style as a base and build up on it:
Wikitext
{| class=wikitable style="font-style: italic; font-size: 120%; border: 3px dashed red;"|+ Multiplication table|-! scope=col | ×! scope=col | 1! scope=col | 2! scope=col | 3|-! scope=row | 1| 1 || 2 || 3|-! scope=row | 2| 2 || 4 || 6|}Produces
Notice that the table retains the gray background of the wikitable class, and the headers are still bold and centered. But now the text formatting has been overridden by the local style= statement; all of the text in the table has been made italic and 120% normal size, and the wikitable border has been replaced by the red dashed border.
The types of table syntax that MediaWiki supports are:
| syntaxAll three are supported by MediaWiki and create (currently) valid HTML output, but the pipe syntax is the simplest. Mixed HTML and wikicode | syntax (i.e., unclosed | and |- tags) don't necessarily remain browser-supported in the future, especially on mobile devices.
See also HTML element#Tables. Note, however, that the thead, tbody, tfoot, colgroup, and col elements are currently not not supported in MediaWiki, as of July 2015[update].
The pipe syntax, developed by Magnus Manske, substitutes pipes ( | ) and other symbols for HTML. There is an online script, which converts HTML tables to pipe-syntax tables.
The pipes must start at the beginning of a new line, except when separating parameters from content or when using || to separate cells on a single line. The parameters are optional.
A table is defined by {| parameters |}, which generates <table params>...</table>.
For each table, an HTML <tr> tag is generated for the first row. To start a new row, use:
|-
which generates another <tr>.
Parameters can be added like this:
|- params
which generates <tr params>.
Note:
<tr> tags are automatically opened before the first <td> equivalent<tr> tags are automatically closed at another <tr> equivalent and at the </table> equivalentCells are generated either like this:
|cell1|cell2|cell3
or like this:
|cell1||cell2||cell3
which both generate:
<td>cell1</td><td>cell2</td><td>cell3</td>.
The || equals a newline + | .
Parameters in cells can be used like this:
|params|cell1||params|cell2||params|cell3
which results in:
<td params>cell1</td><td params>cell2</td><td params>cell3</td>
The code used produces a <th>...</th>, functioning the same way as <td>...</td>, but with different style and semantic meaning. A ! character is used instead of the opening | , and !! can be used like ||, to enter multiple headers on the same line. Parameters still use "|", though. Example:
!params|cell1
A <caption> tag is created by|+captionwhich generates the HTML <caption>caption</caption>.
You can also use parameters:
|+params|caption
which generates <caption params>caption</caption>.
See {{Table cell templates}} for a large set of templates to configure text and color in cells in a standard way, producing stock output. For example: "Yes" ({{Yes}}), "No" ({{No}}), "—" ({{N/A}}), "N/A" ({{N/A|N/A}}), "?" ({{dunno}}), on colored backgrounds.
For example, see Comparison of text editors, which makes frequent use of table cell templates.
Sometimes it is desirable (such as in a table predominantly made of numbers) to rotate text such that it proceeds from top to bottom or bottom to top instead of from left to right or right to left. This can be done with CSS but the easiest way on Wikipedia is to enclose the text of each heading in a {{vertical header}} template. For example:
! {{vertical header|Date/Page}}If the text includes an equals sign then replace it with {{=}}.
If you want to use sticky headers with vertical headers it is important to make the sticky header less tall for cell phone use. {{abbr}} is one way. Also by moving some info to the table caption. See example with various methods at {{vertical header}}.
While tables should not normally be indented, when their surrounding paragraphs are also indented, you can indent tables using margin-left.
To achieve the same indentation as a colon, use margin-left:1.6em.
Wikitext
{| class="wikitable" style="margin-left:1.6em;"|-! Header 1! Header 2|-| row 1, cell 1| row 1, cell 2|-| row 2, cell 1| row 2, cell 2|}Produces
Note that indentation applied to only the first line of the table wikitext (the line that begins with "{|") is sufficient to indent the entire table.
:::{| class=wikitable
Do not attempt to use colons for indentation anywhere within the rest of the table code (not even at the beginning of a line), as that will prevent the MediaWiki software from correctly reading the code for the table.
style="padding: 3em 4em 5%;", the value 4em is used for both the "left" padding and the "right" padding, so the order going clockwise is: top (3em) → right [and hence also left] (4em) → bottom (5%); there is no "→ left" in this case because the "left" padding has already been defined. In style="padding: 3em 5%;", the value 3em is used for both the "top" and "bottom" padding while the value 5% is used for both the "left" and "right" padding, so the order going clockwise is: top [and hence also bottom] (3em) → right [and hence also left] (5%); there is no "→ bottom" nor is there "→ left" in this case because the "bottom" and "left" padding have already been defined. The same reasoning also applies to style="padding: 1em 20px 8% 9em;", and style="padding: 3%;".background: none to the entire table will, perhaps predictably, subtly alter its color palette.
Editing Wikitext/Tables at Wikibooks Editing Wikitext/Tables Ready to Use at Wikibooks