Ця сторінка — довідка, призначена для подання опису певних аспектів вікіпедійних норм, звичаїв, практик. Вона може відображати різні рівні консенсусу, але це не політика і не настанова.
Таблиці можуть бути корисними для представлення різноманітної інформації на Вікіпедії. Ця сторінка описує як створювати таблиці в статтях Вікіпедії та коли їх доречно використовувати.
Зауважте, що використання розмітки HTML не є ані необхідним, ані бажаним.
Конвеєрний синтаксис (Вікірозмітка)
Ви можете легко конвертувати таблиці HTML у таблиці Вікірозмітки використовуючи конвертор Маґнуса Маске.
Для таблиць використовується спеціальний код Вікірозмітки, нижче.
Таблиця починається з рядка {|опції таблиці та закінчується |}.
Заголовок є зручним способом описати таблицю; він є необов'язковим, та включається в таблицю рядком |+Заголовок що слідує за {|.
Код для рядка таблиці складається із рядка |-, і, починаючи із нового рядка, коду для клітинок в рядку, або кожна в новому рядку або «|» між ними
Табличні дані є кодом в клітинках; записують їх у формі | значення або | параметри клітинки | значення
рядок із заголовками колонок описується «!» замість «|», за винятком розділювача між параметрами клітинки та її значенням; різниця на екрані між заголовками та звичайним рядком залежить від браузера, часто заголовки колонок відображаються жирним шрифтом.
перша клітинка в рядку стає заголовком рядка якщо рядок починається із «!» замість «|», та якщо решта даних в рядку починаються із наступного рядка.
Параметри таблиці та клітинок такі ж що використовуються в розмітці HTML [1].
Кожен рядок повинен містити однакову кількість клітинок, так що кількість колонок в таблиці є сталою (випадок, коли клітинка займає кілька колонок розглядається далі). Для порожніх клітинок використовуйте наступний код як значення клітинки .
Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також!
Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.
Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка.
|- 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» — число рядків, які повинна об'єднати клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.
{| border=1
| клітина 1 зовнішньої таблиці
|
{| border=1 style="background:ABCDEF"
| таблиця
|-
| вкладена
|}
| клітина 3 зовнішньої таблиці
|}
...додавання вкладеної таблиці в другій клітині зовнішньої таблиці
клітина 1 зовнішньої таблиці
таблиця
вкладена
клітина 3 зовнішньої таблиці
Кілька таблиць поруч
Нерідко з'являється питання – як поставити таблицю поруч, а не під іншою. Для цього можна ужити батьківську таблицю в якості каркасу, але це може спричинити проблеми для користувачів, які мають малу роздільність екрану. Ліпше скористатися елементом <div> з обтіканням ліворуч (float:left). Завдяки цьому, в залежності від роздільності монітора користувача, поруч розміститься оптимальна кількість таблиць.
Існує спеціальна опція, що дозволяє сортувати дані в стовпчиках. Щоб нею скористатися, слід дописати до class="wikitable" опцію class="wikitable sortable" як в коді нижче.
{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Основний стовпчик
! style="width:80px" | Сортування за абеткою
! style="width:80px" | Сортування за числами
! style="width:80px" | Сортування за іншими символами
|-
! Рік 2006
| Музика
| 245
| 18
|-
! Рік 2005
| Література
| 127
| -
|-
! Рік 2004
| Техніка
| 52
| 32
|-
! Рік 2006
| Стрільба з лука
| 21,12
| 987
|-
! Рік 2003
| Садівництво
| 21
| ?
|}
Використовуючи цей код, ми отримаємо таблицю, в якій, при натисканні на трикутничок, змінні відсортуються за відповідним стовпцем.
Основний стовпчик
Сортування за абеткою
Сортування за числами
Сортування за іншими символами
Рік 2006
Музика
245
18
Рік 2005
Техніка
127
-
Рік 2004
Техніка
52
32
Рік 2006
Стрільба з лука
21,12
987
Рік 2003
Садівництво
21
?
Можна встановити, щоб деякі стовпці не підлягали сортуванню:
Основний стовпець
Не сортується
Сортування за числом
Рік 2006
Так
245
Рік 2005
Ні
127
Рік 2003
Не сортується
21
Для цього слід додати опцію class="unsortable" в описі стовпців у першому рядку (заголовку) таблиці:
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Основний стовпець
! width="80px" class="unsortable" | Не сортується
! width="80px" | Сортування чисел
...
Можна також зазначити, щоб нижній рядок не підлягав сортуванню і завжди лишався в нижній частині таблиці:
Основний стовпець
Не сортується
Сортування чисел
Рік 2006
Так
245
Рік 2005
Ні
127
Рік 2003
не сортуємо
21
Підсумок
Сортування не є складним
45
Для цього слід подати атрибут class="sortbottom":
|-
! Рік 2003
| не сортуємо
| 21
|- class="sortbottom"
! Підсумок
| Сортування не є складним
| 45
|}
В принципі, дата в таблицях сортуються правильно тільки тоді, коли наводяться в цифровому форматі рік-місяць-день, який не завжди використовується. Для цього створено шаблон dts, який дозволяє правильно сортувати дати. Прикладом є такий код...
Проблеми можуть виникнути при сортуванні персоналій за прізвищем у випадку, коли статті Вікіпедії іменуються в форматі "ім'я прізвище". Для того, щоб правильно вказати ключ сортування, використовується шаблон імен sortname, що розв'яує цю проблему. Приклади...
Шаблон sortkey дозволяє надати клітинці невидимий ключ сортування. Наприклад, це може бути корисно, коли стовпець містить малюнки. Застосування в польській вікіпедії: pl:polskie lotniska.
Інші підтримувані типи табличного синтаксису що підтримуються MediaWiki:
XHTML
HTML і вікі <td>
Всі три підтримуються MediaWiki та генерують (в даний час) коректний код HTML, але конвеєрний синтаксис є найпростішим, за винятком, можливо, людей що вже добре знайомі із розміткою HTML. Окрім того, HTML і вікі <td> синтаксис необов'язково підтримуватимуться браузерами в майбутньому, особливо на портативних пристроях.
Див. HTML element#Tables. Зауважте, що елементи thead, tbody, tfoot, і colgroup на даний момент не підтримуються MediaWiki.
Можна переглядати/відлагоджувати в будь-якому редакторі 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;">:
Multiplication table
×
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, текст після таблиці буде розміщено справа від таблиці.
Multiplication table
×
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:
Multiplication table
×
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 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
Вирівнювання по десятковій комі
Наступний спосіб дозволяє вирівнювати числа в колонках по десятковій комі:
