Довідка:Шаблони стилю
При створенні таблиць бажано дотримуватись стандартного стилю оформлення. У Вікіпедії це реалізовано за допомогою CSS классів, доданих у файл Mediawiki:Common.css.
Вкажіть у першому рядку параметр class="ім’я_класу", і таблиця буде оформлена за стандартним зразком.
standard[ред. | ред. код]
Такі таблиці найчастіше усього зустрічаються на сторінках Вікіпедії. Цей стиль оформлення бажано використовувати для більшості таблиць, що розміщені безпосередньо у тексті статті. Зверніть увагу, що заголовки таблиці (котрі створюються за допомогою символу "!") підсвічені, для цього не потрібно вказувати ніяких додаткових параметрів. Параметр border також необов’язковий.
{| class="standard"
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Клітинка 1*1||Клітинка 2*1||Клітинка 3*1
|-
|Клітинка 1*2||Клітинка 2*2||Клітинка 3*2
|-
|Клітинка 1*3||Клітинка 2*3||Клітинка 3*3
|}
|
|
wide[ред. | ред. код]
Відрізняється від standard тільки тим, що розтягує таблицю на всю ширину вікна браузера.
{| class="wide"
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Клітинка 1*1||Клітинка 2*1||Клітинка 3*1
|-
|Клітинка 1*2||Клітинка 2*2||Клітинка 3*2
|-
|Клітинка 1*3||Клітинка 2*3||Клітинка 3*3
|}
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
| Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
| Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
tiles[ред. | ред. код]
Відрізняється від standard відсутністю ліній сітки та затіненням звичайних клітинок. Не використовуйте його для таблиць, до яких можна застосувати будь-який із двох попередніх стилів оформлення без втрати наочності. Прикладом виправданого використання може бути періодична таблиця хімічних елементів.
{| class="tiles"
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Клітинка 1*1||Клітинка 2*1||Клітинка 3*1
|-
|Клітинка 1*2||Клітинка 2*2||Клітинка 3*2
|-
|Клітинка 1*3||Клітинка 2*3||Клітинка 3*3
|}
|
|
simple[ред. | ред. код]
Цей клас змінює лише сітку границь між клітинками та робить її такою, як у standard, використання його матиме сенс лише із ненульовим border. Порівняйте:
просто border
{| border=1
|
з класом simple:
{| class="simple" border=1
|
Всі вищеперелічені класи також додають невеличку порожню відстань зліва та справа до кожної клітинки (padding-left:0.2em; padding-right:0.2em).
Також підтримується клас wikitable з англійської Вікіпедії. У цьому класі порожня відстань додається в кожну клітинку з усіх боків (padding:0.2em). Все інше у wikitable практично відповідає standard.
Ці додаткові класи додають таблицям взаємодії з користувачем та залежать від коду у Mediawiki:Common.js.
collapsible[ред. | ред. код]
Дозволяє «згортати» таблицю та залишати лише заголовки. Додається до будь-якого іншого класу, наприклад {| class="standard collapsible" :
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
| Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
| Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Докладніше див. Википедия:Сворачивающиеся блоки(рос.).
sortable[ред. | ред. код]
Дозволяє сортувати стовпчики таблиці. Додається до будь-якого іншого класу, наприклад:
{| class="standard sortable"
|-
!Латиниця||Кирилиця||Цифри
|-
| D || Г || 3
|-
| E || Щ || 2
|-
| F || Б || 11
|}
|
|
Докладніше див. m:Help:Sorting (англ.).
Будь-яку клітинку таблиці можна підсвітити або затінити, для цього потрібно для клітинки або рядка задати параметр class="тип_виділення".
Існує два стандартних класи підсвічування та два типи затінення.
| для заголовка | для звичайної клітинки | |
|---|---|---|
| highlight | ||
| bright | ||
| shadow | ||
| dark |
Для того, щоб зробити фон клітинки прозорим, використовуйте class="transparent".
- Зазвичай для заголовків таблиці рекомендують використвувати підсвічення
highlight, якщо необхідно виділити більш важливий заголовок —bright. Якщо існує необхідність знизити важливість заголовку, можна використовувати затінення. - Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку
shadow, при необхідності — затемненняdark). Якщо потрібно виділити одну-дві клітинки, можна використовувати підсвічення.
Якщо якій-небудь клітинці потрібно надати особливий колір фону, це роблять наступним чином: style="background-color: колір;" (див. таблицю кольорів). Рекомендується використовувати цю можливість лише якщо необхідний саме конкретний колір, а не логічне виділення частини клітинок.
Наступні таблиці (класу standard) призначені для первірки того, що описані вище класи правильно обробляються вашим браузером. У лівих стовпчиках використано вказаний клас, у правих колір заданий стилем оформлення безпосередньо у коді сторінки. Кольори справа та зліва повинні збігатися.
| клітинка | |
| #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 |