Користувач:Мочук Оксана
Матеріал з ТерноВікі
Рядок 202: | Рядок 202: | ||
#::у списках | #::у списках | ||
# роблять так | # роблять так | ||
+ | |||
+ | == Таблиці == | ||
+ | === Простий приклад === | ||
+ | <pre> | ||
+ | {| | ||
+ | | Клітинка 1, рядок 1 | ||
+ | | Клітинка 2, рядок 1 | ||
+ | |- | ||
+ | | Клітинка 1, рядок 2 | ||
+ | | Клітинка 2, рядок 2 | ||
+ | |} | ||
+ | </pre> | ||
+ | |||
+ | створить | ||
+ | |||
+ | {| | ||
+ | | Клітинка 1, рядок 1 | ||
+ | | Клітинка 2, рядок 1 | ||
+ | |- | ||
+ | | Клітинка 1, рядок 2 | ||
+ | | Клітинка 2, рядок 2 | ||
+ | |} | ||
+ | |||
+ | === Табличні рамки === | ||
+ | |||
+ | Вид рамки описується в першому рядку, відразу після {|. | ||
+ | * Товщина зовнішніх рамок встановлюється атрибутом border=n<sub>1</sub>, де «n<sub>1</sub>» — товщина лінії зовнішніх рамок. | ||
+ | * Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n<sub>2</sub>", де «n<sub>2</sub>» — товщина лінії внутрішніх рамок. | ||
+ | * Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом cellpadding=n<sub>3</sub>. | ||
+ | |||
+ | |||
+ | ==== Простий приклад ==== | ||
+ | |||
+ | Вихідний код | ||
+ | <pre><nowiki> | ||
+ | {| border="1" cellpadding="2" | ||
+ | |+Таблиця множення | ||
+ | |- | ||
+ | ! &times; !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |- | ||
+ | ! 4 | ||
+ | | 4 || 8 || 12 | ||
+ | |- | ||
+ | ! 5 | ||
+ | | 5 || 10 || 15 | ||
+ | |} | ||
+ | </nowiki></pre> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| border="1" cellpadding="2" cellspacing=0 | ||
+ | |+Таблиця множення | ||
+ | |- | ||
+ | ! × !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |- | ||
+ | ! 4 | ||
+ | | 4 || 8 || 12 | ||
+ | |- | ||
+ | ! 5 | ||
+ | | 5 || 10 || 15 | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | ==== Приклад з границями ==== | ||
+ | Вихідний код | ||
+ | <pre><nowiki> | ||
+ | {| border="3" cellpadding="5" cellspacing=5 | ||
+ | |+Таблиця множення | ||
+ | |- | ||
+ | ! &times; !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |- | ||
+ | ! 4 | ||
+ | | 4 || 8 || 12 | ||
+ | |- | ||
+ | ! 5 | ||
+ | | 5 || 10 || 15 | ||
+ | |} | ||
+ | </nowiki></pre> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| 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 | ||
+ | |} | ||
+ | |||
+ | ==== Приклад із класом ==== | ||
+ | Вихідний код | ||
+ | <pre><nowiki> | ||
+ | {| class="wikitable" | ||
+ | |+Таблиця множення | ||
+ | |- | ||
+ | ! &times; !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |- | ||
+ | ! 4 | ||
+ | | 4 || 8 || 12 | ||
+ | |- | ||
+ | ! 5 | ||
+ | | 5 || 10 || 15 | ||
+ | |} | ||
+ | </nowiki></pre> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| class="wikitable" | ||
+ | |+Таблиця множення | ||
+ | |- | ||
+ | ! × !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |- | ||
+ | ! 4 | ||
+ | | 4 || 8 || 12 | ||
+ | |- | ||
+ | ! 5 | ||
+ | | 5 || 10 || 15 | ||
+ | |} | ||
+ | |||
+ | === Використання кольору === | ||
+ | Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також! | ||
+ | |||
+ | ==== Кольоровий текст ==== | ||
+ | Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML: | ||
+ | * для окремого слова — <nowiki><font color="#ABCDEF">Текст</font></nowiki>; | ||
+ | * для довгого тексту — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>, | ||
+ | де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так: | ||
+ | |||
+ | Вихідний код | ||
+ | |||
+ | <nowiki>{| 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 | ||
+ | |}</nowiki> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| 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 | ||
+ | |} | ||
+ | |||
+ | Колір клітинки | ||
+ | |||
+ | Зробити '''кольорову клітинку''' можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» — індекс кольору. | ||
+ | |||
+ | Пишеться | ||
+ | |||
+ | <nowiki>{| border=1 | ||
+ | |Клітинка 1*1 | ||
+ | |bgcolor=#FFCC00|Клітинка 2*1 | ||
+ | |Клітинка 3*1 | ||
+ | |- | ||
+ | |Клітинка 1*2 | ||
+ | |Клітинка 2*2 | ||
+ | |Клітинка 3*2 | ||
+ | |- | ||
+ | |bgcolor=#CCFF00|Клітинка 1*3 | ||
+ | |Клітинка 2*3 | ||
+ | |Клітинка 3*3 | ||
+ | |}</nowiki> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| border=1 | ||
+ | |Клітинка 1*1 | ||
+ | |bgcolor=#FFCC00|Клітинка 2*1 | ||
+ | |Клітинка 3*1 | ||
+ | |- | ||
+ | |Клітинка 1*2 | ||
+ | |Клітинка 2*2 | ||
+ | |Клітинка 3*2 | ||
+ | |- | ||
+ | |bgcolor=#CCFF00|Клітинка 1*3 | ||
+ | |Клітинка 2*3 | ||
+ | |Клітинка 3*3 | ||
+ | |} | ||
+ | |||
+ | ==== Фоновий колір таблиці ==== | ||
+ | Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут «bgcolor=#ABCDEF» в перший рядок таблиці, де ставитися і атрибут рамки: | ||
+ | |||
+ | Пишеться | ||
+ | |||
+ | <nowiki>{| border=1 bgcolor=#66FFFF | ||
+ | |Клітинка 1*1 | ||
+ | |Клітинка 2*1 | ||
+ | |Клітинка 3*1 | ||
+ | |- | ||
+ | |Клітинка 1*2 | ||
+ | |Клітинка 2*2 | ||
+ | |Клітинка 3*2 | ||
+ | |- | ||
+ | |Клітинка 1*3 | ||
+ | |Клітинка 2*3 | ||
+ | |Клітинка 3*3 | ||
+ | |}</nowiki> | ||
+ | |||
+ | Як він виглядає | ||
+ | |||
+ | {| border=1 bgcolor=#66FFFF | ||
+ | |Клітинка 1*1 | ||
+ | |Клітинка 2*1 | ||
+ | |Клітинка 3*1 | ||
+ | |- | ||
+ | |Клітинка 1*2 | ||
+ | |Клітинка 2*2 | ||
+ | |Клітинка 3*2 | ||
+ | |- | ||
+ | |Клітинка 1*3 | ||
+ | |Клітинка 2*3 | ||
+ | |Клітинка 3*3 | ||
+ | |} | ||
+ | |||
+ | ==== Класи оформлення клітинок ==== | ||
+ | {| class="simple" border="1" style="float:right; margin-left:2em" | ||
+ | |- | ||
+ | ! !! заголовок !! звичайна клітинка | ||
+ | |- | ||
+ | !'''highlight''' | ||
+ | !class="highlight" | | ||
+ | |class="highlight"| | ||
+ | |- | ||
+ | !'''bright''' | ||
+ | !class="bright" | | ||
+ | |class="bright" | | ||
+ | |- | ||
+ | !'''shadow''' | ||
+ | !class="shadow" | | ||
+ | |class="shadow" | | ||
+ | |- | ||
+ | !'''dark''' | ||
+ | !class="dark" | | ||
+ | |class="dark" | | ||
+ | |} | ||
+ | Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок. | ||
+ | |||
+ | Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка. | ||
+ | <pre style="width:20em"> | ||
+ | |- class="bright" | ||
+ | | ... | ||
+ | | ... | ||
+ | </pre> | ||
+ | |||
+ | Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас <tt>transparent</tt>. | ||
+ | <pre style="width:20em"> | ||
+ | |- | ||
+ | |class="bright"| ... | ||
+ | |class="highlight"| ... | ||
+ | </pre> | ||
+ | |||
+ | Наприклад: | ||
+ | {| class="wikitable" style="font-family:monospace" | ||
+ | |- | ||
+ | |width=20%| | ||
+ | |width=20%| | ||
+ | |width=20%| | ||
+ | |width=20%| | ||
+ | |width=20%| | ||
+ | |-class=dark | ||
+ | |colspan=2| |-class="dark" | ||
+ | | | ||
+ | | | ||
+ | |class=highlight| |class="highlight" | ||
+ | |-class=bright | ||
+ | |colspan=2| |-class="bright" | ||
+ | | | ||
+ | |class=transparent | |class="transparent" | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | Для заголовків рекомендується використовувати підсвічування <code>highlight</code>, за необхідності виділити більш важливий заголовок — <code>bright</code>. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення. | ||
+ | |||
+ | Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку <code>shadow</code>, за необхідності — <code>dark</code>). Если нужно выделить одну-две ячейки, можно использовать подсветку. | ||
+ | |||
+ | Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: <code>style="background-color: ''колір'';"</code> (див. [http://uk.wikipedia.org/wiki/%D0%92%D1%96%D0%BA%D1%96%D0%BF%D0%B5%D0%B4%D1%96%D1%8F:%D0%91%D0%B0%D1%80%D0%B2%D0%B8 таблицю кольорів]). Рекомендується використовувати цю можливість '' тільки '' якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок. | ||
+ | |||
+ | === Об'єднання клітин === | ||
+ | У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини. | ||
+ | |||
+ | |||
+ | ==== В кількох рядках – параметр rowspan ==== | ||
+ | |||
+ | <pre> | ||
+ | {| class="wikitable" | ||
+ | | стовпець 1, рядок 1 | ||
+ | | rowspan=2 | стовпець 2, рядок 1 (а також 2) | ||
+ | | стовпець 3, рядок 1 | ||
+ | |- | ||
+ | | стовпець 1, рядок 2 | ||
+ | | стовпець 3, рядок 2 | ||
+ | |} | ||
+ | </pre> | ||
+ | {| class="wikitable" | ||
+ | | стовпець 1, рядок 1 | ||
+ | | rowspan=2 | стовпець 2, рядок 1 (а також 2) | ||
+ | | стовпець 3, рядок 1 | ||
+ | |- | ||
+ | | стовпець 1, рядок 2 | ||
+ | | стовпець 3, рядок 2 | ||
+ | |} | ||
+ | |||
+ | <code>rowspan</code> спричиняє розтягнення клітинки на кілька рядків | ||
+ | |||
+ | ==== В кількох стовпцях – параметр colspan ==== | ||
+ | |||
+ | <pre> | ||
+ | {| class="wikitable" | ||
+ | | стовпець 1, рядок 1 | ||
+ | | colspan=2 | стовпець 2 (i 3), рядок 1 | ||
+ | |- | ||
+ | | стовпець 1, рядок 2 | ||
+ | | стовпець 2, рядок 2 | ||
+ | | стовпець 3, рядок 2 | ||
+ | |} | ||
+ | </pre> | ||
+ | |||
+ | {| class="wikitable" | ||
+ | | стовпець 1, рядок 1 | ||
+ | | colspan=2 | стовпець 2 (i 3), рядок 1 | ||
+ | |- | ||
+ | | стовпець 1, рядок 2 | ||
+ | | стовпець 2, рядок 2 | ||
+ | | стовпець 3, рядок 2 | ||
+ | |} | ||
+ | |||
+ | <code>colspan</code> спричиняє розтягнення клітинки на кілька стовпців | ||
+ | |||
+ | ==== Змішане поєднання ==== | ||
+ | <pre> | ||
+ | {| class="wikitable" style="text-align:left" | ||
+ | ! стовпець 1 (заголовок) | ||
+ | ! стовпець 2 (заголовок) | ||
+ | ! стовпець 3 (заголовок) | ||
+ | ! стовпець 4 (заголовок) | ||
+ | |- | ||
+ | | стовпець 1, рядок 1 | ||
+ | | colspan=2 | стовпець 2 i 3, рядок 1 | ||
+ | | rowspan=2 | стовпець 4, рядок 1 i 2 | ||
+ | |- | ||
+ | | colspan="3" | стовпець 1, 2 i 3, рядок 2 | ||
+ | |- | ||
+ | | стовпець 1, рядок 3 | ||
+ | | colspan="3" rowspan="2" | стовпець 2, 3 i 4, рядок 3 i 4 | ||
+ | |- | ||
+ | | стовпець 1, рядок 4 | ||
+ | |} | ||
+ | </pre> | ||
+ | |||
+ | {| class="wikitable" style="text-align:left" | ||
+ | ! стовпець 1 (заголовок) | ||
+ | ! стовпець 2 (заголовок) | ||
+ | ! стовпець 3 (заголовок) | ||
+ | ! стовпець 4 (заголовок) | ||
+ | |- | ||
+ | | стовпець 1, рядок 1 | ||
+ | | colspan=2 | стовпець 2 i 3, рядок 1 | ||
+ | | rowspan=2 | стовпець 4, рядок 1 i 2 | ||
+ | |- | ||
+ | | colspan="3" | стовпець 1, 2 i 3, рядок 2 | ||
+ | |- | ||
+ | | стовпець 1, рядок 3 | ||
+ | | colspan="3" rowspan="2" | стовпець 2, 3 i 4, рядок 3 i 4 | ||
+ | |- | ||
+ | | стовпець 1, рядок 4 | ||
+ | |} | ||
+ | |||
+ | ==== Вкладені таблиці ==== | ||
+ | |||
+ | <pre> | ||
+ | {| border=1 | ||
+ | | клітина 1 зовнішньої таблиці | ||
+ | | | ||
+ | {| border=1 style="background:ABCDEF" | ||
+ | | таблиця | ||
+ | |- | ||
+ | | вкладена | ||
+ | |} | ||
+ | | клітина 3 зовнішньої таблиці | ||
+ | |} | ||
+ | </pre> | ||
+ | |||
+ | ...додавання вкладеної таблиці в другій клітині зовнішньої таблиці | ||
+ | {| border=1 | ||
+ | | клітина 1 зовнішньої таблиці | ||
+ | | | ||
+ | {| border=1 style="background:ABCDEF" | ||
+ | | таблиця | ||
+ | |- | ||
+ | | вкладена | ||
+ | |} | ||
+ | | клітина 3 зовнішньої таблиці | ||
+ | |} |
Версія 19:18, 25 квітня 2018
Зміст |
Підрозділи(заголовки)
Використовуються заголовки шести рівнів:
Ви вводите :
== Заголовок другого рівня ==
Ви отримуєте :
Заголовок другого рівня
Ви вводите :
=== Заголовок третього рівня ===
Ви отримуєте :
Заголовок третього рівня
Ви вводите :
==== Заголовок четвертого рівня ====
Ви отримуєте :
Заголовок четвертого рівня
Ви вводите :
===== Заголовок п'ятого рівня =====
Ви отримуєте :
Заголовок п'ятого рівня
Ви вводите :
====== Заголовок шостого рівня ======
Ви отримуєте :
Заголовок шостого рівня
Перший рівень застосовувати не слід, оскільки він використовується лише для заголовку статті
Просте форматування тексту
Для логічного виділення частин тексту використовують просте форматування тексту:
Приклади простого форматування | ||
---|---|---|
Опис | Ви вводите | Ви отримуєте |
Звичайний текст | Текст | Текст |
Курсив | ''Текст курсивом'' | Текст курсивом |
Жирний | '''Текст жирним шрифтом''' | Текст жирним шрифтом |
Жирний курсив | '''''Текст жирним курсивом''''' | Текст жирним курсивом |
Також іноді використовується неформатований текст - рядок буде відображатись так, як він був набраний. Щоб рядок був неформатованим почніть його з пробілу:
приклад неформатованого тексту який відображається так, як він був набраний
Посилання
Різні види посиланнь | ||
---|---|---|
Опис | Ви вводите | Ви отримуєте |
Внутрішнє посилання | [[ Назва статті ]] | Назва статті |
[[ Назва статті | Видимий текст ]] | Видимий текст | |
Зовнішнє посилання | [http://www.example.org Видимий текст] | Видимий текст |
[http://www.example.org] | [1] | |
http://www.example.org | http://www.example.org |
Ненумерований список
Для створення ненумерованого списку - просто на початку рядка вводьте кількість символів " * ", яка відповідає глибині підпункту, назву якого задає цей рядок.
Ви вводите :
* Пункт перший * Пункт другий ** Перший підпункт другого *** Перший підпункт першого підпункту другого *** Другий підпункт першого підпункту другого ** Другий підпункт другого * Третій пункт
Ви отримуєте :
- Пункт перший
- Пункт другий
- Перший підпункт другого
- Перший підпункт першого підпункту другого
- Другий підпункт першого підпункту другого
- Другий підпункт другого
- Перший підпункт другого
- Третій пункт
Нумеровані списки
Для створення нумерованого списку - просто на початку рядка вводьте кількість символів " # ", яка відповідає глибині підпункту, назву якого задає цей рядок. Нумерація задаватиметься автоматично.
Ви вводите :
# Пункт перший # Пункт другий ## Перший підпункт другого ### Перший підпункт першого підпункту другого ### Другий підпункт першого підпункту другого ## Другий підпункт другого # Третій пункт
Ви отримуєте :
- Пункт перший
- Пункт другий
- Перший підпункт другого
- Перший підпункт першого підпункту другого
- Другий підпункт першого підпункту другого
- Другий підпункт другого
- Перший підпункт другого
- Третій пункт
Дворівневий список
Для створення дворівневого списку перед пунктами першого рівня вводьте " ; ", другого - ":".
Ви вводите :
; Перший рівень : другий рівень ; знову перший : знову другий : другий рівень
Ви отримуєте :
- Перший рівень
- другий рівень
- знову перший
- знову другий
- другий рівень
Відступи в списках
Для створення відступів, в тому числі у списках, на початку рядка, після специфікатора типу списку ( " * " або " # " ) додайте таку кількість двокрапок " : ", яка відповідає кількості відступів.
Ви вводите :
без відступу : перший рівень :: другий рівень ::: третій рівень *:відступи *::у списках * роблять так #:відступи #::у списках # роблять так
Ви отримуєте :
без відступу
- перший рівень
- другий рівень
- третій рівень
- другий рівень
-
- відступи
- у списках
- відступи
- роблять так
-
- відступи
- у списках
- відступи
- роблять так
Таблиці
Простий приклад
{| | Клітинка 1, рядок 1 | Клітинка 2, рядок 1 |- | Клітинка 1, рядок 2 | Клітинка 2, рядок 2 |}
створить
Клітинка 1, рядок 1 | Клітинка 2, рядок 1 |
Клітинка 1, рядок 2 | Клітинка 2, рядок 2 |
Табличні рамки
Вид рамки описується в першому рядку, відразу після {|.
- Товщина зовнішніх рамок встановлюється атрибутом border=n1, де «n1» — товщина лінії зовнішніх рамок.
- Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n2", де «n2» — товщина лінії внутрішніх рамок.
- Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом 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 |
Приклад із класом
Вихідний код
{| class="wikitable" |+Таблиця множення |- ! × !! 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">Текст</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 |
Класи оформлення клітинок
заголовок | звичайна клітинка | |
---|---|---|
highlight | ||
bright | ||
shadow | ||
dark |
Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.
Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка.
|- class="bright" | ... | ...
Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас transparent.
|- |class="bright"| ... |class="highlight"| ...
Наприклад:
|-class="dark" | |class="highlight" | |||
|-class="bright" | |class="transparent" |
Для заголовків рекомендується використовувати підсвічування highlight
, за необхідності виділити більш важливий заголовок — bright
. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення.
Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку shadow
, за необхідності — dark
). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: style="background-color: колір;"
(див. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.
Об'єднання клітин
У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.
В кількох рядках – параметр rowspan
{| class="wikitable" | стовпець 1, рядок 1 | rowspan=2 | стовпець 2, рядок 1 (а також 2) | стовпець 3, рядок 1 |- | стовпець 1, рядок 2 | стовпець 3, рядок 2 |}
стовпець 1, рядок 1 | стовпець 2, рядок 1 (а також 2) | стовпець 3, рядок 1 |
стовпець 1, рядок 2 | стовпець 3, рядок 2 |
rowspan
спричиняє розтягнення клітинки на кілька рядків
В кількох стовпцях – параметр colspan
{| class="wikitable" | стовпець 1, рядок 1 | colspan=2 | стовпець 2 (i 3), рядок 1 |- | стовпець 1, рядок 2 | стовпець 2, рядок 2 | стовпець 3, рядок 2 |}
стовпець 1, рядок 1 | стовпець 2 (i 3), рядок 1 | |
стовпець 1, рядок 2 | стовпець 2, рядок 2 | стовпець 3, рядок 2 |
colspan
спричиняє розтягнення клітинки на кілька стовпців
Змішане поєднання
{| class="wikitable" style="text-align:left" ! стовпець 1 (заголовок) ! стовпець 2 (заголовок) ! стовпець 3 (заголовок) ! стовпець 4 (заголовок) |- | стовпець 1, рядок 1 | colspan=2 | стовпець 2 i 3, рядок 1 | rowspan=2 | стовпець 4, рядок 1 i 2 |- | colspan="3" | стовпець 1, 2 i 3, рядок 2 |- | стовпець 1, рядок 3 | colspan="3" rowspan="2" | стовпець 2, 3 i 4, рядок 3 i 4 |- | стовпець 1, рядок 4 |}
стовпець 1 (заголовок) | стовпець 2 (заголовок) | стовпець 3 (заголовок) | стовпець 4 (заголовок) |
---|---|---|---|
стовпець 1, рядок 1 | стовпець 2 i 3, рядок 1 | стовпець 4, рядок 1 i 2 | |
стовпець 1, 2 i 3, рядок 2 | |||
стовпець 1, рядок 3 | стовпець 2, 3 i 4, рядок 3 i 4 | ||
стовпець 1, рядок 4 |
Вкладені таблиці
{| border=1 | клітина 1 зовнішньої таблиці | {| border=1 style="background:ABCDEF" | таблиця |- | вкладена |} | клітина 3 зовнішньої таблиці |}
...додавання вкладеної таблиці в другій клітині зовнішньої таблиці
клітина 1 зовнішньої таблиці |
| клітина 3 зовнішньої таблиці |