Таблица

Таблица — способ передачи информации на странице за счёт распределения данных по ячейкам, разделённым на горизонтальные строки и вертикальные столбцы (колонки).

Добавление и редактирование

Классический визуальный редактор

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

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

Если после добавления таблицы в неё потребуется какие-либо изменения, достаточно нажать на неё правой кнопкой мыши и во всплывающем окне выбрать необходимую опцию (можно работать с ячейками, строками и столбцами; также можно изменить ранее описанные свойства таблицы, а в случае необходимости — и вовсе удалить её).

Новый визуальный редактор

Добавление таблицы в новом визуальном редакторе ещё проще: достаточно использовать меню вставки, которое находится на панели со всеми инструментами. После его открытия появляется небольшая таблица (4 на 4), с которой уже можно продолжать работу.

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

Изменение количества столбцов

Дополнительно меню редактирования

Исходный код

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

Описание	Викитекст
Начало таблицы (<table>, обязательное)	{|
Заголовок страницы	|+
Начало строки таблицы (<tr>, в первой строке необязательно)	|-
Заглавная ячейка (<th>), если необходима: последовательность заглавных ячеек можно записывать на одной строке с двойными разделителями (!!) или начинать с новой строки, каждую со своим знаком (!).	! или !!
Обычная ячейка (<td>): последовательность ячеек можно записывать на одной строке с двойными разделителями (||) или начинать с новой строки, каждую со своим знаком (|).	| или ||
Конец таблицы (</table>, обязательное)	|}
Примечание. HTML-код, закрывающий теги для строк (</tr>), заголовков (</th>) или ячеек (</td>), будет добавлен автоматически.

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

Код	Результат
{| |Апельсин |Яблоко |- |Хлеб |Пирог |}	Апельсин Яблоко Хлеб Пирог

Оформление

Иногда может понадобится красиво и качественно оформить таблицу. В новом визуальном редакторе сделать это технически невозможно, а в режиме классического визуального — крайне трудно. Тут на помощь и приходит редактор исходный кода, в котором благодаря викиразметке, HTML и CSS можно практически полностью кастомизировать любую таблицу.

Объединение ячеек

Определить, к какой ячейке шапки таблицы применяется описание любой выделенной ячейки, можно благодаря атрибутам scope="row" или scope="col" на ячейках шапки таблицы. В большинстве случаев, с простыми таблицами, scope="col" используется на всех ячейках заголовка первой строки, а scope="row" — на первой ячейке следующих строк:

Код	Результат
{| class="wikitable" |- ! scope="col"| Предмет ! scope="col"| Количество ! scope="col"| Стоимость |- ! scope="row"| Хлеб | 0.3 kg | $0.65 |- ! scope="row"| Масло | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Всего | $1.90 |}	Предмет Количество Стоимость Хлеб 0.3 кг 30 р. Масло 0.125 кг 70 р. Всего 100 р.

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

Использование CSS

CSS сильно помогает в оформлении таблиц, позволяя значительно изменить их внешний вид и устройство.

С использованием различных атрибутов (например, color и background-color) можно изменить цвет текста и фона соответственно. К примеру, следующий код:

{|class="wikitable" style="color:coral; background-color:white;" cellpadding="10"
|Апельсин
|Яблоко
|-
|Персик
|Банан
|-
|Хлеб
|Пирог
|}

Даст такой результат:

Апельсин	Яблоко
Персик	Банан
Хлеб	Пирог

Можно добавлять заголовки и/или названия. Для этого нужно использовать разметку заголовка «|+ », после чего достаточно лишь использовать атрибут caption-side и указать, где будет находиться заголовок: внизу или вверху (top или bottom соответственно). Дополнительно можно указать и другие атрибуты (например, цвет):

{| class="wikitable"
|+ style="caption-side: top; color: steelblue;"|'''Комплект продуктов'''
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое
|}

В результате получится следующая таблица:

Комплект продуктов

Апельсин	Яблоко
Хлеб	Пирог
Масло	Мороженое

Помимо цвета и заголовка, можно изменить ширину столбца используя атрибут width с указанием ширины в процентах. Следующий код:

{| style="color: black; background-color: #ffffcc; width: 85%;"
| colspan="2" | Ширина этого столбца составляет 85% (цвет фона присутствует)
|-
| style="width: 30%; background-color: white;"|
'''Ширина этого столбца составляет 30% (без цвета фона)'''
| style="width: 70%; background-color: orange;"|
'''Ширина этого столбца составляет 70% (цвет фона присутствует)'''
|}

Даст такой результат:

Ширина этого столбца составляет 85 % (светло-жёлтый фон)
Ширина этого столбца составляет 30 % (белый фон)	Ширина этого столбца составляет 70 % (светло-голубой фон)

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

Использование классов

Как можно заметить, в ранее приведённых примерах кода есть упоминания классов (а именно — wikitable). В случае, когда надо применить одни и те же стили для разных таблиц, можно указать класс у таблицы, что позволяет уменьшить объём используемого для оформления кода и сделать его более читабельным. Также стоит учесть, что классы с использованием стилей (style) можно комбинировать. В общем случае на Фэндоме можно выделить два вида классов:

1. классы определённой вики;
2. встроенные классы.

Классы определённой вики

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

Наглядный пример — имеющийся в Wikia.css класс «navbox».

Код	Результат
{| class="navbox" |Апельсин |Яблоко |- |Хлеб |Пирог |}

Встроенные классы

На Фэндоме существуют встроенные классы для таблиц, которые позволяют изменить их оформление, — wikitable (стандартный класс MediaWiki), article-table и fandom-table.

Для того чтобы использовать эти классы, необходимо добавить на первую строку таблицы название нужного класса (например, {|class="wikitable").

Название класса	Особенности	Пример
wikitable	Видны все границы; отступы достаточно узкие.
article-table	Видны только горизонтальные границы; отступы у ячеек чуть шире, чем в wikitable; заголовки выровнены по началу строки.
fandom-table	Стиль похож на wikitable с бóльшими отступами и липким заголовком при прокрутке страницы.

Сортировка

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

Для того чтобы сделать таблицу сортируемой, достаточно добавить класс sortable в начало таблицы.

Таблица с сортировкой

Фрукт	Цена
Яблоко	10
Апельсин	100
Персик	20

Сортировка разных данных

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

• text — упорядочивает текст в алфавитном порядке;
• number — учитывает числовое значение, первый элемент может быть цифрой, запятой, точкой, пробелом, «-» или «+»;
• currency — валюта, элемент должен начинаться с символа валюты $, £, €, или ¥ без пробелов (например: $100, ¥10000);
• date — дата;
• time — время.

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

Код	Результат
{| class="article-table sortable" !Наименование !data-sort-type="currency"|Валюта |- |Яблоко |$60 |- |Слива |£100 |- |Апельсин |€80 |}	Наименование Валюта Яблоко $60 Слива £100 Апельсин €80

Сортировка по значениям

Иногда записанное значение в колонке не соответствует тому, как оно должно быть упорядочено. В этом случае можно использовать для ячейки код data-sort-value="…".

Пример:

Код	Результат
{| class="article-table sortable" !Фрукт !Количество |- |Яблоко | data-sort-value="5"|Пять |- |Слива | data-sort-value="0"|Ноль |- |Апельсин | data-sort-value="8"|Восемь |}	Фрукт Количество Яблоко Пять Слива Ноль Апельсин Восемь

Колонки, которым не требуется сортировка

Если в таблице есть колонка, значения в которой не нужно сортировать, в её заголовки необходимо указать class="unsortable".

Код	Результат
{| class="article-table sortable" |- !Фрукт ! class="unsortable" |Описание |- |Яблоко |Красное, большое |- |Слива |Лиловая, маленькая |- |Апельсин |Оранжевый, большой |}	Фрукт Описание Яблоко Красное, большое Слива Лиловая, маленькая Апельсин Оранжевый, большой

Сворачивание

Иногда может потребоваться сделать таблицу сворачиваемой. Для этого можно использовать атрибут class со значением mw-collapsible.

Код	Результат
{| class="article-table mw-collapsible" ! Продукт !! Цена |- | Персик || 100 руб. |- | Яблоко || 110 руб. |- | Апельсин || 120 руб. |}	Продукт Цена Персик 100 руб. Яблоко 110 руб. Апельсин 120 руб.

Помимо этого, можно сделать таблицу скрытой по умолчанию. Для этого нужно добавить «mw-collapsed» к предыдущим «article-table mw-collapsible». В результате таблица примет следующий вид:

Заголовок	виден
Содержимое	скрыто

С помощью значения mw-customtoggle-myTable можно также изменить кнопку показа таблицы. К примеру, следующий код:

{| class="article-table mw-collapsible" id="mw-customcollapsible-myTable"
! Фрукты !! Овощи
|-
| Яблоко || Огурец
|-
| Абрикос || Салат
|}
<div class="mw-customtoggle-myTable wikia-menu-button">
Открыть/закрыть таблицу</div>

Даст такой результат:

Фрукты	Овощи
Яблоко	Огурец
Абрикос	Салат

Открыть/закрыть таблицу

Использование

• Логично, что для представления данных в табличном виде нужно использовать таблицы, но их также можно использовать для разделения текста (например, для его отображения в нескольких колонках).
• На большинстве проектов присутствуют навигационные шаблоны, которые создаются с использованием таблиц. Они могут быть как и достаточно простые по строению, так и с довольно сложной структурой.
• Также таблицы имеют неплохой потенциал для использования в декоративных целях — например, с их помощью можно создать как шаблон-плашку (таблица с 1-2 ячейками), так и достаточно большой шаблон с огромным количеством содержимого.

Галерея

Пример простой навигационной таблицы

Пример навигационной таблицы со сложной структурой

Пример шаблона-плашки

Использование таблицы для шаблона