Таблица — это набор столбцов и строк, который организует и размещает данные или изображения. Таблицы можно создавать на страницах Википедии с использованием специального синтаксиса викитекста , и для их настройки можно использовать множество различных стилей и приемов.
Таблицы можно использовать в качестве инструмента форматирования, но вместо этого рассмотрите возможность использования многоколоночного списка .
Чтобы автоматически вставить таблицу, нажмите
или (Вставить таблицу) на панели инструментов редактирования . На панели инструментов «Вектор» значок таблицы находится в меню «Дополнительно». Если «Вставить таблицу» отсутствует на панели инструментов, следуйте этим инструкциям, чтобы добавить ее.
При нажатии кнопки «Вставить таблицу» вставляется следующий текст :
{| 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
Отображение первой трубы, когда она является третьей трубой в коде ячейки.
Викитекст
{| класс = викитаблица |- | '' форматирование '' | П|я|п|е| | С | е|л|л|2| |- | '' форматирование '' | П|я|п|е || '' форматирование '' | C|e|l|l|2| |- || P|i|p|e|s || С | е|л|л|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 сплошной черный;" | α | 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 |} Производит
Чтобы заставить ячейку соответствовать одному из цветов шаблона по умолчанию class=wikitable, используйтеstyle="background-color:#EAECF0;" для более темного заголовка иstyle="background-color:#F8F9FA;" для более светлого тела. #A2A9B1 — цвет границы вики-таблиц.
Избегайте использования background: noneили background: transparent. Смотрите:
style="background-color:…"работает в сортируемых ячейках заголовков. style="background:…"не работает. Это нарушает сортировку в этой ячейке. См. Help:Sortable tables . Поэтому используйте style="background-color:…"для всех ячеек заголовков столбцов, независимо от того, сортируются они в данный момент или нет. Кто-то может попытаться сделать их сортируемыми позже.
Смотрите цвета ссылок для различных скинов: Справка:Цвет ссылки#Стандартные цвета . Непосещенная векторная ссылка: #3366CC. Посещенная векторная ссылка: #795CB2.
Проверьте контрастность цвета ссылки с цветом фона и цветом текста:
Замените белый векторный фон по умолчанию (#FFFFFF) различными цветами фона:
Из MOS:COLORS : Для скина Vector 2022 по умолчанию нормальный цвет текста — #202122, а не посещенная синяя ссылка — #3366CC. «Когда ссылки и отсылки отсутствуют, дополнительный контраст возможен путем установки цвета текста на чисто черный (#000000). Если требуется темный фон, его следует использовать на белом тексте (#FFFFFF) без ссылок и отсылок».
В темном режиме в ячейках таблицы пространства имен статьи с фоновыми цветами есть черные подчеркнутые ссылки. Например:
Таким образом, любая ячейка с приемлемым по WCAG контрастом цвета ссылки в светлом режиме имеет еще лучший контраст цвета ссылки в темном режиме.
К сожалению, ссылки только черные в пространстве имен статьи. Не в template, help, talk, user и других пространствах имен. Например, см. шаблон таблицы Испании из указанной выше статьи: Template:2022–23 La Liga table .
Обычно копирование и вставка столбцов или строк удаляет встроенные стили CSS, такие как цвета ячеек. Существует способ разбить таблицу (например, слишком широкую таблицу) на несколько таблиц без потери всех фоновых цветов и других встроенных стилей. Скопируйте таблицу в 2 песочницы (или в одну песочницу и в саму статью). Затем удалите ненужные столбцы в одной из новых таблиц. Повторите в другой песочнице (или в статье), за исключением удаления других столбцов.
Существует множество таблиц off-wiki с полезной раскраской, которая соответствует стандартам доступа WCAG . В настоящее время, похоже, нет способа скопировать эти таблицы в вики и сохранить стили, такие как цвета (цвет фона или текста). Можно преобразовать таблицы PDF в Excel и сохранить цвета. Или в таблицы HTML и сохранить цвета. Но, похоже, нет способа скопировать любую из этих цветных таблиц (PDF, Excel, HTML и т. д.) в вики. Если есть способ, пожалуйста, оставьте заметку на Help talk:Table .
При желании можно сохранить раскраску, скопировав таблицу как изображение. Это может быть необходимо для часто обновляемых цветных таблиц, где было бы слишком много времени добавлять цвет ко многим ячейкам после каждого обновления. Для большинства таблиц данных, цветных или нет, нет проблем с авторскими правами. Они находятся в общественном достоянии. Смотрите Commons:Template:PD-chart.
См. {{ Шаблоны ячеек таблиц }} для большого набора шаблонов для настройки текста и цвета в ячейках стандартным способом, создавая стандартный вывод. Например: "Да" ( ), "Нет" ( ), "—" ( ), " N/A " ( ), "?" ( ), на цветном фоне.{{Yes}}{{No}}{{N/A}}{{N/A|N/A}}{{dunno}}
Например, см. Сравнение текстовых редакторов , в которых часто используются шаблоны ячеек таблиц.
В начале ячейки добавьте свой параметр, за которым следует одинарная вертикальная черта. Например, 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: двойной 5px синий;border-left: пунктирная 6px желтая; </ pre > |}Производит
style='border-style:'Чтобы задать левую, правую, нижнюю или верхнюю границу одной ячейки, можно использовать style='border-style:'функцию, которая принимает от 1 до 4 аргументов, каждый из которых имеет значение none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, или initial.
Эти аргументы упорядочены в соответствии с шаблоном, описанным здесь. Например, style="border-style: solid none solid none;"где четыре параметра соответствуют границам
'border-style: top right bottom left;'
ячейки. По причинам, описанным после этого примера, существует много способов изменить следующий код , которые не приведут к каким-либо изменениям в таблице, которая фактически отображается .
Викитекст
{| class = wikitable |- | Top_Left <!-- border-style: верхний правый нижний левый; --> | style = "border-style: сплошной сплошной 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: сплошной сплошной none none;" | Middle_Right |- | Bottom_Left | style = "border-style: none none solid solid;" | Bottom_Center | Bottom_Right |} Производит
Однако следует отметить, что в следующей таблице границы ни одной из центральных ячеек (т.е. Middle_Center) не удаляются, несмотря на код style="border-style: none none none none;":
Викитекст
{| 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 |} Производит
Это происходит потому, что код class="wikitable"размещает границу (верхнюю, правую, нижнюю и левую) вокруг каждой ячейки в таблице, так что, например, между ячейками "Middle_Center" и "Middle_Right" на самом деле есть две границы. Таким образом, чтобы удалить границу между ячейками "Middle_Center" и "Middle_Right", необходимо удалить как правую границу "Middle_Center" , так и левую границу "Middle_Right":
Викитекст
{| 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 <!-- В приведенной выше строке три самых левых аргумента "none" можно заменить на "solid" (или другие допустимые аргументы), и в отображаемой таблице не будет никаких изменений. Только четвертый аргумент, который является левой границей Middle_Right, должен быть "none". Например, приведенную выше строку можно заменить на: | style="border-style: solid solid solid none;" | Middle_Right --> |- | Bottom_Left || Bottom_Center || Bottom_Right |} Производит
Чтобы удалить выбранные внешние границы вики-таблицы, удалите их из соседних ячеек и начните всю таблицу с кода, подобного {| class="wikitable" style="border: none;".
Обратите внимание , что замена {| class="wikitable"на
{| style="border-collapse: collapse;"
приводит к удалению всех границ ячеек, которые в противном случае отображались бы по умолчанию вокруг каждой ячейки в таблице. При этом изменении вам необходимо вставить одну границу ячейки между двумя соседними ячейками, а не удалять две границы ячеек.
См. разделы Help:Sortable tables по номерам строк. А также:
В таблице, которая охватывает всю ширину страницы, ячейки, которые уже самой широкой ячейки, имеют тенденцию к переносу. Чтобы предотвратить перенос всего столбца, используйте style="white-space: nowrap;"в ячейке без заголовка в самой длинной/широкой ячейке, чтобы повлиять на весь столбец. Однако это не очень хорошая идея, поскольку в сотовых телефонах столбец не будет переноситься, а часть таблицы может выходить за пределы экрана (особенно в портретном режиме).
Без nowrap, как это выглядит в браузере:
Викитекст
{| class = "wikitable sortable" |- ! scope = col | Эпизод ! scope = col | Дата ! scope = col | Краткое содержание |- | "Путешествие начинается" | 1 января 2010 г. |[[ Lorem ipsum ]] ... <!-- Этот текст является усечением фактического (длинного) текста, отображаемого в выводе ниже --> |} Производит
С nowrap, в столбцах Эпизод и Дата, как это выглядит в браузере:
Викитекст
{| class = "wikitable sortable" |- ! scope = col | Эпизод ! scope = col | Дата ! scope = col | Краткое содержание |- | style = "white-space: nowrap;" | "Путешествие начинается" | style = "white-space: nowrap;" | 1 января 2010 г. |[[ Lorem ipsum ]] ... <!-- Этот текст является усечением реального (длинного) текста, отображаемого в выводе ниже --> |} Производит
Вы можете добавлять подсказки к столбцам, используя шаблон {{ Tooltip }} . Просто замените заголовок столбца на {{Tooltip|Column title|The tool tip}}, что придаст ему следующий вид: Заголовок столбца .
В некоторых случаях, когда таблицы настолько велики по горизонтали, что выходят за границы одного из скинов Википедии, например Vector, можно использовать следующий код. Поместите следующий код над инициализацией wikitable:
< div класс = "overflowbugx" стиль = "overflow-x:auto;" >Затем после закрывающей скобки для wikitable поместите следующий код:
</ див >Это предотвратит прокрутку всей страницы при горизонтальной прокрутке таблицы.
{{diagonal split header|HEADER-FOR-ROW-HEADERS|HEADER-FOR-COLUMN-HEADERS}}можно использовать для диагонального разделения ячейки заголовка, как в верхней левой ячейке в отрисованном результате ниже: [примечание 3]
Викитекст
{| class = wikitable ! {{diagonal split header|From|To}} ! Твердое тело !! Жидкость !! Газ |- ! Твердое тело | Превращение твердое тело-твердое тело || Плавление || Сублимация |- ! Жидкость | Замерзание || {{ sdash }} || Кипение/испарение |- ! Газ | Осаждение || Конденсация || {{ sdash }} |} Производит
Границы ячеек можно скрыть, добавив border: none; background: none;атрибуты стиля таблицы или ячейки, [примечание 4], хотя это может не работать в старых браузерах. Другой вариант использования этого — реализация выровненных многоколоночных таблиц:
Викитекст
{| 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 ( оценка ) || 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 > (оценка) |} Производит
Независимо от того, используется ли формат wikitable или HTML, вики-текст строк в таблице, а иногда даже в коллекции таблиц, может иметь много общего, например:
В таком случае может быть полезно создать шаблон, который создает синтаксис для строки таблицы, с данными в качестве параметров. Это может иметь много преимуществ:
display: none;с целью иметь один формат для сортировки и другой для отображенияПример:
С использованием{{Help:Table/example row template}}
Викитекст
{| class = "wikitable sortable" |- ! scope = col | a ! scope = col | b ! scope = col | a/b {{ Help : Шаблон строки таблицы/примера | 50 | 200 }} {{ Help : Шаблон строки таблицы/примера | 8 | 11 }} {{ Help : Шаблон строки таблицы/примера | 1000 | 81 }} |} Производит
Для условной строки в таблице мы можем иметь:
Викитекст
{| класс = wikitable {{ #if : 1 |{{ ! }} - ! scope=row {{ ! }} строка первая, столбец первый {{ ! }} строка первая, столбец два }} {{ #if : |{{ ! }} - ! scope=row {{ ! }} строка два, столбец один {{ ! }} строка два, столбец два }} |- ! scope=row {{!}} строка три, столбец один | строка три, столбец два |} Производит
С комментариями, объясняющими, как это работает. Обратите внимание, что отсутствует вторая строка:
Викитекст
{| class = wikitable <!-- Первая строка показана, поскольку «1» оценивается как ИСТИНА. --> {{ #if : 1 |{{ ! }} - ! scope=row {{ ! }} строка один, столбец один <!-- Любые {{!}} оцениваются как символ вертикальной черты '|', поскольку шаблон '!' содержит только '|'. --> {{ ! }} строка один, столбец два }} <!-- Строка два НЕ отображается, поскольку пробел между ':' и '|' оценивается как ЛОЖЬ. --> {{ #if : |{{ ! }} - ! scope=row {{ ! }} строка два, столбец один {{ ! }} строка два, столбец два }} <!-- Показана строка три. --> |- ! scope=row {{!}} строка три, столбец один | строка три, столбец два |} Производит
Помимо базовых классов CSSclass=wikitable , описанных выше, существует несколько других .
В первой строке кода таблицы, после {|, вместо указания стиля напрямую, вы также можете указать класс CSS, который может использоваться для применения стилей. Стиль для этого класса может быть указан различными способами:
Вместо запоминания параметров таблицы вы просто включаете соответствующий класс после {|. Это помогает поддерживать единообразие форматирования таблицы и может позволить одним изменением класса исправить проблему или улучшить внешний вид всех таблиц, которые его используют, одновременно. Например, это:
Викитекст
{| style = "border-spacing: 2px;" |+ Таблица умножения |- ! scope = col | × ! scope = col | 1 ! scope = col | 2 ! scope = col | 3 |- ! scope = row | 1 | 1 || 2 || 3 |- ! scope = row | 2 | 2 || 4 || 6 |} Производит
становится таким:
Викитекст
{| class = wikitable |+ Таблица умножения |- ! scope = col | × ! scope = col | 1 ! scope = col | 2 ! scope = col | 3 |- ! scope = row | 1 | 1 || 2 || 3 |- ! scope = row | 2 | 2 || 4 || 6 |} Производит
просто заменив встроенный CSS для таблицы на class=wikitable. Это происходит потому, что wikitableкласс в MediaWiki:Common.css содержит ряд table.wikitableправил стиля CSS. Они применяются все сразу, когда вы отмечаете таблицу классом. Затем вы можете добавить дополнительные правила стиля, если хотите. Они переопределяют правила класса, позволяя вам использовать стиль класса в качестве основы и надстраивать его:
Викитекст
{| class = wikitable style = "font-style: italic; font-size: 120%; border: 3px dashed red;" |+ Таблица умножения |- ! scope = col | × ! scope = col | 1 ! scope = col | 2 ! scope = col | 3 |- ! scope = row | 1 | 1 || 2 || 3 |- ! scope = row | 2 | 2 || 4 || 6 |} Производит
Обратите внимание, что таблица сохраняет серый фон класса wikitable, а заголовки по-прежнему полужирные и центрированные. Но теперь форматирование текста было переопределено локальным оператором style=; весь текст в таблице был сделан курсивом и 120% обычного размера, а граница wikitable была заменена красной пунктирной границей.
MediaWiki поддерживает следующие типы синтаксиса таблиц:
| Синтаксис ВикикодаВсе три поддерживаются MediaWiki и создают (в настоящее время) допустимый вывод HTML, но синтаксис pipe является самым простым. Смешанный | синтаксис HTML и wikicode (т. е. незакрытый | и |-теги) не обязательно останется поддерживаемым браузером в будущем, особенно на мобильных устройствах.
См. также HTML element#Tables . Обратите внимание, однако, что элементы thead, tbody, tfoot, colgroup, и colв настоящее время не поддерживаются в MediaWiki , по состоянию на июль 2015 [update]г.
Синтаксис pipe, разработанный Магнусом Манске, заменяет символы pipe ( | ) и другие символы для HTML. Существует онлайн-скрипт, который преобразует таблицы HTML в таблицы синтаксиса pipe.
Вертикальные линии должны начинаться в начале новой строки, за исключением случаев разделения параметров от содержимого или использования ||для разделения ячеек на одной строке. Параметры необязательны.
Таблица определяется как , которая генерирует .{| parameters |}<table params>...</table>
Для каждой таблицы HTML- <tr>тег генерируется для первой строки. Чтобы начать новую строку, используйте:
|-
который генерирует другой <tr>.
Параметры можно добавлять следующим образом:
|- параметры
который генерирует .<tr params>
Примечание:
<tr>теги автоматически открываются перед первым <td>эквивалентом<tr>теги автоматически закрываются на другом <tr>эквиваленте и на </table>эквивалентеЯчейки генерируются следующим образом:
| ячейка1 | ячейка2 | ячейка3
или так:
| ячейка1 || ячейка2 || ячейка3
которые оба генерируют:
<td>cell1</td><td>cell2</td><td>cell3</td>.
Равнозначно ||новой строке + | .
Параметры в ячейках можно использовать следующим образом:
| параметры | ячейка1 || параметры | ячейка2 || параметры | ячейка3
что приводит к:
<td params>cell1</td><td params>cell2</td><td params>cell3</td>
Используемый код создает <th>...</th>, функционирующий так же, как <td>...</td>, но с другим стилем и семантическим значением . ! Символ используется вместо открывающего | , и !!может использоваться как ||, для ввода нескольких заголовков в одной строке. Однако параметры по-прежнему используют "|". Пример:
! параметры | ячейка1
<caption>Создается тег, с помощью которого
генерируется HTML .|+caption<caption>caption</caption>
Вы также можете использовать параметры: |+ params | caption, которые генерируют .<caption params>caption</caption>
Иногда желательно (например, в таблице, состоящей преимущественно из чисел) повернуть текст так, чтобы он шел сверху вниз или снизу вверх, а не слева направо или справа налево. Это можно сделать с помощью CSS, но самый простой способ в Википедии — заключить текст каждого заголовка в шаблон {{ vertical header }} . Например:
! {{ вертикальный заголовок | Дата/Страница }}Если текст содержит знак равенства, замените его на {{=}}.
Если вы хотите использовать липкие заголовки с вертикальными заголовками, важно сделать липкий заголовок менее высоким для использования на мобильном телефоне. {{ abbr }} — один из способов. Также можно переместить некоторую информацию в заголовок таблицы. Смотрите пример с различными методами в {{ vertical header }} .
Хотя таблицы обычно не должны иметь отступов, если их окружающие абзацы также имеют отступы, вы можете сделать отступ для таблиц с помощью margin-left.
Чтобы получить такой же отступ, как у двоеточия, используйте margin-left:1.6em.
Викитекст
{| class = "wikitable" style = "margin-left:1.6em;" |- ! Заголовок 1 ! Заголовок 2 |- | строка 1, ячейка 1 | строка 1, ячейка 2 |- | строка 2, ячейка 1 | строка 2, ячейка 2 |} Производит
Обратите внимание, что отступ, примененный только к первой строке вики-текста таблицы (строке, начинающейся с « {|»), достаточен для отступа всей таблицы.
:::{| class=wikitable
Не пытайтесь использовать двоеточия для отступа где-либо в остальной части кода таблицы (даже в начале строки), так как это помешает программному обеспечению MediaWiki правильно прочитать код таблицы.
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