Робота з таблицями в Wiki
Таблиці можуть бути корисними для представлення різноманітної інформації на Вікіпедії. Ця сторінка описує як створювати таблиці в статтях Вікіпедії та коли їх доречно використовувати. Зауважте, що використання розмітки HTML не є ані необхідним, ані бажаним.
Зміст
- 1 Конвеєрний синтаксис (Вікірозмітка)
- 2 Простий приклад
- 3 Табличні рамки
- 4 Меланж
- 5 Об'єднання клітин
- 6 Вкладені таблиці
- 7 Інші варіанти табличного синтаксису
- 8 Порівняння
- 9 Таблиці в тексті
- 10 Відступ навколо таблиці, зображення чи тексту
- 11 Вирівнювання по десятковій комі
- 12 Шаблони стилю
- 13 Зовнішні посилання
Конвеєрний синтаксис (Вікірозмітка)
- Ви можете легко конвертувати таблиці HTML у таблиці Вікірозмітки використовуючи конвертор Маґнуса Маске.
Для таблиць використовується спеціальний код Вікірозмітки, нижче.
- Таблиця починається з рядка
{|опції таблиці та закінчується|}. - Заголовок є зручним способом описати таблицю; він є необов'язковим, та включається в таблицю рядком
|+Заголовок що слідує за{|. - Код для рядка таблиці складається із рядка
|-, і, починаючи із нового рядка, коду для клітинок в рядку, або кожна в новому рядку або «|» між ними - Табличні дані є кодом в клітинках; записують їх у формі | значення або | параметри клітинки | значення
- рядок із заголовками колонок описується «!» замість «|», за винятком розділювача між параметпами клітинки та її значенням; різниця на екрані між заголовками та звичайним рядком залежить від браузера, часто заголовки колонок відображаються жирним шрифтом.
- перша клітинка в рядку стає заголовком рядка якщо рядок починається із «!» замість «|», та якщо решта даних в рядку починаються із наступного рядка.
Параметри таблиці та клітинок такі ж що використовуються в розмітці HTML [1].
Кожен рядок повинен містити однакову кількість клітинок, так що кількість колонок в таблиці є сталою (випадок, коли клітинка займає кілька колонок розглядається далі). Для порожніх клітинок використовуйте наступний код як значення клітинки .
Простий приклад
{|
| Клітинка 1, рядок 1
| Клітинка 2, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 2, рядок 2
|}
створить
| Клітинка 1, рядок 1 | Клітинка 2, рядок 1 |
| Клітинка 1, рядок 2 | Клітинка 2, рядок 2 |
Табличні рамки
Вид рамки описується в першому рядку, відразу після {|.
- Товщина зовнішніх рамок встановлюється атрибутом border=n1, де «n1» — товщина лінії зовнішніх рамок.
- Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n2", де «n1» — товщина лінії внутрішніх рамки.
- Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом cellpadding=n3.
Приклади: Таблиця множення
Вихідний код
{| border="1" cellpadding="2"
|+Таблиця множення
|-
! × !! 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
|+Таблиця множення
|-
! × !! 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">Teкст</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 |
Інші приклади
Вихідний код
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Приклад таблиці'''
|-
! style="background:#efefef;" | Перший заголовок
! colspan="2" style="background:#ffdead;" | Другий заголовок
|-
| вверху зліва
|
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
права сторона
|-
| style="border-bottom:3px solid grey;" | внизу зліва
| style="border-bottom:3px solid grey;" | внизу посередині
|-
| colspan="3" align="center" |
{| border="0"
|+''Таблиця в таблиці''
|-
| align="center" width="150px" | [[Image:wiki.png]]
| align="center" width="150px" | [[Image:wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red;
border-bottom:2px solid red; border-left:1px solid red;" |
Два лого Вікіпедії
|}
|}
Як виглядає
| Перший заголовок | Другий заголовок | |||||
|---|---|---|---|---|---|---|
| вверху зліва |
права сторона | |||||
| внизу зліва | внизу посередині | |||||
| ||||||
Об'єднання клітин
У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.
Приклади
{| border=1
| Клітинка 1, рядок 1
|rowspan=2| Клітинка 2, рядок 1 (і 2)
| Клітинка 3, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 3, рядок 2
|}
| Клітинка 1, рядок 1 | Клітинка 2, рядок 1 (і 2) | Клітинка 3, рядок 1 |
| Клітинка 1, рядок 2 | Клітинка 3, рядок 2 |
Для об'єднання клітин по горизонталі використовується атрибут colspan=n.
Приклад:
{| border=1
|Клітинка 1
|colspan=2 |Клітинка 2, об'єднує в собі два стовпчики
|-
|Клітинка 3
|Клітинка 4
|Клітинка 5
|}
Виглядає це так:
| Клітинка 1 | Клітинка 2, об'єднує два стовпчики | |
| Клітинка 3 | Клітинка 4 | Клітинка 5 |
Вкладені таблиці
{| border=1
| α
|
{| bgcolor=#ABCDEF border=2
|вкладена
|-
|таблиця
|}
|знову перша таблиця
|}
малює таблицю
| α |
|
знову перша таблиця |
Вкладена таблиця повинна починатись із нового рядка.
Інші варіанти табличного синтаксису
Інші підтримувані типи табличного синтаксису що підтримуються MediaWiki:
- XHTML
- HTML і вікі <td>
Всі три підтримуються MediaWiki та генерують (в даний час) коректний код HTML, але конвеєрний синтаксис є найпростішим, за винятком, можливо, людей що вже добре знайомі із розміткою HTML. Окрім того, HTML і вікі <td> синтаксис необов'язково підтримуватимуться браузерами в майбутньому, особливо на хендхелдах.
Див. HTML element#Tables. Зауважте, що елементи thead, tbody, tfoot, і colgroup на даний момент не підтримуються MediaWiki.
Порівняння
| XHTML | HTML & Вікі-td | Конвеєрний | |||||||
|---|---|---|---|---|---|---|---|---|---|
| Таблиця | <table></table> | <table></table> | {| params
|}
| ||||||
| Заголовок | <caption></caption> | <caption></caption> | |+ caption | ||||||
| Рядок | <tr></tr> | <tr> | |- params | ||||||
| Дані клітинки |
<td>cell1</td> |
<td>cell1 |
| cell1 | cell2 | ||||||
| Дані клітинки | <td>cell1</td> <td>cell2</td> <td>cell3</td> | <td>cell1 <td>cell2 <td>cell3 | |cell1||cell2||cell3 | ||||||
| Заголовок клітинки | <th></th> | <th> | ! heading | ||||||
| Зразок таблиці |
| ||||||||
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
</table>
|
{|
| 1 || 2
|-
| 3 || 4
|}
| |||||||
| Зразок таблиці |
| ||||||||
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
|
<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
<tr>
<td> 5 <td> 6
</table>
|
{|
| 1 || 2
|-
| 3 || 4
|-
| 5 || 6
|}
| |||||||
| Арґументи За |
Можна переглядати/відлагоджувати в будь-якому редакторі XHTML Можна форматувати для покращення читабельності Добре відомий |
Можна переглядати/відлагоджувати в будь-якому редакторі HTML Можна форматувати для покращення читабельності Добре відомий Менше коду ніж XHTML |
Простий Легко читається Мінімум коду | ||||||
| Арґументи проти |
Втомливий Довгий код Малочитабельний |
Важкий для людей незнайомих із HTML Погано форматується Погано делімітований Нечитабельний Може не підтримуватись браузерами в майбутньому |
Незнайомий синтаксис Структурований код Не має можливості реалізувати відступи | ||||||
| XHTML | HTML & Wiki-td | Wiki-pipe | |||||||
Таблиці в тексті
Використовуючи align=right, текст що слідує після таблиці з'явиться зліва від неї. Не використовуйте попередньо форматований текст, він може накладатись на таблицю, оскільки він автоматично не переноситься на новий рядок.
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Щоб уникнути цього, використайте <br style="clear:both;">:
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Якщо використаєте align=left, текст після таблиці буде розміщено зліва від таблиці.
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Відступ навколо таблиці, зображення чи тексту
Щоб створити відступ навколо таблиці, зображення чи тексту, створіть 1×1 таблицю навколо них, із cellpadding:
|
| Файл:Gelderland-Position.png |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
| text in box |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Шаблон:Clr
Вирівнювання по десятковій комі
Наступний спосіб дозволяє вирівнювати числа в колонках по десятковій комі:
<blockquote>
{| cellpadding=0 cellspacing=0
|align=right| 432 || . || 1
|-
|align=right| 43 || . || 21
|-
|align=right| 4 || . || 321
|}
</blockquote>
дає
432 . 1 43 . 21 4 . 321
Шаблони стилю
Докладніше про оформлення таблиць за допомогою шаблонів стилю можна дізнатися на сторінці Довідка:Шаблони стилю
Зовнішні посилання
- ru:Википедия:Оформление таблиц
- Конвертор HTML таблиць у Вікі на cnic.org
- csv2wp — конвертує CSV формат у Вікі. Зручний для імпорту в текст статті таблиць із Excel.
- Конвертор HTML таблиць у Вікі на wackyboy.com
- Конвертор HTML таблиць у Вікі на uni-bonn.de
- Конвертор HTML таблиць у Вікі на diberri.dyndns.org
