Таблиці можна створювати на сторінках вікі, використовуючи або безпосередньо розмітку XHTML, або вікірозмітку, призначену для таблиць. Розмітка XHTML має стосунок до веб-розробки й тут детально обговорюватися не буде. Перевага вікірозмітки над нею полягає у звичному наборі символів синтаксису та більшій його наочності для дописувача.
Тим не менше, уникайте таблиць, коли тільки можливо. Вікірозмітка таблиці все ж таки ускладнює редагування сторінки.
Вікірозмітка таблиць: стисло
{|
|
початок таблиці
|
|+
|
заголовок таблиці, опціонально; лише між початком таблиці та першим рядком таблиці
|
|-
|
рядок таблиці, для першого рядку опціонально -- рушій вікі сам розрізнить перший рядок
|
!
|
комірка заголовку таблиці, опціонально. Послідовні комірки заголовку таблиці можна додавати в тому самому рядку, розділяючи двома знаками оклику (!! ), або на сусідніх рядках, починаючи кожен знаком оклику (! ).
|
|
|
комірка даних таблиці, необхідно! Послідовні комірки даних таблиці можна додавати на один рядок, розділяючи двома вертикальними рисками (|| ), або на сусідні рядки, починаючи кожен вертикальною рискою (| ).
|
|}
|
кінець таблиці
|
- Всі вищезазначені елементи розмітки мають знаходитися на початку рядка, за винятком подвійних
||
та !!
. Пропуски на початку елементу таблиці ігноруються.
- Атрибути XHTML. Кожен знак розмітки, крім кінця таблиці, може сприймати один чи більше атрибутів XHTML. Вони мають знаходитися в тому самому рядку, що й символ розмітки. Атрибути відокремлюються один від одного одним пропуском.
- Комірки та підписи (
|
чи ||
, !
чи !!
, та |+
) містять вміст таблиці. Будь-які атрибути від вмісту слід відділяти вертикальною рискою (|
). Вміст комірки може знаходитися в тому самому рядку чи в наступних.
- Розмітка таблиці й рядку (
{|
та |-
) безпосередньо не містить даних. Не додавай вертикальну риску (|
) після їхніх атрибутів, якщо вони є. Помилкове її додавання може привести до ігнорування останнього атрибуту.
- Вміст може (a) слідувати за опціональними атрибутами XHTML в тому самому рядку чи (b) розташовуватися на рядках під знаком розмітки. Вміст, власне форматування якого потребує нового рядку, як-от списки, заголовки, вкладені таблиці, має на виконання цих вимог сам починатися з нового рядку.
- Екранування символу риски (
|
), аби відобразити його як звичайний символ, досягається розміткою <nowiki> чи шаблоном {{!}}.
Основи
Наступна таблиця не має межі та погано сформована, але це проста демонстрація структури вікірозмітки.
Ти пишеш
|
Відображується як
|
{|
|Апельсин
|Яблуко
|-
|Хліб
|Пиріг
|-
|Масло
|Морозиво
|}
|
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
Масло
|
Морозиво
|
|
Комірки одного рядку таблиці можна поєднати в один рядок тексту, розділюючи їх подвоєним символом ||
(дві вертикальні риски). Якщо текст всередині комірки має містити перехід на новий рядок, пиши натомість <br />
.
Ти пишеш
|
Відображується як
|
{|
|Апельсин||Яблуко||і ще щось
|-
|Хліб||Пиріг||і ще щось
|-
|Масло||Морозиво||і знов-таки<br />іще щось
|}
|
Апельсин |
Яблуко |
і ще щось
|
Хліб |
Пиріг |
і ще щось
|
Масло |
Морозиво |
і знов-таки іще щось
|
|
Зайві пропуски всередині комірок зі змістом у вікірозмітці не впливають на відображення таблиці, як показано нижчк.
Ти пишеш
|
Відображується як
|
{|
| Апельсин || Яблуко || і ще щось
|-
| Хліб || Пиріг || і ще щось
|-
| Масло || Морозиво || й більше того
|}
|
Апельсин |
Яблуко |
і ще щось
|
Хліб |
Пиріг |
і ще щось
|
Масло |
Морозиво |
й більше того
|
|
Всередині комірки можна записати довгий текст чи складнішу вікірозмітку:
Ти пишеш
|
Відображується як
|
{|
|Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
|
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
|
- Lorem ipsum dolor sit amet
- consetetur sadipscing elitr
- sed diam nonumy eirmod tempor invidunt
|
|
Комірки заголовків
Комірки заголовків таблиці створюються заміною риски "|
" знаком оклику "!
". За замовчуванням заголовки центровані та відображуються напівжирним.
Ти пишеш
|
Відображується як
|
{|
! Предмет
! Кількість
! Ціна
|-
|Апельсин
|10
|7.00
|-
|Хліб
|4
|3.00
|-
|Масло
|1
|5.00
|-
!Разом
|
|15.00
|}
|
Предмет
|
Кількість
|
Ціна
|
Апельсин
|
10
|
7.00
|
Хліб
|
4
|
3.00
|
Масло
|
1
|
5.00
|
Разом
|
|
15.00
|
|
Підпис таблиці
Можеш додати підпис таблиці у верхній її рядок, як вказано нижче.
Ти пишеш
|
Відображується як
|
{|
|+Склад сніданку
|-
|Апельсин
|Яблуко
|-
|Хліб
|Пиріг
|-
|Масло
|Морозиво
|}
|
Склад сніданку
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
Масло
|
Морозиво
|
|
Атрибути XHTML
Таблиці можна форматувати детальніше за допомогою атрибутів XHTML. Детальний опис (англійською) можна знайти тут: W3C's HTML 4.01 Specification page on tables.
Атрибути таблиці
Дія атрибутів, вказаних після тегу початку таблиці ({|
), поширюється на всю таблицю.
Ти пишеш
|
Відображується як
|
{| border="1"
|Апельсин
|Яблуко
|12,333.00
|-
|Хліб
|Пиріг
|500.00
|-
|Масло
|Морозиво
|1.00
|}
|
Апельсин
|
Яблуко
|
12,333.00
|
Хліб
|
Пиріг
|
500.00
|
Масло
|
Морозиво
|
1.00
|
|
Атрибути окремих комірок
Атрибути можна додавати до окремих комірок. Приміром, якщо вміст окремих комірок слід вирівняти праворуч, як числа.
Ти пишеш
|
Відображуєтсья як
|
{| border="1"
|Апельсин
|Яблуко
|align="right" | 12,333.00
|-
|Хліб
|Пиріг
|align="right" | 500.00
|-
|Масло
|Морозиво
|align="right" | 1.00
|}
|
Апельсин
|
Яблуко
|
12,333.00
|
Хліб
|
Пиріг
|
500.00
|
Масло
|
Морозиво
|
1.00
|
|
Так само можна додавати атрибути комірки, якщо кілька комірок записані в один рядок. В такому разі комірки розділяються ||
, а всередині кожної комірки атрибут відділяється від вмісту за допомогою |
.
Ти пишеш
|
Відображуєтсья як
|
{| border="1"
| Апельсин || Яблуко || align="right" | 12,333.00
|-
| Хліб || Пиріг || align="right" | 500.00
|-
| Масло || Морозиво || align="right" | 1.00
|}
|
Апельсин |
Яблуко |
12,333.00
|
Хліб |
Пиріг |
500.00
|
Масло |
Морозиво |
1.00
|
|
Атрибути рядків
Так само можна визначати атрибути для певних рядків таблиці.
Ти пишеш
|
Відображується як
|
{| border="1"
|Апельсин
|Яблуко
|align="right"|12,333.00
|-
|Хліб
|Пиріг
|align="right"|500.00
|- style="font-style:italic; color:green;"
|Масло
|Морозиво
|align="right"|1.00
|}
|
Апельсин
|
Яблуко
|
12,333.00
|
Хліб
|
Пиріг
|
500.00
|
Масло
|
Морозиво
|
1.00
|
|
Проста межа в один піксел
За замовчуванням таблиця форматується із атрибутом "border-collapse: separate", що означає додавання відступів навколо комірок (і разом з тим відділяє зовнішню межу таблиці від комірок). Навіть при нульовому відступі навколо комірок контури послідовних комірок додаватимуться. Тому, аби отримати найменше можливе розділення комірок в 1 піксел, слід вибірково прибрати межу в одної з сусідніх комірок.
Таке форматування досягається простіше, за допомогою атрибуту CSS "border-collapse: collapse"; в такому підході до форматування відступ навколо комірок ("border-spacing:" в CSS) та оточення ("padding:" у CSS) ігноруються і внутрішні сусідні комірки розділяються лише одним найбільшим відступом.
Приклад такої межі в один піксел двома способами наведено нижче; рекомендований другий із них.
Ти пишеш
|
Відображується як
|
{|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; padding: 0"
|-
!style="border-style: solid; border-width: 0 1px 1px 0"| Апельсин
!style="border-style: solid; border-width: 0 0 1px 0"| Яблуко
|-
|style="border-style: solid; border-width: 0 1px 0 0"| Хліб
|style="border-style: solid; border-width: 0"| Пиріг
|}
|
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
|
{|style="border-collapse: collapse; border-width: 1px; border-style: solid"
|-
!style="border-style: solid; border-width: 1px"| Апельсин
!style="border-style: solid; border-width: 1px"| Яблуко
|-
|style="border-style: solid; border-width: 1px"| Хліб
|style="border-style: solid; border-width: 1px"| Пиріг
|}
|
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
|
Примітки:
- При застосуванні параметру CSS "border-width:" числові значення задаються в такому порядку: верх, право, низ, ліво. Якщо вказано не всі 4 цифри, пропущені набувають таких значень: лівий відступ значення правого, низ значення верху, правий значення верху.
- Атрибути HTML (як-от "width=", "border=", "cellspacing=", "cellpadding=") не потребують вказівки одиниці розміру, якою є піксел. Але параметри CSS, які мають пріоритет перед атрибутами HTML, вимагають вказівки одиниці розміру для ненульових значень, приміром, "px" для пікселу.
Атрибути HTML "colspan" та "rowspan"
Вікірозмітка визнає атрибути HTML colspan and rowspan для комірок таблиці.
Ти пишеш
|
Відображується як
|
{| border="1"
!colspan="6"|Перелік покупок
|-
|rowspan="2"|Хліб & Масло
|Пиріг
|Булочки
|По-данськи
|colspan="2"|Круасан
|-
|Сир
|colspan="2"|Морозиво
|Масло
|Йогурт
|}
|
Перелік покупок
|
Хліб & Масло
|
Пиріг
|
Булочки
|
По-данськи
|
Круасан
|
Сир
|
Морозиво
|
Масло
|
Йогурт
|
|
Змішування атрибутів HTML і стилів CSS
CSS атрибути стилю можуть додаватися як без інших атрибутів HTML, так і разом і з ними.
Ти пишеш
|
Відображується як
|
{| style="color:green; background-color:#ffffcc;" cellpadding="10" cellspacing="0" border="1"
|Апельсин
|Яблуко
|-
|Хліб
|Пиріг
|-
|Масло
|Морозиво
|}
|
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
Масло
|
Морозиво
|
|
Атрибути можна також додавати до підписів та заголовків.
Ти пишше
|
Відображується як
|
{| border="1" cellpadding="20" cellspacing="0"
|+ align="bottom" style="color:#e76700;" |''Склад сніданку''
|-
|Апельсин
|Яблуко
|-
|Хліб
|Пиріг
|-
|Масло
|Морозиво
|}
|
Склад сніданку
Апельсин
|
Яблуко
|
Хліб
|
Пиріг
|
Масло
|
Морозиво
|
|
Прив'язка комірок заголовку таблиці
Комірки заголовків таблиці не вказують на ті комірки даних таблиці, яких стосуються (чи праворуч в тому самому рядку таблиці, чи внизу в тому самому стовпчику). Коли таблиця відображується у графічному середовищі, це зазвичай нескладно зрозуміти.
Але коли таблиця відображується в текстовому вигляді, ти можеш допомогти браузеру визначити, яка комірка заголовку стосується певної обраної комірки даних, за допомогою атрибутів scope="row" чи scope="col", вказаних для комірок заголовків таблиці. В переважній більшості простих таблиць достатньо вказати scope="col" у всіх комірках заголовку таблиці в першому рядку, а також scope="row" у кожній першій комірці кожного подальшого рядку:
Ти пишеш
|
Відображуєтсья як
|
{| border="1" cellspacing="0" cellpadding="2"
|-
!scope="col"| Предмет
!scope="col"| Кількість
!scope="col"| Ціна
|-
!scope="row"| Хліб
| 0.3 кг
| $0.65
|-
!scope="row"| Масло
| 0.125 кг
| $1.25
|-
!scope="row" colspan="2"| Разом
| $1.90
|}
|
Предмет
|
Кількість
|
Ціна
|
Хліб
|
0.3 кг
|
$0.65
|
Масло
|
0.125 кг
|
$1.25
|
Разом
|
$1.90
|
|
Застереження
Від'ємні числа
Якщо ти почнеш комірку в новому рядку з символу мінус (чи якимось іншим чином поставиш туди від'ємне число), розмітка таблиці порушиться, бо поєднання символів |-
розглядатиметься як вікірозмітка для нового рядку таблиці, а не для комірки даних. Аби уникати цього, постав пропуск перед негативним числом (| -6
) чи застосуй подвійну риску (|| -6
).
Розмітка CSS чи атрибути?
Межа таблиці, вказана через CSS, може бути некоректно відображена певним набором текстових браузерів, на відміну від межи, вказаної атрибутом XHTML.
Спільні атрибути
Синтаксис MediaWiki для розмітки таблиць наразі не надає можливості задати атрибути для всього стовпчика (відповідний елемент HTML <col />
), групи стовпчиків (елемент HTML <colgroup>...</colgroup>
) та групи рядків (елементи HTML elements <thead>...</thead>
, <tbody>...</tbody>
та <tfoot>...</tfoot>
). Ці стандартні елементи HTML не розпізнаються тут в будь-якій формі запису.
Всі рядки та комірки (заголовків чи даних) таблиці відображуються в єдиній групі за замовчуванням (елемент HTML <tbody>...</tbody>
) без визначення додаткових атрибутів чи стилів.
Вікітаблиця
До таблиць завжди слід додавати атрибут class="wikitable"
, за винятков рідкісних випадків. коли таблиця застосовується суто для схеми.