FANDOM


При редагуванні в режимі вихідного коду таблицю можна додати, використовуючи наступні елементи вікітексту:

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

Приклади вікітексту для створення таблиць Редагувати

Звичайні таблиці Редагувати

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

Опис Вікітекст Результат
Таблиця з однією коміркою {| border="1"

|-
| строка 1, комірка/колонка 1
|}

рядок 1, комірка/колонка 1
Таблиця з двома комірками; ліва комірка виділена як заголовна {| border="1"

|-
! рядок 1, <br/>заголовок 1/колонка 1
| рядок 1, <br/>комірка 1/колонка 2
|}

рядок 1, заголовок 1/колонка 1 рядок 1, комірка 1/колонка 2
Таблиця з двома комірками і заголовком {| border="1"

|-
|+ Заголовок
! рядок 1, колонка 1
| рядок 1, колонка 2
|}

Заголовок
рядок 1, колонка 1 рядок 1, колонка 2
Таблиця з трьома колонками і трьома рядками {| border="1"

|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
| рядок 1, <br/>комірка/колонка 3
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
| рядок 2, <br/>комірка/колонка 3
|-
| рядок 3, <br/>комірка/колонка 1
| рядок 3, <br/>комірка/колонка 2
| рядок 3, <br/>комірка/колонка 3
|}

рядок 1, комірка/колонка 1 рядок 1, комірка/колонка 2 рядок 1, комірка/колонка 3
рядок 2, комірка/колонка 1 рядок 2, комірка/колонка 2 рядок 2, комірка/колонка 3
рядок 3, комірка/колонка 1 рядок 3, комірка/колонка 2 рядок 3, комірка/колонка 3
Таблиця з двома рядками і двома колонками; ширина таблиці 90% від ширини сторінки {| width="90%" border="1"

|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
|}

Рамка показана лише в якості ілюстрації.
рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2
Таблиця з двома рядками і двома колонками; в нижньому рядку текст з відступом 16px від країв комірки.

Примітки. HTML5 більше не підтримує атрибут для таблиць cellpadding=.
{|

|-
| style="padding:16px;" | рядок 1, <br/>комірка/колонка 1
| style="padding:16px;" | рядок 1, <br/>комірка/колонка 2
|-
| style="padding:16px;" | рядок 2, <br/>комірка/колонка 1
| style="padding:16px;" | рядок 2, <br/>комірка/колонка 2
|}

Рамка показана лише в якості ілюстрації.
рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2
Таблиця з двома рядками і двома колонками; інтервал між комірками 8px {| cellspacing="8px"

|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
|}

Рамка показана лише в якості ілюстрації.
рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2

Розміри заголовків і комірок Редагувати

Опис Вікітекст Результат
Таблиця з двома колонками і трьома рядками, але верхній рядок виступає в якості заголовка {|

|-
! colspan="2" | Тема шириною в дві колонки
|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
|}

Кольори комірок використовуються лише для ілюстрації.
Заголовок шириною в дві колонки
рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2
Таблиця з трьома колонками і трьома рядками; комірки у другому рядку об'єднані в одну комірку {|

|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
|-
| colspan="2" | строка 2, <br/>комірка/колонка 1 & 2
|}

Кольори комірок використовуються лише для ілюстрації.
рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1 & 2
Таблиця з трьома колонками і трьома рядками; комірки в другій колонці в першому і другому рядках об'єднані в одну комірку {|

|-
| рядок 1, <br/>комірка 1/колонка 1
| rowspan="2" | рядок 1 & 2, <br/>комірка 2
|-
| рядок2, <br/>комірка 3/колонка 1
|}

Кольори комірок використовуються лише для ілюстрації.
рядок 1,
комірка 1/колонка 1
рядок 1 & 2,
комірка 2
рядок 2,
комірка 3/колонка 1

Вирівнювання тексту в комірках, заголовках і рядках Редагувати

Приклади коду для вирівнювання тексту в комірках по центру (center), правому краю (right), верху комірки (top) і низу комірки (bottom).

Опис Вікітекст Результат
Таблиця з двома рядками і двома колонками і різним вирівнюванням тексту в середині комірок {| width="100%"

|- valign="top"
! align="right" | рядок 1, <br/>заголовок 1, <br/>колонка 1
| align="center" | рядок 1, <br/>комірка 1/колонка 2
|- valign="bottom"
! рядок 2, <br/>hзаголовок 2, <br/>колонка 1
| рядок 2, <br/>комірка 2/колонка 2
|}

Кольори комірок використовуються лише для ілюстрації.
рядок 1,
заголовок 1,
колонка 1
рядок 1,
комірка 1/колонка 2
рядок 2,
заголовок 2,
колонка 1
рядок 2,
комірка 1/колонка 2

Підписи в таблиці Редагувати

Опис Вікітекст Результат
Таблиця з двома рядками і двома колонками і підписом {| width="100%"

|-
|+ Підпис
! рядок 1, <br/>заголовок 1, <br/>колонка 1
| рядок 1, <br/>комірка 1/<br/>колонка 2
|-
! рядок 2, <br/>заголовок 2, <br/>колонка 1
| рядок 2, <br/>комірка 2/<br/>колонка 2
|}

Підпис
рядок 1,
заголовок 1,
колонка 1
рядок 1,
комірка 2/
колонка 2
рядок 2,
заголовок 2,
колонка 1
рядок 2,
комірка 2/
колонка 2

Налаштування таблиці за допомогою CSS Редагувати

Опис Вікітекст Результат
Звичайна таблиця з 4 комірками {| class="article-table"

|-
! рядок 1, <br/>заголовок 1/колонка 1
! рядок 1, <br/>заголовок 2/колонка 2
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
|}

рядок 1,
заголовок 1/колонка 1
рядок 1,
заголовок 2/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2
Таблиця з двома рядками і двома колонками, пофарбована в жовтий колір за допомогою CSS {| style="background-color:yellow;"

|-
| рядок 1, <br/>комірка/колонка 1
| рядок 1, <br/>комірка/колонка 2
|-
| рядок 2, <br/>комірка/колонка 1
| рядок 2, <br/>комірка/колонка 2
|}

рядок 1,
комірка/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
комірка/колонка 1
рядок 2,
комірка/колонка 2
Таблиця з двома рядками і двома колонками, пофарбована по-різному за допомогою CSS {| style="border:3px inset gray; font-size:80%; width:90%;"

|-
! style="background-color:blue; color:pink; padding-left:1em; width:60%;" | рядок 1, <br/>заголовок 1/колонка 1
| style="text-decoration:line-through;" | рядок 1, <br/>комірка/колонка 2
|-
! style="text-align:right;" | рядок 2, <br/>заголовок 2/колонка 1
| style="border:1px dotted red;" | рядок 2, <br/>комірка/колонка 2
|}

рядок 1,
заголовок 1/колонка 1
рядок 1,
комірка/колонка 2
рядок 2,
заголовок 2/колонка 1
рядок 2,
комірка/колонка 2

Див. також Редагувати

Community content is available under CC-BY-SA unless otherwise noted.