Довідка:Таблиці - Історія редагувань

Крамаренко Тетяна Григорівна в 09:04, 30 березня 2014

2014-03-30T09:04:08Z

Крамаренко Тетяна Григорівна: /* Колір клітинки */

2014-03-29T13:15:28Z

‎Колір клітинки

Крамаренко Тетяна Григорівна в 13:13, 29 березня 2014

2014-03-29T13:13:38Z

Komir Denis: /* Вигляд таблиці на сторінці */

2014-03-25T18:13:18Z

‎Вигляд таблиці на сторінці

Грабовський Ярослав: /* Вихідний код */

2013-07-10T11:13:20Z

‎Вихідний код

Admin: Створена сторінка: Ця сторінка описує як створювати таблиці та коли їх доречно використовувати. ==Створенн…

2010-08-15T08:29:23Z

Створена сторінка: Ця сторінка описує як створювати таблиці та коли їх доречно використовувати. ==Створенн…

Нова сторінка

Ця сторінка описує як створювати таблиці та коли їх доречно використовувати.

==Створення таблиць ==
* Таблиця починається з рядка <code>{|</code> ''опції таблиці'' та закінчується <code>|}</code>.
* '''Заголовок''' є зручним способом описати таблицю; він є необов'язковим, та включається в таблицю рядком <code>|+</code> ''Заголовок'' що слідує за <code>{|</code>.
* Код для '''рядка таблиці''' складається із рядка <code>|-</code>, і, починаючи із нового рядка, коду для клітинок в рядку, або кожна в ''новому рядку'' або "|" між ними
* '''Табличні дані''' є кодом в клітинках; записують їх у формі | ''значення'' або | ''параметри клітинки'' | ''значення'' 
* рядок із '''заголовками колонок''' описується "!" замість "|", за винятком розділювача між параметпами клітинки та її значенням; різниця на екрані між заголовками та звичайним рядком залежить від браузера, часто заголовки колонок відображаються жирним шрифтом.
* перша клітинка в рядку стає '''заголовком рядка''' якщо рядок починається із "!" замість "|", та якщо решта даних в рядку починаються із наступного рядка.

Кожен рядок повинен містити однакову кількість клітинок, так що кількість колонок в таблиці є сталою (випадок, коли клітинка займає кілька колонок розглядається далі). Для порожніх клітинок використовуйте наступний код <code>'''&nbsp;'''</code> як значення клітинки .

==== Простий приклад ====
=====Вихідний код=====
<pre><nowiki>
{|
| Клітинка 1, рядок 1
| Клітинка 2, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 2, рядок 2
|}
</nowiki></pre>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{|
| Клітинка 1, рядок 1
| Клітинка 2, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 2, рядок 2
|}
</blockquote>

==Табличні рамки==

Вид рамки описується в першому рядку, відразу після {|.
*Товщина зовнішніх рамки встановлюється атрибутом border=n1, де «n1» — товщина лінії зовнішніх рамок.
*Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n2", де «n1» — товщина лінії внутрішніх рамки.
*Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом cellpadding=n3.

====Приклади: Таблиця множення ====

=====Вихідний код=====
<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>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
</blockquote>
=====Вихідний код=====
<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>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
</blockquote>

==Меланж==
Нижче наведені більш "просунутий" приклади що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими -- інші користувачі редагуватимуть їх також!

===Кольоровий текст===
'''Текст''', що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:
* для окремого слова — <nowiki>Teкст</nowiki>;
* для довгого текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>,
де «ABCDEF» — індекс кольору.
====Приклад====
=====Вихідний код=====
<pre><nowiki>
{| border=1
|Клітинка 1*1
|Кольорове одне слово.
|Клітинка 3*1
|-
|Клітинка 1*2
|Клітинка 2*2
|<div style="color:#33CC66">Кольоровий весь рядок.</div>
|-
|Клітинка 1*3
|Клітинка 2*3
|Клітинка 3*3
|}</nowiki></pre>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1
|Клітинка 1*1
|Кольорове одне слово.
|Клітинка 3*1
|-
|Клітинка 1*2
|Клітинка 2*2
|<div style="color:#33CC66">Кольоровий весь рядок.</div>
|-
|Клітинка 1*3
|Клітинка 2*3
|Клітинка 3*3
|}
</blockquote>

=== Колір клітинки ===
Зробити '''кольорову клітинку''' можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» - індекс кольору.
====Приклад====
=====Вихідний код=====
<pre><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></pre>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1
|Клітинка 1*1
|bgcolor=#FFCC00|Клітинка 2*1
|Клітинка 3*1
|-
|Клітинка 1*2
|Клітинка 2*2
|Клітинка 3*2
|-
|bgcolor=#CCFF00|Клітинка 1*3
|Клітинка 2*3
|Клітинка 3*3
|}
</blockquote>

===Фоновий колір таблиці===
Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут "bgcolor=#ABCDEF" в перший рядок таблиці, де ставитися і атрибут рамки:
====Приклад====
=====Вихідний код=====
<pre><nowiki>
{| border=1 bgcolor=#CCFF00
|Клітинка 1*1
|Клітинка 2*1
|Клітинка 3*1
|-
|Клітинка 1*2
|Клітинка 2*2
|Клітинка 3*2
|-
|Клітинка 1*3
|Клітинка 2*3
|Клітинка 3*3
|}
</nowiki></pre>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1 bgcolor=#66FFFF
|Ячейка 1*1
|Ячейка 2*1
|Ячейка 3*1
|-
|Ячейка 1*2
|Ячейка 2*2
|Ячейка 3*2
|-
|Ячейка 1*3
|Ячейка 2*3
|Ячейка 3*3
|}
</blockquote>

===Інші приклади===
=====Вихідний код=====
<pre><nowiki>
{| 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" | [[Зображення:Роза1.JPG|150 px]]
| align="center" width="150px" | [[Зображення:Роза1.JPG|150 px]]
|-
| 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;" |
Два зображення
|}
|}
</nowiki></pre>

=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">

{| 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" | [[Зображення:Роза1.JPG|150 px]]
| align="center" width="150px" | [[Зображення:Роза1.JPG|150 px]]
|-
| 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;" |
Два зображення
|}
|}
</blockquote>

== Об'єднання клітин ==
У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.
==== Приклади ====
=====Вихідний код=====
<pre><nowiki>
{| border=1
| Клітинка 1, рядок 1
|rowspan=2| Клітинка 2, рядок 1 (і 2)
| Клітинка 3, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 3, рядок 2
|}
</nowiki></pre>
=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1
| Клітинка 1, рядок 1
|rowspan=2| Клітинка 2, рядок 1 (і 2)
| Клітинка 3, рядок 1
|-
| Клітинка 1, рядок 2
| Клітинка 3, рядок 2
|}
</blockquote>
=====Вихідний код=====
<pre><nowiki>
{| border=1
|Клітинка 1
|colspan=2 |Клітинка 2, об'єднує в собі два стовбчики
|-
|Клітинка 3
|Клітинка 4
|Клітинка 5
|}</nowiki></pre>
=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1
|Клітинка 1
|colspan=2 |Клітинка 2, об'єднує два стовбчики
|-
|Клітинка 3
|Клітинка 4
|Клітинка 5
|}
</blockquote>

 

== Вкладені таблиці==
=====Вихідний код=====
<pre><nowiki>
{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|вкладена
|-
|таблиця
|}
|знову перша таблиця
|}
</nowiki></pre>
=====Вигляд таблиці на сторінці=====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|вкладена
|-
|таблиця
|}
|знову перша таблиця
|}
</blockquote>

'''Вкладена таблиця повинна починатись із нового рядка.'''

==Таблиці в тексті==

Використовуючи align=right, текст що слідує після таблиці з'явиться зліва від неї. Не використовуйте попередньо форматований текст, він може накладатись на таблицю, оскільки він автоматично не переноситься на новий рядок.

{| border="1" cellpadding="2" 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

Щоб уникнути цього, використайте <nowiki> </nowiki>:

{| border="1" cellpadding="2" 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

Якщо використаєте align=left, текст після таблиці буде розміщено зліва від таблиці.

{| border="1" cellpadding="2" 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:

{| cellpadding=50 align=left
|-
|
{| border=1 cellpadding="2"
|+Multiplication table
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
|}
|}
{| cellpadding=50 align=right
|[[Зображення:Роза1.JPG|150 px]]
|}
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
{| cellpadding=50 align=left border=5
|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

=Зовнішні посилання=
*[http://www.cnic.org/html2mediawiki.html Конвертор HTML таблиць у Вікі на cnic.org]
*[http://area23.brightbyte.de/csv2wp.php csv2wp] - конвертує CSV формат у Вікі. Зручний для імпорту в текст статті таблиць із Excel.
*[http://www.wackyboy.com/ConvertHtmlTableToWikiTable.html Конвертор HTML таблиць у Вікі на wackyboy.com]
*[http://www.uni-bonn.de/~manfear/html2wiki-tables.php Конвертор HTML таблиць у Вікі на uni-bonn.de]
*[http://diberri.dyndns.org/html2wiki.html Конвертор HTML таблиць у Вікі на diberri.dyndns.org]

[[Категорія:Довідка]]

@@ Рядок 188: / Рядок 188: @@
 !width=10% bgcolor=#FFCC00|Етап
-!width=605% bgcolor=#FFCC00|Що робити?1
+!width=60% bgcolor=#FFCC00|Що робити?1
 !width=30% bgcolor=#FFCC00|Документи
   |-

@@ Рядок 184: / Рядок 184: @@
 === Колір клітинки ===
 Зробити '''кольорову клітинку''' можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» - індекс кольору.
 {| border=1 width=100%
 !width=10% bgcolor=#FFCC00|Етап
-!width=60% bgcolor=#FFCC00|Що робити?1
+!width=60% bgcolor=#CCFF00|Що робити?
-!width=30% bgcolor=#FFCC00|Документи
+!width=30% bgcolor=#FF00FF|Документи
   |-
   |Клітинка 1*2
@@ Рядок 204: / Рядок 207: @@
   |}
-====Приклад====
+</nowiki></pre>
 =====Вихідний код=====
 <pre><nowiki>

@@ Рядок 226: / Рядок 226: @@
   |Клітинка 1*1
   |Клітинка 2*1
- |Клітинка 3*1
   |-
   |Клітинка 1*2
   |Клітинка 2*2
- |Клітинка 3*2
   |-
   |Клітинка 1*3
   |Клітинка 2*3
- |Клітинка 3*3
   |}
 </nowiki></pre>