 |
Ця стор?нка ? дов?дка
, призначена для подання опису певних аспект?в в?к?пед?йних норм, звича?в, практик. Вона може в?дображати р?зн? р?вн? консенсусу, але це не
пол?тика ? не настанова
.
|
Таблиц? можуть бути корисними для представлення р?зноман?тно? ?нформац?? на В?к?пед??. Ця стор?нка опису? як створювати таблиц? в статтях В?к?пед?? та коли ?х доречно використовувати.
Зауважте, що використання розм?тки HTML не ? ан? необх?дним, ан? бажаним.
- Ви можете легко конвертувати таблиц? HTML у таблиц? В?к?розм?тки використовуючи
конвертор Ма?нуса Маске
.
Для таблиць використову?ться спец?альний код В?к?розм?тки, нижче.
- Таблиця почина?ться з рядка
{|
опц?? таблиц?
та зак?нчу?ться
|}
.
- Заголовок
? зручним способом описати таблицю; в?н ? необов'язковим, та включа?ться в таблицю рядком
|+
Заголовок
що сл?ду? за
{|
.
- Код для
рядка таблиц?
склада?ться ?з рядка
|-
, ?, починаючи ?з нового рядка, коду для кл?тинок в рядку, або кожна в
новому рядку
або ≪|≫ м?ж ними
- Табличн? дан?
? кодом в кл?тинках; записують ?х у форм?
|
значення
або
|
параметри кл?тинки
|
значення
- рядок ?з
заголовками колонок
опису?ться ≪!≫ зам?сть ≪|≫, за винятком розд?лювача м?ж параметрами кл?тинки та ?? значенням; р?зниця на екран? м?ж заголовками та звичайним рядком залежить в?д браузера, часто заголовки колонок в?дображаються жирним шрифтом.
- перша кл?тинка в рядку ста?
заголовком рядка
якщо рядок почина?ться ?з ≪!≫ зам?сть ≪|≫, та якщо решта даних в рядку починаються ?з наступного рядка.
Параметри таблиц? та кл?тинок так? ж що використовуються в розм?тц? HTML
[1]
.
Кожен рядок повинен м?стити однакову к?льк?сть кл?тинок, так що к?льк?сть колонок в таблиц? ? сталою (випадок, коли кл?тинка займа? к?лька колонок розгляда?ться дал?). Для порожн?х кл?тинок використовуйте наступний код
як значення кл?тинки .
Код
{|
| Кл?тинка 1, рядок 1
| Кл?тинка 2, рядок 1
|-
| Кл?тинка 1, рядок 2
| Кл?тинка 2, рядок 2
|}
створить таку таблицю
| Кл?тинка 1, рядок 1
|
Кл?тинка 2, рядок 1
|
| Кл?тинка 1, рядок 2
|
Кл?тинка 2, рядок 2
|
Вид рамки опису?ться в першому рядку, в?дразу п?сля {|.
- Товщина зовн?шн?х рамок встановлю?ться атрибутом border=n
1
, де ≪n
1
≫ ? товщина л?н?? зовн?шн?х рамок.
- Товщина внутр?шн?х рамок встановлю?ться атрибутом cellspacing="n
2
", де ≪n
2
≫ ? товщина л?н?? внутр?шн?х рамок.
- М?н?мальна в?дстань м?ж рамками ? текстом кл?тинки встановлю?ться атрибутом cellpadding=n
3
.
{| 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="standart"
|+Таблиця множення
|-
! ×?!! 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:
кол?р
;"
(див.
таблицю кольор?в
). Рекоменду?ться використовувати цю можлив?сть
т?льки
якщо необх?ден саме конкретний кол?р, а не просто лог?чне вид?лення частини кл?тинок.
| Перев?рка клас?в кл?тин у вашому браузер? ?
|
Ц? таблиц? призначен? для перев?рки того, що описан? вище класи правильно обробляються вашим браузером. У л?вих стовпцях використаний вказаний клас, в правих кол?р заданий стилем оформлення прямо в код? стор?нки. Кольори л?воруч ? праворуч повинн? зб?гатися.
| кл?тинка
|
|
|
#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
|
|
Для швидко? вставки кольору кл?тинки можна використовувати шаблон
Кольору кл?тинки
.
У 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 зовн?шньо? таблиц?
|
|
Нер?дко з'явля?ться питання ? як поставити таблицю поруч, а не п?д ?ншою. Для цього можна ужити батьк?вську таблицю в якост? каркасу, але це може спричинити проблеми для користувач?в, як? мають малу розд?льн?сть екрану. Л?пше скористатися елементом
<div>
з обт?канням л?воруч (
float:left
). Завдяки цьому, в залежност? в?д розд?льност? мон?тора користувача, поруч розм?ститься оптимальна к?льк?сть таблиць.
<div
style=
"float:left"
>
{|class="wikitable"
|tab1
A
|tab1
B
|tab1
C
|tab1
D
|-
|A
щось
там
|B
щось
там
|C
щось
там
|D
щось
там
|}
</div>
<div
style=
"float:left"
>
{|class="wikitable"
|tab2
A
|tab2
B
|tab2
C
|tab2
D
|-
|A
щось
тут
i
там
|B
щось
тут
i
там
|C
щось
тут
i
там
|D
щось
тут
i
там
|}
</div>
<div
style=
"float:left"
>
{|class="wikitable"
|tab3
A
|tab3
B
|tab3
C
|tab3
D
|-
|A
щось
тут
i
тут
|B
щось
тут
i
тут
|C
щось
тут
i
тут
|D
щось
тут
i
тут
|}
</div>
<div>
{|class="wikitable"
|tab4
A
|tab4
B
|tab4
C
|tab4
D
|-
|A
щось
там
i
там
|B
щось
там
i
там
|C
щось
там
i
там
|D
щось
там
i
там
|}
</div>
| tab1 A
|
tab1 B
|
tab1 C
|
tab1 D
|
| A щось там
|
B щось там
|
C щось там
|
D щось там
|
| tab2 A
|
tab2 B
|
tab2 C
|
tab2 D
|
| A щось тут i там
|
B щось тут i там
|
C щось тут i там
|
D щось тут i там
|
| tab3 A
|
tab3 B
|
tab3 C
|
tab3 D
|
| A щось тут i тут
|
B щось тут i тут
|
C щось тут i тут
|
D щось тут i тут
|
| tab4 A
|
tab4 B
|
tab4 C
|
tab4 D
|
| A щось там i там
|
B щось там i там
|
C щось там i там
|
D щось там i там
|
- Увага!
- В останн?й таблиц? float: left не дода?ться, завдяки чому подальший текст висв?тлю?ться нижче, а не праворуч в?д таблиць.
Таблиц? з динам?чною шириною
| Трек
|
Назва
|
|
| 1.
|
"Life's What You Make It"
(live)
|
| Трек
|
Назва
|
Автор
|
Час
|
| 1.
|
"
See You Again
"
|
Miley Cyrus, Armato, James
|
3:10
|
Таблиц? з? сталою шириною зроблен? за допомогою зм?нно? width
| Трек
|
Назва
|
| 1.
|
"Life's What You Make It"
(live)
|
| Трек
|
Назва
|
Автор
|
Час
|
| 1.
|
"
See You Again
"
|
Miley Cyrus, Armato, James
|
3:10
|
Коди
| Код таблиц? з динам?чною шириною
|
{|
|-
bgcolor="#CCCCCC"
!
Трек
!!
Назва
!!
Автор
!!
Час
|-
|
1.
||
"[[We
Got
the
Party|We
Got
The
Party]]"
||
Greg
Wells,
Kara
DioGuardi
||
3:37
|}
{|
|-
bgcolor="#CCCCCC"
!
Трек
!!
Назва
!!
|-
|
1.
||
"Life's
What
You
Make
It"
<small>
(live)
</small>
|}
{|
|-
bgcolor="#CCCCCC"
!
Трек
!!
Назва
!!
Автор
!!
Час
|-
|
1.
||
"[[See
You
Again]]"
||
Miley
Cyrus,
Armato,
James
||
3:10
|}
|
| Код таблиц? з визначеною шириною
|
{|
|-
bgcolor="#CCCCCC"
!
width="30px"|
Трек
!
width="180px"|
Назва
!
width="250px"|
Автор
!
width="35px"|
Час
|-
|
1.
||
"[[We
Got
the
Party|We
Got
The
Party]]"
||
Greg
Wells,
Kara
DioGuardi
||
3:37
|}
{|
|-
bgcolor="#CCCCCC"
!
width="30px"|
Трек
!
width="180px"|
Назва
|-
|
1.
||
"Life's
What
You
Make
It"
<small>
(live)
</small>
|}
{|
|-
bgcolor="#CCCCCC"
!
width="30px"|
Трек
!
width="180px"|
Назва
!
width="250px"|
Автор
!
width="35px"|
Час
|-
|
1.
||
"[[See
You
Again]]"
||
Miley
Cyrus,
Armato,
James
||
3:10
|}
|
?сну? спец?альна опц?я, що дозволя? сортувати дан? в стовпчиках. Щоб нею скористатися, сл?д дописати до
class="wikitable"
опц?ю
class="wikitable sortable"
як в код? нижче.
{| class="wikitable sortable" style="text-align:right"
! style="width:100px" | Основний стовпчик
! style="width:80px" | Сортування за абеткою
! style="width:80px" | Сортування за числами
! style="width:80px" | Сортування за ?ншими символами
|-
! Р?к 2006
| Музика
| 245
| 18
|-
! Р?к 2005
| Л?тература
| 127
| -
|-
! Р?к 2004
| Техн?ка
| 52
| 32
|-
! Р?к 2006
| Стр?льба з лука
| 21,12
| 987
|-
! Р?к 2003
| Сад?вництво
| 21
|??
|}
Використовуючи цей код, ми отрима?мо таблицю, в як?й, при натисканн? на трикутничок, зм?нн? в?дсортуються за в?дпов?дним стовпцем.
| Основний стовпчик
|
Сортування за абеткою
|
Сортування за числами
|
Сортування за ?ншими символами
|
| Р?к 2006
|
Музика
|
245
|
18
|
| Р?к 2005
|
Техн?ка
|
127
|
-
|
| Р?к 2004
|
Техн?ка
|
52
|
32
|
| Р?к 2006
|
Стр?льба з лука
|
21,12
|
987
|
| Р?к 2003
|
Сад?вництво
|
21
|
?
|
Можна встановити, щоб деяк? стовпц? не п?длягали сортуванню:
| Основний стовпець
|
Не сорту?ться
|
Сортування за числом
|
| Р?к 2006
|
Так
|
245
|
| Р?к 2005
|
Н?
|
127
|
| Р?к 2003
|
Не сорту?ться
|
21
|
Для цього сл?д додати опц?ю
class="unsortable"
в опис? стовпц?в у першому рядку (заголовку) таблиц?:
{| class="wikitable sortable" style="text-align:right"
! width="100px" | Основний стовпець
! width="80px" class="unsortable" | Не сорту?ться
! width="80px" | Сортування чисел
...
Можна також зазначити, щоб нижн?й рядок не п?длягав сортуванню ? завжди лишався в нижн?й частин? таблиц?:
| Основний стовпець
|
Не сорту?ться
|
Сортування чисел
|
| Р?к 2006
|
Так
|
245
|
| Р?к 2005
|
Н?
|
127
|
| Р?к 2003
|
не сорту?мо
|
21
|
| П?дсумок
|
Сортування не ? складним
|
45
|
Для цього сл?д подати атрибут
class="sortbottom"
:
|-
! Р?к 2003
| не сорту?мо
| 21
|- class="sortbottom"
! П?дсумок
| Сортування не ? складним
| 45
|}
Сортування дат в таблицях
[
ред.
|
ред. код
]
В принцип?, дата в таблицях сортуються правильно т?льки тод?, коли наводяться в цифровому формат? р?к-м?сяць-день, який не завжди використову?ться. Для цього створено шаблон
dts
, який дозволя? правильно сортувати дати. Прикладом ? такий код...
{| class="wikitable sortable" style="text-align:right"
!Головний стовпець
!Сортування дат
!Сортування чисел
|-
! Позиц?я 1
| {{dts|1999|01|01}}
| 245
|-
! Позиц?я 2
| {{dts|1995|07|01}}
| 127
|-
! Позиц?я 3
| {{dts|1997|03|04}}
| 21
|}
...створю? таблицю, в як?й дата в?добража?ться правильно ? може бути в?дсортована:
Сортування пр?звищ у таблицях
[
ред.
|
ред. код
]
Проблеми можуть виникнути при сортуванн? персонал?й за пр?звищем у випадку, коли статт? В?к?пед?? ?менуються в формат? "?м'я пр?звище". Для того, щоб правильно вказати ключ сортування, використову?ться шаблон ?мен
sortname
, що розв'яу? цю проблему. Приклади...
{| class="wikitable sortable"
! ?м'я
! Профес?я
! Р?к
|-
|{{sortname|Greg|Walden}}
|пол?тик
|1991
|-
|{{sortname|Wes|Cooley}}
|д?яч
|1996
|-
|{{sortname|Smith|Dennis|Denny Smith}}
|актив?ст
|1994
|-
|{{sortname|Pete|Sampras|nolink=tak}}
|спортсмен
|1993
|}
...да? таблиця, де персонал?? можуть бути розсортован? за пр?звищем:
| ?м'я
|
Профес?я
|
Р?к
|
| Walden, Greg
Greg Walden
|
пол?тик
|
1991
|
| Cooley, Wes
Wes Cooley
|
д?яч
|
1996
|
| Dennis, Smith
Smith Dennis
|
актив?ст
|
1994
|
| Sampras, Pete
Pete Sampras
|
спортсмен
|
1993
|
Генеалог?чна таблиця
[
ред.
|
ред. код
]
Сортування таблиць, що м?стять малюнки
[
ред.
|
ред. код
]
Шаблон
sortkey
дозволя? надати кл?тинц? невидимий ключ сортування. Наприклад, це може бути корисно, коли стовпець м?стить малюнки. Застосування в польськ?й в?к?пед??:
pl:polskie lotniska
.
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Приклад таблиц?'''
|-
! style="background:#efefef;" | Перший заголовок
! colspan="2" style="background:#ffdead;" | Другий заголовок
|-
|valign="top" | (зл?ва) зверху
| align="center" valign="center" | посередин? <br/>як вертикально, <br/>так ? горизонтально
| rowspan=2 style="border-bottom:3px solid grey;" align="right" valign="center" | справа,<br/>а вертикально <br/>посередин?
|-
| style="border-bottom:3px solid grey;" valign="bottom" | внизу (зл?ва)
| style="border-bottom:3px solid grey;" align="center" | внизу <br/>посередин?
|-
| colspan="3" align="center" |
{| border="0"
|+''Таблиця в таблиц?''
|-
| align="center" width="150px" | [[Файл:wiki.png]]
| align="center" width="150px" | [[Файл: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;" |
Два лого В?к?пед??
|}
|}
Приклад таблиц?
| Перший заголовок
|
Другий заголовок
|
| (зл?ва) зверху
|
посередин?
як вертикально,
так ? горизонтально
|
справа,
а вертикально
посередин?
|
| внизу (зл?ва)
|
внизу
посередин?
|
Таблиця в таблиц?
|
|
|
Два лого В?к?пед??
|
|
?нш? п?дтримуван? типи
табличного
синтаксису що п?дтримуються MediaWiki:
- XHTML
- 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
|
| Зразок таблиц?
|
|
<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
|}
|
| Зразок таблиц?
|
|
<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
|
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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>
да?
Докладн?ше про оформлення таблиць за допомогою шаблон?в стилю можна д?знатися на стор?нц?
Дов?дка:Шаблони стилю
|