Таблиця

Зауважте, що використання розмітки HTML не є ані необхідним, ані бажаним.

Конвеєрний синтаксис (Вікірозмітка)[]

Ви можете легко конвертувати таблиці HTML у таблиці Вікірозмітки використовуючи конвертор Маґнуса Маске.

Для таблиць використовується спеціальний код Вікірозмітки, нижче.

Таблиця починається з рядка | та закінчується |.
Заголовок є зручним способом описати таблицю; він є необов'язковим, та включається в таблицю рядком |+ Заголовок що слідує за |
Код для рядка таблиці складається із рядка |-, і, починаючи із нового рядка, коду для клітинок в рядку, або кожна в новому рядку або «|» між ними
Табличні дані є кодом в клітинках; записують їх у формі |значення або | параметри клітинки | значення
рядок із заголовками колонок описується «!» замість «|», за винятком розділювача між параметрами клітинки та її значенням; різниця на екрані між заголовками та звичайним рядком залежить від браузера, часто заголовки колонок відображаються жирним шрифтом.
перша клітинка в рядку стає заголовком рядка якщо рядок починається із «!» замість «|», та якщо решта даних в рядку починаються із наступного рядка.

Параметри таблиці та клітинок такі ж що використовуються в розмітці HTML [1].

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

Простий приклад[]

{| 
| Клітинка 1, рядок 1 
| Клітинка 2, рядок 1 
|- 
| Клітинка 1, рядок 2 
| Клітинка 2, рядок 2 
|}

створить

Клітинка 1, рядок 1	Клітинка 2, рядок 1
Клітинка 1, рядок 2	Клітинка 2, рядок 2

Табличні рамки[]

Вид рамки описується в першому рядку, відразу після {|.

Товщина зовнішніх рамок встановлюється атрибутом border=n₁, де «n₁» — товщина лінії зовнішніх рамок.
Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n₂", де «n₂» — товщина лінії внутрішніх рамок.
Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом cellpadding=n₃.

Вихідний код[]

{| border="1" cellpadding="2"
|+Таблиця множення
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Як він виглядає[]

Таблиця множення
× 1 2 3

1 1 2 3

2 2 4 6

3 3 6 9

4 4 8 12

5 5 10 15

Приклад з границями[]

Вихідний код[]

{| border="3" cellpadding="5" cellspacing=5
|+Таблиця множення
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Як він виглядає[]

Таблиця множення
× 1 2 3

1 1 2 3

2 2 4 6

3 3 6 9

4 4 8 12

5 5 10 15

Приклад із класом[]

Вихідний код[]

{| class="standart"
|+Таблиця множення
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Як він виглядає[]

Таблиця множення
× 1 2 3

1 1 2 3

2 2 4 6

3 3 6 9

4 4 8 12

5 5 10 15

Використання кольору[]

Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також!

Кольоровий текст[]

Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:

для окремого слова — <font color="#ABCDEF">Текст</font>;
для довгого тексту — <div style="color:#ABCDEF">Текст, текст.</div>,

де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так:

Вихідний код[]

{| border=1
 |Клітинка 1*1
 |Кольорове <font color="#FF00FF">одне</font> слово.
 |Клітинка 3*1
 |-
 |Клітинка 1*2
 |Клітинка 2*2
 |<div style="color:#33CC66">Кольоровий весь рядок.</div>
 |-
 |Клітинка 1*3
 |Клітинка 2*3
 |Клітинка 3*3
 |}

Як він виглядає[]

Клітинка 1*1	Кольорове одне слово.	Клітинка 3*1
Клітинка 1*2	Клітинка 2*2	Кольоровий весь рядок.
Клітинка 1*3	Клітинка 2*3	Клітинка 3*3

Колір клітинки[]

Зробити кольорову клітинку можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» — індекс кольору.

Пишеться[]

{| border=1
 |Клітинка 1*1
 |bgcolor=#FFCC00|Клітинка 2*1
 |Клітинка 3*1
 |-
 |Клітинка 1*2
 |Клітинка 2*2
 |Клітинка 3*2
 |-
 |bgcolor=#CCFF00|Клітинка 1*3
 |Клітинка 2*3
 |Клітинка 3*3
 |}

Як він виглядає[]

Клітинка 1*1	Клітинка 2*1	Клітинка 3*1
Клітинка 1*2	Клітинка 2*2	Клітинка 3*2
Клітинка 1*3	Клітинка 2*3	Клітинка 3*3

Фоновий колір таблиці[]

Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут «bgcolor=#ABCDEF» в перший рядок таблиці, де ставитися і атрибут рамки:

Пишеться[]

{| border=1 bgcolor=#66FFFF |Клітинка 1*1 |Клітинка 2*1 |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |Клітинка 3*2 |- |Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}

Як він виглядає[]

Клітинка 1*1	Клітинка 2*1	Клітинка 3*1
Клітинка 1*2	Клітинка 2*2	Клітинка 3*2
Клітинка 1*3	Клітинка 2*3	Клітинка 3*3

Класи оформлення клітинок[]

	заголовок	звичайна клітинка
highlight
bright
shadow
dark

Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.

Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка.

|- class="bright"
| ...
| ...

Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас transparent.

|-
|class="bright"| ...
|class="highlight"| ...

Наприклад:


\|-class="dark"		\|class="highlight"
\|-class="bright"	\|class="transparent"

Для заголовків рекомендується використовувати підсвічування highlight, за необхідності виділити більш важливий заголовок — bright. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення.

Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку shadow, за необхідності — dark). Если нужно выделить одну-две ячейки, можно использовать подсветку.

Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: style="background-color: колір;" (см. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.

Перевірка класів клітин у вашому браузері

Ці таблиці призначені для перевірки того, що описані вище класи правильно обробляються вашим браузером. У лівих стовпцях використаний вказаний клас, в правих колір заданий стилем оформлення прямо в коді сторінки. Кольори ліворуч і праворуч повинні збігатися.

клітинка
	#FFFFFF
highlight	#FFFFEE
bright	#FFEECC
shadow	#F0F0F0
dark	#CCCCCC

клітина в рядку
	#FFFFFF
highlight	#FFFFEE
bright	#FFEECC
shadow	#F0F0F0
dark	#CCCCCC

	#EEEEFF
заголовок
highlight	#EEEEFF
bright	#CCCCFF
shadow	#F0F0F0
dark	#CCCCCC

	#EEEEFF
заголовок в рядку
highlight	#EEEEFF
bright	#CCCCFF
shadow	#F0F0F0
dark	#CCCCCC

Об'єднання клітин[]

У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.

В кількох рядках – параметр rowspan[]

{| class="wikitable"
| стовпець 1, рядок 1
| rowspan=2 | стовпець 2, рядок 1 (а також 2)
| стовпець 3, рядок 1
|-
| стовпець 1, рядок 2
| стовпець 3, рядок 2
|}

стовпець 1, рядок 1	стовпець 2, рядок 1 (а також 2)	стовпець 3, рядок 1
стовпець 1, рядок 2	стовпець 2, рядок 1 (а також 2)	стовпець 3, рядок 2

rowspan спричиняє розтягнення клітинки на кілька рядків

В кількох стовпцях – параметр colspan[]

{| class="wikitable"
| стовпець 1, рядок 1
| colspan=2 | стовпець 2 (i 3), рядок 1
|-
| стовпець 1, рядок 2
| стовпець 2, рядок 2
| стовпець 3, рядок 2
|}

стовпець 1, рядок 1	стовпець 2 (i 3), рядок 1
стовпець 1, рядок 2	стовпець 2, рядок 2	стовпець 3, рядок 2

colspan спричиняє розтягнення клітинки на кілька стовпців

Змішане поєднання[]

{| class="wikitable" style="text-align:left"
! стовпець 1 (заголовок)
! стовпець 2 (заголовок)
! стовпець 3 (заголовок)
! стовпець 4 (заголовок)
|-
| стовпець 1, рядок 1
| colspan=2 | стовпець 2 i 3, рядок 1
| rowspan=2 | стовпець 4, рядок 1 i 2
|-
| colspan="3" | стовпець 1, 2 i 3, рядок 2
|-
| стовпець 1, рядок 3
| colspan="3" rowspan="2" | стовпець 2, 3 i 4, рядок 3 i 4
|-
| стовпець 1, рядок 4
|}

стовпець 1 (заголовок)	стовпець 2 (заголовок)	стовпець 4 (заголовок)
стовпець 1, рядок 1	стовпець 2 i 3, рядок 1	стовпець 4, рядок 1 i 2
стовпець 1, 2 i 3, рядок 2		стовпець 4, рядок 1 i 2
стовпець 1, рядок 3	стовпець 2, 3 i 4, рядок 3 i 4
стовпець 1, рядок 4	стовпець 2, 3 i 4, рядок 3 i 4

Вкладені таблиці[]

{| border=1
| клітина 1 зовнішньої таблиці
|
{| border=1 style="background:ABCDEF"
| таблиця
|-
| вкладена
|}
| клітина 3 зовнішньої таблиці
|}

...додавання вкладеної таблиці в другій клітині зовнішньої таблиці

клітина 1 зовнішньої таблиці

таблиця

вкладена

клітина 3 зовнішньої таблиці