Довідка:Таблиці

Матеріал з Файна Меморії

Перейти до: навігація, пошук

Таблиці можуть бути корисними для представлення різноманітної інформації. Ця сторінка описує як створювати таблиці в статтях та коли їх доречно використовувати. Зауважте, що використання розмітки HTML не є ані необхідним, ані бажаним.

Зміст

[ред.] Конвеєрний синтаксис (Вікірозмітка)

Ви можете легко конвертувати таблиці HTML у таблиці Вікірозмітки використовуючи конвертор Маґнуса Маске.

Для таблиць використовується спеціальний код Вікірозмітки, нижче.

Параметри таблиці та клітинок такі ж що використовуються в розмітці HTML [1].

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

[ред.] Простий приклад

{| 
| Клітинка 1, рядок 1 
| Клітинка 2, рядок 1 
|- 
| Клітинка 1, рядок 2 
| Клітинка 2, рядок 2 
|}

створить

Клітинка 1, рядок 1 Клітинка 2, рядок 1
Клітинка 1, рядок 2 Клітинка 2, рядок 2

[ред.] Табличні рамки

Вид рамки описується в першому рядку, відразу після {|.

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

[ред.] Вихідний код

{| 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

[ред.] Меланж

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

[ред.] Кольоровий текст

Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:

де «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

[ред.] Інші приклади

[ред.] Вихідний код

{| 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" | [[Image:wiki.png]]
| align="center" width="150px" | [[Image:wiki.png]]
|-
| 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;" |
Два лого
|}
|}

[ред.] Як виглядає

Приклад таблиці
Перший заголовок Другий заголовок
вверху зліва

права сторона

внизу зліва внизу посередині
Таблиця в таблиці
[[Зображення:wiki.png]] [[Зображення:wiki.png]]

Два лого

[ред.] Об'єднання клітин

У wiki-стилі, як і в HTML, є можливість об'єднувати декілька клітин як по вертикалі, так і по горизонталі. Для об'єднання по вертикалі застосовується атрибут rowspan=n, де «n» — число рядків, які повинен об'єднати данна клітина. Цей атрибут вписується перед змістом об'єднуючої клітини.

[ред.] Приклади

{| border=1
| Клітинка 1, рядок 1 
|rowspan=2| Клітинка 2, рядок 1 (і 2) 
| Клітинка 3, рядок 1 
|- 
| Клітинка 1, рядок 2 
| Клітинка 3, рядок 2 
|}
Клітинка 1, рядок 1 Клітинка 2, рядок 1 (і 2) Клітинка 3, рядок 1
Клітинка 1, рядок 2 Клітинка 3, рядок 2

Для об'єднання клітин по горизонталі використовується атрибут colspan=n.

Приклад:
{| border=1
 |Клітинка 1 
 |colspan=2 |Клітинка  2, об'єднує в собі два стовпчики
 |-
 |Клітинка  3 
 |Клітинка  4
 |Клітинка  5
 |}

Виглядає це так:

Клітинка 1 Клітинка 2, об'єднує два стовпчики
Клітинка 3 Клітинка 4 Клітинка 5


[ред.] Вкладені таблиці

{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|вкладена
|-
|таблиця
|}
|знову перша таблиця
|}

малює таблицю

&alpha;
вкладена
таблиця
знову перша таблиця

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

[ред.] Інші варіанти табличного синтаксису

Інші підтримувані типи табличного синтаксису що підтримуються MediaWiki:

  1. XHTML
  2. HTML і вікі <td>

Всі три підтримуються MediaWiki та генерують (в даний час) коректний код HTML, але конвеєрний синтаксис є найпростішим, за винятком, можливо, людей що вже добре знайомі із розміткою HTML. Окрім того, HTML і вікі <td> синтаксис необов'язково підтримуватимуться браузерами в майбутньому, особливо на портативних пристроях.

Див. HTML element#Tables. Зауважте, що елементи thead, tbody, tfoot, і colgroup на даний момент не підтримуються MediaWiki.

[ред.] Порівняння

Порівняння табличного синтаксису
XHTML HTML & Вікі-td Конвеєрний
Таблиця <table></table> <table></table>
{| params 
|}
Заголовок <caption></caption> <caption></caption>
|+ caption
Рядок <tr></tr> <tr>
|- params 
Дані клітинки

<td>cell1</td>
<td>cell2</td>

<td>cell1
<td>cell2

| cell1
| cell2
Дані клітинки <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3
|cell1||cell2||cell3
Заголовок клітинки <th></th> <th>
! heading
Зразок таблиці
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}
Зразок таблиці
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}
Арґументи За

Можна переглядати/відлагоджувати в будь-якому редакторі 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
43161aa2092f.jpg

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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

[ред.] Вирівнювання по десятковій комі

Наступний спосіб дозволяє вирівнювати числа в колонках по десятковій комі:

<blockquote>
{| cellpadding=0 cellspacing=0
|align=right| 432 || . || 1
|-
|align=right| 43 || . || 21
|-
|align=right| 4 || . || 321
|}
</blockquote>

дає

432 . 1
43 . 21
4 . 321

[ред.] Шаблони стилю

Докладніше про оформлення таблиць за допомогою шаблонів стилю можна дізнатися на сторінці Довідка:Шаблони стилю

[ред.] Зовнішні посилання

Особисті інструменти
Варіанти
Дії
Навігація
Братні проекти
Інструменти