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

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук

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

Створення таблиць

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


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

Простий приклад

Вихідний код
{| 
| Веб-сайт 
| Вікі-сайт
|- 
| Дизайн має значення 
| Дизайн не має значення 
|}
Вигляд таблиці на сторінці
Веб-сайт Вікі-сайт
Дизайн має значення Дизайн не має значення

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

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

  • Товщина зовнішніх рамки встановлюється атрибутом border=n1, де «n1» — товщина лінії зовнішніх рамок.
  • Товщина внутрішніх рамок встановлюється атрибутом cellspacing="n2", де «n1» — товщина лінії внутрішніх рамки.
  • Мінімальна відстань між рамками і текстом клітинки встановлюється атрибутом 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

Меланж

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

Кольоровий текст

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

  • для окремого слова — <font color="#ABCDEF">Teкст</font>;
  • для довгого текста — <div style="color:#ABCDEF">Текст, текст.</div>,

де «ABCDEF» — індекс кольору.

Приклад

Вихідний код
{| border=1
|Назва конкурсу
|Команда <font color="#FF00FF">Міцні</font> горішки.
|Команда Проліски
|-
|1. Конкурс художників
|Оцінка 5
|<div style="color:#33CC66">Оцінка 4 <div>
|-
|2. Впізнай пісню
|Оцінка 5
|Оцінка 5
|}
Вигляд таблиці на сторінці
Назва конкурсу Команда Міцні горішки. Команда Проліски
1. Конкурс художників Оцінка 5
Оцінка 4
2. Впізнай пісню Оцінка 5 Оцінка 5

</blockquote>

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

Зробити кольорову клітинку можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» - індекс кольору.

Приклад

Вихідний код
{| border=1
 |Весела
 |bgcolor=#FFCC00|Спокійна
 |Упевнена
 |-
 |Радісна
 |Добра
 |Схвильована
 |-
 |bgcolor=#CCFF00|Сонячна
 |М'яка
 |Неспокійна
 |}
Вигляд таблиці на сторінці
Весела Спокійна Упевнена
Радісна Добра Схвильована
Сонячна М'яка Неспокійна

Фоновий колір таблиці

Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут "bgcolor=#ABCDEF" в перший рядок таблиці, де ставитися і атрибут рамки:

Приклад

Вихідний код
{| border=1 bgcolor=#CCFF00
 |Клітинка 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" | [[Зображення:408686216 1d9581225a m.jpg|150 px]]
| align="center" width="150px" | [[Зображення:408686216 1d9581225a m.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;" |
Два зображення
|}
|}
Вигляд таблиці на сторінці
Перший заголовок Другий заголовок
вверху зліва

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

внизу зліва внизу посередині
Таблиця в таблиці
120px-Japanese maple roede blade.jpg 120px-Japanese maple roede blade.jpg

Два зображення

Об'єднання клітин

У 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
Вихідний код
{| border=1
 |Клітинка 1 
 |colspan=2 |Клітинка  2, об'єднує в собі два стовбчики
 |-
 |Клітинка  3 
 |Клітинка  4
 |Клітинка  5
 |}
Вигляд таблиці на сторінці
Клітинка 1 Клітинка 2, об'єднує два стовбчики
Клітинка 3 Клітинка 4 Клітинка 5


Вкладені таблиці

Вихідний код
{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|вкладена
|-
|таблиця
|}
|знову перша таблиця
|}
Вигляд таблиці на сторінці
&alpha;
вкладена
таблиця
знову перша таблиця
120px-Nuvola apps important.svg.png Вкладена таблиця повинна починатись із нового рядка.