Как сделать сложную таблицу

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

Основное

Для примера возьмём простую таблицу из статьи про заклинание.

{| class="bg-table" style="width:60%" ! width="25%"|Уровень ячейки ! Эффект заклинания |- |4-й |[[Файл:Иконка Кубик 1d10.png|40px]] 4d10 ед. {{Стат|психического урона}} за ход |- |5-й |[[Файл:Иконка Кубик 1d10.png|40px]] 5d10 ед. {{Стат|психического урона}} за ход |- |6-й |[[Файл:Иконка Кубик 1d10.png|40px]] 6d10 ед. {{Стат|психического урона}} за ход |}

Где

• {| — знак начала таблицы,
• class="bg-table" — стиль таблицы, который определяет её внешний вид,
• style="width:60%" — ширина таблицы в % от экрана,
• ! width="25%"|Уровень ячейки и ! Эффект заклинания — верхняя стока с названиями столбцов,
• |- — разделитель между строками,
• | обозначение для ячейки,
• |} — знак конца таблицы.

Кроме этого:

• |+ — заголовок таблицы (размещается между строкой со стилем и строкой с названиями столбцов, отделяется знаком |-).

Теперь подробнее.

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

Задаются в первой строке, которая в примере выглядит как

{| class="bg-table" style="width:60%"

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

{| class="bg-table" style="width:60%; text-align:left"

выровняет таблицу по левому краю.

Стили таблицы

{| class="bg-table"

— основной стиль для этой википедии. Имеет выравнивание по центру (и по вертикали, и по горизонтали) и особое оформление шапки и границ. В ней не работают некоторые функции, которые доступны другим таблицам, например, невидимые границы или поворот текста в ячейке. Но по умолчанию лучше использовать этот стиль, если нет явной потребности в другом варианте. Статья с примером.

{| class="article-table"

— таблица с базовым оформлением без вертикальных границ и с полупрозрачным фоном. Выравнивание по левому краю. Статья с примером (раздел «Школы»).

{| class="wikitable"

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

fandom-table

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

{| class="wiki-table"

— таблица без видимых границ и без фона. Можно использовать для выравнивания изображений, если по каким-то причинам нельзя использовать тег галереи. Статья с примером.

Ширина для всей таблицы

Определяется значением

style="width:60%"

Если этой части не будет, таблица со стилем «bg-table» займёт 100% ширины страницы (что хорошо подходит для больших таблиц), а «wikitable» сожмёт столбцы до ширины содержимого, что может дать разный размер для таблиц на одной странице. 60% — то значение, которое нужно, чтобы таблица не смещалась из-за инфо-бокса на странице, если они оказываются на одной высоте (пример). Кроме того, иногда в таблице слишком мало данных, чтобы она красиво выглядела, если растянуть её на весь экран.

Обтекание текстом

style="width:40%; float:right; margin: 0 0 1em 1em;"

В сочетании с уменьшением ширины, маленькие таблицы можно размесить сбоку от текста, сделав обтекание. Значение «float:» указывает, у какого края страницы будет находится таблица. Цифры после «margin:» отвечают за ширину отступов сверху, снизу, слева и справа.

Выравнивание для текста всей таблицы

style="text-align:center"

— по центру.

style="text-align:left"

— по левому краю.

style="text-align:right"

— по правому краю.

Скрытие границ

После значка |- можно установить параметры для строки. Нужно будет повторить для каждой строки в таблице.
Этот код скроет верхние и нижние границы всей строки.

|- style="border-bottom:hidden; border-top:hidden"

Этот — левую и правую.

|- style="border-left: hidden; border-right: hidden"

Обратите внимание, что это не работает с таблицей стиля bg-table.

Ячейки

Обозначаются знаком | в начале строки. Если поставить вместо него !, стиль ячейки изменится. В таблицах по умолчанию это будет белый или серый фон, в bg-wiki — коричневая подложка.

Ячейки будут идти слева направо в одной строке, пока не появится знак |-, означающий начало новой строки.

Задать стиль ячейке можно оформив ячейку так:

| width="15%" align="center" |1

где

• width — ширина столбца.
• align="center" — выравнивание.
• 1 — текст ячейки, который будет отображаться. Обязательно отделяется ещё одним знаком |.
  
  

Для строки с подзаголовками этот же код будет выглядеть так:

! width="15%" align="center" |1

Ширина

Определяется значением

width="15%"

Достаточно задать для верхней строки, остальные будут выровнены автоматически. Если ширина задаётся для всех столбцов, в сумме не должно быть больше 100% или последний столбец будет проигнорирован.

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

Выравнивание в ячейке

По горизонтали (варианты с left и right):

align="center"

По вертикали (варианты с center и bottom):

valign="top"

Изменение цвета фона одной ячейки и его прозрачности

Фон

style="background-color:DimGrey"

Цвет для фона можно взять из таблицы цветов HTML.
Чтобы сделать полупрозрачный фон, надо использовать цвет в формате «background-color:#3a3a3a3f;», где первые 6 знаков (3a3a3a) отвечают за сам цвет (просто копируйте их из таблицы цветов), а последние два (3f) — за прозрачность в диапазоне от 00 (полностью прозрачный) до ff (непрозрачный).

style="background-color:#3a3a3a3f;"

Варианты:

Изменение цвета текста одной ячейки

Текст

<div style="color:aqua;">Текст ячейки</div>

Вставляется уже непосредственно после значка |.

Уменьшение или увеличение текста

Задаётся параметром «font-size»

|style="font-size:small"|Текст ячейки |style="font-size:larger"|Текст ячейки

Сложные таблицы

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

Иногда есть потребность в таблицах с объединёнными ячейками, причём как по горизонтали, так и по вертикали.

Две ячейки в одной строке можно объединить с помощью значения «colspan». Для этого в свойствах строки нужно прописать

|colspan="2"|Текст

где значение в кавычках меняется в зависимости от количества объединяемых столбцов. Обратите внимание, что в той строке, где есть объединённые ячейки, самих ячеек (знак |) меньше.

Две ячейки в одном столбце можно объединить с помощью значения «rowspan».

|rowspan="2"|Текст

Объединяются ячейки от той, что с параметром и ниже, забирая ячейки из следующих строк.

Примеры сочетаний объединения

Colspan и rowspan в одной ячейке

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

colspan="2" rowspan="2"

Colspan в середине таблицы

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

Rowspan в середине таблицы

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

Комбинация colspan и rowspan

Иногда есть потребность сделать сложную шапку в таблице, например, как в этой статье, где часть шапки имеет два уровня, а часть — один.

В этом случае шапка будет поделена на 2 части знаком |-. Та часть, что соприкасается с верхней границей таблицы будет над ним, та часть, которая не соприкасается с ней — под ним. Чтобы добиться нужного эффекта, задайте «rowspan="2"» в свойствах тех строк, которые должны быть высотой на всю шапку.

В свойствах ячейки, которая нависает над другими, задайте «colspan="X"».

Пересечение colspan и rowspan

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

Другие функции

Поворот текста

К стилю ячейки нужно добавить параметр «transform:rotate». Значение можно менять по необходимости. Лучше использовать вместе с выравниванием по центру. Не работает со стилем «bg-table».

style="transform:rotate(-45deg)"

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

Добавление параметра «sortable» к свойствам стиля.

{| class="bg-table sortable"

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

!class="unsortable"|Буквы

Сворачиваемая таблица

Добавление параметра «mw-collapsible» к свойствам стиля.

{| class="bg-table mw-collapsible"

Позволяет свернуть таблицу. Комбинируется с «sortable» (просто добавить через пробел). Пример таблицы с обеими функциями.

Гиперссылки внутри таблицы

Если нужно сделать ссылку на какой-нибудь элемент таблицы с этой же страницы, то достичь этого можно следующим образом.

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

[[#Уровень 3|Уровень 3]]

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

<span id="Уровень 3">Уровень 3</span>

Часть

<span id="Уровень 3">

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

...где он потерял свой [[#Меч персонажа|меч]]... <span id="Меч персонажа">Экипировка</span>

Примечание для таблицы

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

colspan="2" style="text-align:left; font-size:small"

Полезные советы

Если в таблице используются списки (знак *) или отрицательные числа в начале строки (например, -2), то их нужно переносить на новую строку. Иначе они будут неправильно отображаться. Пример:

| * Пункт 1 * Пункт 2 |-