Довідка:Шаблони стилю

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку

При створенні таблиць бажано дотримуватись стандартного стилю оформлення. У Вікіпедії це реалізовано за допомогою CSS классів, доданих у файл Mediawiki:Common.css.

Вкажіть у першому рядку параметр class="ім’я_класу", і таблиця буде оформлена за стандартним зразком.

Основні класи

[ред. | ред. код]

Такі таблиці найчастіше усього зустрічаються на сторінках Вікіпедії. Цей стиль оформлення бажано використовувати для більшості таблиць, що розміщені безпосередньо у тексті статті. Зверніть увагу, що заголовки таблиці (котрі створюються за допомогою символу "!") підсвічені, для цього не потрібно вказувати ніяких додаткових параметрів. Параметр border також необов’язковий.

 
{| class="standard"
|-
!Заголовок 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

Відрізняється від 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

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

{| class="tiles"
|-
!Заголовок 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


Цей клас змінює лише сітку границь між клітинками та робить її такою, як у standard, використання його матиме сенс лише із ненульовим border. Порівняйте:

просто border
{| border=1
Заголовок 1 Заголовок 2 Заголовок 3
Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3
з класом simple:
{| class="simple" border=1
Заголовок 1 Заголовок 2 Заголовок 3
Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3


Всі вищеперелічені класи також додають невеличку порожню відстань зліва та справа до кожної клітинки (padding-left:0.2em; padding-right:0.2em).


wikitable

[ред. | ред. код]

Також підтримується клас wikitable з англійської Вікіпедії. У цьому класі порожня відстань додається в кожну клітинку з усіх боків (padding:0.2em). Все інше у wikitable практично відповідає standard.

Javascript класи

[ред. | ред. код]

Ці додаткові класи додають таблицям взаємодії з користувачем та залежать від коду у 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

Докладніше див. Википедия:Сворачивающиеся блоки(рос.).


Дозволяє сортувати стовпчики таблиці. Додається до будь-якого іншого класу, наприклад:

{| class="standard sortable"
|-
!Латиниця||Кирилиця||Цифри
|-
| D || Г || 3 
|-
| E || Щ || 2
|-
| F || Б || 11
|}
Латиниця Кирилиця Цифри
D Г 3
E Щ 211
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