Направо към съдържанието

Уикипедия:Таблици

от Уикипедия, свободната енциклопедия
  Първи стъпки   Правна рамка   Енциклопедично
съдържание
  Уикиетикет   Редактиране
на страници
  Портал на
общността
  Навигация  

Тази страница дава информация за синтаксиса, който се ползва при създаване на таблици със средствата на софтуера МедияУики.

Най-простият начин за автоматично създаване на таблица в Уикипедия е като се избере опцията „Таблица“ от падащото меню „Елементи от статията“ в режим на редактиране.

Стандартният код на таблицата е
{| class="wikitable"
|+ Заглавие на таблицата
! колона 1
! колона 2
! колона 3
|-
| ред 1, клетка 1
| ред 1, клетка 2
| ред 1, клетка 3
|-
| ред 2, клетка 1
| ред 2, клетка 2
| ред 2, клетка 3
|}
което в режим на четене извежда:
Заглавие на таблицата
колона 1 колона 2 колона 3
ред 1, клетка 1 ред 1, клетка 2 ред 1, клетка 3
ред 2, клетка 1 ред 2, клетка 2 ред 2, клетка 3

Тази примерна таблица дава основна представа на какъв принцип се записват таблиците в уики-код и как да бъдат надстроявани с още колони или редове.

Могат да се използват два онлайн скрипта, които конвертират таблици, създадени с външен редактор, до таблица, записана в уики-код:

  • HTML2wiki-tables – превръща в уики-код HTML-таблици;
  • tab2wiki – превръща в уики-код таблици, копирани от Word, Excel и други.

Оттук надолу следват подробни обяснения за различните възможности за дизайн и форматиране на таблиците, като се започва от най-простите примери.

Елементи на таблицата

[редактиране на кода]
Заглавие на таблицата
Колона 1 Колона 2 Колона 3
Ред 1 Клетка 2 Клетка 3
Ред A Клетка Б Клетка В

Въпреки че уики-софтуерът работи и с HTML-синтаксиса за таблици, те са по-лесни за създаване с възможностите на уики-кода. Основна роля играе вертикалната чертица | (pipe). Основните елементи на всяка таблица, генерирана с уики-код, са дадени по-долу:

  • Таблицата се огражда от: отваряща фигурна скоба и вертикална чертица в началото, и вертикална чертица и затваряща фигурна скоба в края. Началото на таблицата {| и краят |} задължително трябва да стоят на отделни редове.
{|
  код и съдържание на таблицата
|}
  • В началото на таблицата може по желание да се сложи заглавие (table caption). То се отделя от останалата част от таблицата посредством вертикална чертица и знака „плюс“ (|+):
{|
|+ Заглавие
  код и съдържание на таблицата
|}
  • За да се започне нов ред от таблицата, на нов ред се поставя вертикална чертица и тиренце: |-. Съдържанието на клетките от този нов ред започва от следващия ред.
{|
|+ Заглавие на таблицата
|-
  съдържание на клетка
|-
  съдържание на клетка
|}
  • Съдържанието на всяка таблична клетка се въвежда на нов ред, започващ с вертикална чертица:
{|
|+ Заглавие на таблицата
|-
| съдържание на първа клетка от първи ред
| съдържание на втора клетка от първи ред
|-
| съдържание на първа клетка от втори ред
| съдържание на втора клетка от втори ред
|}
  • Клетките могат да бъдат отделяни или с по една отвесна чертица, но тогава всяка клетка трябва да бъде на отделен ред, или да бъдат на един ред, но разделени с двойка отвесни чертици „||“. И при двата варианта резултатът е един и същ, като първият вариант е по-подходящ при повече на брой клетки или повече съдържание във всяка клетка:
{|
|+ Заглавие на таблицата
|-
| Клетка 1 || Клетка 2 || Клетка 3
|-
| Клетка А 
| Клетка Б
| Клетка В
|}
  • В случай че съдържанията на всички клетки от табличен ред бъдат записани на един ред в уики-кода, но разделени само с по една отвесна чертица, това ще изведе един малко неочакван резултат, тъй като първата клетка се интерпретира като модификатор на форматирането на втората, в която пък се сливат всички останали клетки на реда. По-ясно ще стане със следния пример: кодът
{| border="1"
|модификатор на форматирането (не се вижда на екран)|Всички тези клетки |(включително отвесните чертици) |се сливат в |първата клетка
|}

дава на екран

Всички тези клетки |(включително отвесните чертици) |се сливат в |първата клетка

Модификаторът на форматирането обаче може да бъде много полезен:

{| border="1"
| Клетка 1 (няма модификатор, не е подравнена)
|-
|align="right" | Клетка 2 (подравнена вдясно)
|}
Клетка 1 (няма модификатор, не е подравнена)
Клетка 2 (подравнена вдясно)

Трябва само да се запомни: не повече от 2 единични отвесни чертици на ред!

  • Заглавните клетки в таблицата се обозначават, като се предшестват от удивителен знак вместо вертикална чертица. Ако са записани на един ред, могат да се разделят както чрез ||, така и чрез !!. Заглавните клетки традиционно се визуализират в браузъра различно от обикновените клетки: текстът е в получер шрифт и центриран.
{|
|+ Заглавие на таблицата
! Колона 1 !! Колона 2 !! Колона 3
|-
| Клетка 1 || Клетка 2 || Клетка 3
|-
| Клетка А
| Клетка Б
| Клетка В
|}
  • Освен първите клетки от колоните, като заглавни могат да се форматират и първите клетки от редовете. Това става, като също бъдат предшествани от ! вместо | и задължително следващите клетки от табличния ред започнат на следващия ред.
{|
|+ Заглавие на таблицата
! Колона 1 !! Колона 2 !! Колона 3
|-
! Ред 1
| Клетка 2 || Клетка 3
|-
! Ред A
| Клетка Б
| Клетка В
|}
  • Форматирането на таблицата може да бъде променено с различни незадължителни параметри. Например, може да се добави рамка на таблицата. Уики-кодът
{| border="1"
|+ Заглавие на таблицата
! Колона 1 !! Колона 2 !! Колона 3
|-
! Ред 1
| Клетка 2 || Клетка 3
|-
! Ред A
| Клетка Б
| Клетка В
|}

изглежда на екран по следния начин:

Заглавие на таблицата
Колона 1 Колона 2 Колона 3
Ред 1 Клетка 2 Клетка 3
Ред A Клетка Б Клетка В

Параметрите на таблиците и клетките са еднакви с тези в HTML (вижте [1] и en:Table (HTML)). МедияУики обаче не поддържа командите thead, tbody, tfoot, colgroup и col.

За да изглежда и да функционира правилно табицата, всеки неин ред трябва да съдържа равен брой клетки (колони), освен ако не са приложени командите colspan/rowspan за хоризонтално/вертикално сливане на клетки.

Клетките, които трябва да остават празни, могат да бъдат оставяни празни и в уики-кода, или за по-сигурно да се попълват с несекаемия интервал &nbsp;. За да се визуализира на екран вертикална чертица, е необходимо да се използва <nowiki>|</nowiki> или &#124;.


Дизайн на таблицата

[редактиране на кода]

Най-простият случай

[редактиране на кода]

Следните два блока от уики-код извеждат на екран една и съща таблица. Изборът на форматиране:

  • на един ред с по две вертикални чертици за разделите на клетките, или
  • на отделни редове с по една вертикална чертица за разделител

се прави в зависимост от броя клетки на ред, количеството съдържание във всяка клетка и необходимостта за допълнително форматиране на клетките.

Уики-код в режим на редактиране

{|
| А
| Б
|-
| В
| Г
|}
{|
| А || Б
|-
| В || Г
|}

В браузъра в режим на четене

А Б
В Г
Caption text
Текст на заглавието Текст на заглавието Текст на заглавието Текст на заглавието Текст на заглавието Текст на заглавието Текст на заглавието Текст на заглавието
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример
Пример Пример Пример Пример Пример Пример Пример Пример

Таблица за умножение

[редактиране на кода]

Уики-код в режим на редактиране

{| class="wikitable" style="text-align:center"
|+Таблица за умножение
|-
! &times; !! 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

Цвят; обхват на параметрите

[редактиране на кода]

Има два начина за указване на цвета на текста и фона в дадена единична клетка. За предпочитане е първият вариант.

Уики-код в режим на редактиране

{|
| style="background:red; color:white" | абв
| где
| bgcolor="red" | <span style="color: white;"> жзи </span>
| йкл
|}

В браузъра в режим на четене

абв где жзи йкл

Както всички други параметри, така и цветовете могат да бъдат дефинирани за цял табличен ред или цяла таблица. В същото време важи принципът, че локалната дефиниция е по-силна от глобалната, и така параметрите на клетката предефинират параметрите на реда, а параметрите на реда предефинират параметрите на таблицата.

Уики-код в режим на редактиране

{| style="background:yellow; color:green"
|-
| абв || где || жзи
|- style="background:red; color:white"
| йкл || мно || прс
|-
| туф || style="background:silver" | хцч || шщъ
|}

В браузъра в режим на четене

абв где жзи
йкл мно прс
туф хцч шщъ

За да направите така, че цветът на таблицата да приеме цвета на фона, използвайте style="background:none". (Внимание: style="background:inherit" не работи на някои браузъри, включително Internet Explorer 6!)

Ширина и височина на таблицата

[редактиране на кода]

Ширината и височината на цялата таблица могат да бъдат определени, също както и височината на даден ред. За да се зададе ширина на колона, трябва да се укаже ширината на произволна клетка от тази колона. Ако не за всички колони е указана ширина и/или не за всички редове е указана височина, тогава те се определят евристично и резултатът зависи от използвания браузър.

Стойностите след параметрите width: и height: могат да бъдат в проценти (%), пиксели (px) и пунктове (pt).

Уики-код в режим на редактиране

{| style="width:75%; height:200px" border="1"
|-
| абв || где || жзи
|- style="height:100px"
| йкл || style="width:200px" | мно || прс
|-
| туф || хцч || шщъ
|}

В браузъра в режим на четене

абв где жзи
йкл мно прс
туф хцч шщъ

Трябва да се отбележи, че style="inline CSS" не работи над някои браузъри. Ако съвместимостта е от значение, по-старите конструкции като width="75%" би трябвало да работят при повече браузъри.

Ширина на колоната
Ако желаете изрично да дефинирате ширината на колона, вместо да оставяте това на най-широкия текстов елемент от колоната, следващият пример показва как да се направи това:
{| border="1" cellpadding="2"
! width="50" | Колона 1
! width="225" | Колона 2
! width="225" | Колона 3
|-
| Lorem ipsum. || Pellentesque tempus purus ac justo. || Nullam tincidunt.
|-
| Fusce at justo. || Morbi egestas cursus nunc. || Quisque at nulla.
|}
Колона 1 Колона 2 Колона 3
Lorem ipsum. Pellentesque tempus purus ac justo. Nullam tincidunt.
Fusce at justo. Morbi egestas cursus nunc. Quisque at nulla.

Ако в таблицата няма заглавни клетки, ширините на колоните могат да се дефинират в първите клетки от всяка колона, както е показано в примера:

{| border="1" cellpadding="2"
| width="100pt" | Тази колона е широка 100 пункта
| width="200pt" | Тази колона е широка 200 пункта
| width="300pt" | Тази колона е широка 300 пункта
|-
| 100 || 200 || 300
|}
Тази колона е широка 100 пункта Тази колона е широка 200 пункта Тази колона е широка 300 пункта
100 200 300

Вертикално подравняване

[редактиране на кода]

По подразбиране, данните в таблиците са вертикално центрирани, което на екран може да изглежда странно, като в следващия пример:

Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus purus ac justo. Fusce at justo. Quisque sit amet diam. Curabitur orci elit, luctus nec, fermentum vitae, bibendum ut, velit. Nullam tincidunt. Donec sodales sodales mauris. Maecenas nec libero non est suscipit mattis. Donec vehicula, erat quis egestas aliquet, mi augue fermentum justo, vel cursus ante tortor ut sem. Proin dignissim, pede ac vestibulum varius, risus metus rutrum lacus, sed euismod risus turpis et magna. Morbi egestas cursus nunc.
Lorem ipsum Phasellus at magna nec urna porttitor mattis. Nullam purus orci, iaculis ut, pretium vel, molestie quis, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at nulla. Cras euismod euismod enim. Vestibulum interdum metus sit amet diam. Sed tincidunt elit vel ante.

Тази настройка може да се промени с атрибута valign="top", който за съжаление е необходимо да се прилага поотделно над всеки отделен ред от таблицата. Например:

{| border="1" cellpadding="2"
|-valign="top"
|width="20%"|'''[[Lorem ipsum]]'''
|width="60%"|Lorem ipsum dolor sit amet,...
|width="20%"|Morbi egestas cursus nunc.
|-valign="top"
|'''Lorem ipsum'''
|Phasellus at magna nec urna,...
|Sed tincidunt elit vel ante.
|}

Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus purus ac justo. Fusce at justo. Quisque sit amet diam. Curabitur orci elit, luctus nec, fermentum vitae, bibendum ut, velit. Nullam tincidunt. Donec sodales sodales mauris. Maecenas nec libero non est suscipit mattis. Donec vehicula, erat quis egestas aliquet, mi augue fermentum justo, vel cursus ante tortor ut sem. Proin dignissim, pede ac vestibulum varius, risus metus rutrum lacus, sed euismod risus turpis et magna. Morbi egestas cursus nunc.
Lorem ipsum Phasellus at magna nec urna porttitor mattis. Nullam purus orci, iaculis ut, pretium vel, molestie quis, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at nulla. Cras euismod euismod enim. Vestibulum interdum metus sit amet diam. Sed tincidunt elit vel ante.

Ето един по-сложен пример, демонстриращ повече вариации в дизайна на таблиците. Можете да си поиграете в Пясъчника, за да видите промените на кои атрибути до какви промени в дизайна водят. Не всички от тези техники са подходящи за всички случаи: само защото можете да зададете шарен фон на таблицата не означава, че всеки път това е сполучлива идея. Опитвайте се да поддържате кода на таблицата колкото се може по-прост и разбираем и не забравяйте, че след вас и други хора ще редактират по статията.

Примерът, който следва, показва какви възможности имате на разположение, а не как трябва да си форматирате таблиците всеки път.

Уики-код в режим на редактиране

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Примерна таблица'''
|-
! style="background:#efefef;" | Първа заглавна клетка
! colspan="2" style="background:#ffdead;" | Втора заглавна клетка
|-
| горе ляво
| &nbsp;
| 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" | 
| align="center" width="150px" | 
|-
| 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;" |
Две лога на Уикипедия
|}
|}

В браузъра в режим на четене

Примерна таблица
Първа заглавна клетка Втора заглавна клетка
горе ляво  

дясно

долу ляво долу в средата
Таблица в таблицата

Две лога на Уикипедия

Плаваща таблица

[редактиране на кода]

Уики-код в режим на редактиране

Този абзац предшества таблицата. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...

{| align="right" border="1"
| колона 1, ред 1
|rowspan="2"| колона 2, ред 1 (и 2)
| колона 3, ред 1
|-
| колона 1, ред 2
| колона 3, ред 2
|}

Забележете плаващата таблица вдясно.

Този абзац се намира след таблицата. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...

В браузъра в режим на четене

Този абзац предшества таблицата. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

колона 1, ред 1 колона 2, ред 1 (и 2) колона 3, ред 1
колона 1, ред 2 колона 3, ред 2

Забележете плаващата таблица вдясно.

Този абзац се намира след таблицата. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...


Вмъкната таблица

[редактиране на кода]

На примера е показана как една таблица (в синьо) може да се вложи в клетка от друга таблица. Вложените таблици трябва да започват на нов ред!

Уики-код в режим на редактиране

{| border="1"
| Клетка 1
| align="center" | Клетка 2
{| border="3" style="background-color:#abcdef;"
| ВЛОЖЕНА
|-
| ТАБЛИЦА
|}
| Клетка 3
|}

В браузъра в режим на четене

Клетка 1 Клетка 2
ВЛОЖЕНА
ТАБЛИЦА
Клетка 3

Комбинирана употреба на colspan и rowspan

[редактиране на кода]

Уики-код в режим на редактиране

{| border="1" cellpadding="5" cellspacing="0"
|-
! Column 1 || Column 2 || Column 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by Клетка А -->
| D
|-
| E
| rowspan="2" colspan="2" align="center"| F
|-
| G <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" align="center"| H
|}

В браузъра в режим на четене

Column 1 Column 2 Column 3
A B
C D
E F
G
H

Центриране на таблица

[редактиране на кода]

Може да се постигне центриране на таблица на екрана, без тя да „плава“; т.е. без да бъде обтечена с текст от двете страни. За целта се използва {| class="centered"

Уики-код в режим на редактиране

{| class="wikitable centered"
|+ '''Клетките са подравнени вляво, таблицата е центрирана'''
! Lorem ipsum dolor sit amet, || consectetuer || adipiscing elit.
|-
| Pellentesque || tempus purus || ac justo.
|-
| Fusce || at || justo.
|}

В браузъра в режим на четене

Клетките са подравнени вляво, таблицата е центрирана
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque tempus purus ac justo.
Fusce at justo.

Добавяне на параметри в клетките

[редактиране на кода]

Добавяйте параметри в началото на всяка клетка, последвани от единична вертикална чертица. Например width="300" | ще настрои ширината на клетката на 300 пиксела. Ако добавяте повече от един параметър, оставяйте празно място помежду им.

Уики-код в режим на редактиране

{| style="color:white"
|-
| bgcolor="red" | Клетка 1 || width="300" bgcolor="blue" | Клетка 2
| bgcolor="green" | Клетка 3
|}

В браузъра в режим на четене

Клетка 1 Клетка 2 Клетка 3

Подравняване по десетична запетая

[редактиране на кода]

А ето как можете да получите колони от числа, подравнени по десетичната запетая:

Уики-код в режим на редактиране

{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}

В браузъра в режим на четене

432 .1
43 .21
4 .321

Ако колоната от числа се появява в таблицата с параметри padding (уплътнение) или spacing (разстояние), пак е възможно да се направи подравняване по десетичните запетаи без грозна дупка по средата. За целта, вградете таблица във всяка клетка с десетично число и укажете равни ширини на колоните на вмъкнатата таблица за всяка клетка от колоната в основната таблица. (Ако и при този метод десетичните запетаи продължават да не са на една линия, значи може би ширината на колоната в основната таблица е недостатъчна. Добавете параметър, за да увеличите ширината на колоната, в случая width="150px".)

Уики-код в режим на редактиране

{|border="1" cellpadding="4" cellspacing="2" width="150px"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}

В браузъра в режим на четене

432 .1
43 .21
4 .321

В прости случаи можете да минете и без таблици, като просто започнете с отстъпи с интервали, като така цифрите ще се форматират в равноширок шрифт.

432.1
 43.21
  4.321

Дясно подравнени таблици с числа

[редактиране на кода]

Когато една таблица съдържа само числови стойности, може да се ползва класа wikitable-with-numbers. Така всички колони автоматично се подравняват вдясно.

{| class="wikitable wikitable-with-numbers"
! колона 1 || колона 2 || колона 3
|-
| 1000 || 100 || 1,60
|-
| 100 || 1000 || 100,60
|-
| 10 || 1 || 10,60
|}
колона 1 колона 2 колона 3
1000 100 1,60
100 1000 100,60
10 1 10,60

Полускриваеми таблици

[редактиране на кода]

При таблици с много редове може да се въведе скриване на редовете, като само няколко реда в началото останат видими. Това става чрез класа semicollapsible. По подразбиране броя на редовете, които остават видими, е 3. Този брой може да се настрои чрез атрибута data-visible-rows на таблицата.

{| class="wikitable wikitable-with-numbers semicollapsible" data-visible-rows="2"
! колона 1 || колона 2 || колона 3
|-
| 1 || 10 || 1
|-
| 2 || 20 || 2
|-
| 30 || 300 || 30
|-
| 400 || 400 || 40
|-
| 5000 || 500 || 500
|-
| 6000 || 600 || 600
|}
колона 1 колона 2 колона 3
1 10 1
2 20 2
30 300 30
400 400 40
5000 500 500
6000 600 600

Стилови класове

[редактиране на кода]

Някои потребители са създали CSS класове и шаблони, за улеснение на стиловете на таблиците. Вместо да помните параметри на таблицата, просто добавете подходящ стилов клас след {|. Това спомага за прегледното форматиране на таблицата и позволява една-единствена промяна в класа да реши даден проблем или да подобри външния вид на всички таблици, които го ползват. Например:

{| 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
|}
 
Таблица за умножение
× 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"
|+Таблица за умножение
|-
! &times; !! 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

с проста замяна на вградения в таблицата код на CSS с class="wikitable". Така е, защото класът wikitable в MediaWiki:Common.css съдържа известен брой стилови правила, които се изпълняват накуп, когато класът се приложи над таблицата. В този случай могат по желание да се добавят допълнителни правила. Те ще предефинират правилата на класа, като така ще имате възможност да използвате стиловия клас за основа, над която да настроявате форматирането си:

Уики-код в режим на редактиране

{| class="wikitable" style="font-style:italic; font-size:120%; border:3px dashed red;"
|+Таблица за умножение
|-
! &times; !! 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

Забележете, че таблицата си запазва сивия фон от класа wikitable и заглавните клетки си остават в получер шрифт и центрирани. Чрез локалното заявление style е предефинирано форматирането на текста: целият текст в таблицата вече е в курсив и на 120% от нормалния кегел, а също така контурът на таблицата е заменен с червен пунктир.

Подробно обяснение за сортирането на таблици в Уикипедия има на страницата Help:Sorting в Мета.

Таблиците могат да се правят сортируеми посредством класа sortable при налична поддръжка на Джаваскрипт. Тази функционалност е налична при МедияУики версия 1.9 и по-висока, под която работят всички проекти на Уикимедия.

Сортируемите таблици се различават от обикновените по стрелкичките във всяка от заглавните клетки. Щракването на стрелкичка сортира възходящо редовете от таблицата по отношение на съответната колона. Второ щракване на същата стрелкичка сменя сортировката в низходящ ред. В заглавните клетки не трябва да присъстват уики-препратки и друго уики-форматиране.

Уики-код в режим на редактиране

{| class="wikitable sortable" style="text-align:center"
! Град !! Население
|-
| София || 1 254 413
|-
| Варна || 348 443
|-
| Бургас || 203 864
|-
| Пловдив || 376 487
|}

В браузъра в режим на четене

Град Население
София 1 254 413
Варна 348 443
Бургас 203 864
Пловдив 376 487

Други варианти на синтаксис на таблици

[редактиране на кода]

Други типове табличен синтаксис, които МедияУики поддържа, са:

  1. XHTML
  2. остарял HTML (Не се препоръчва)

И трите се поддържат от софтуера и създават (понастоящем) валиден код на HTML, но синтаксисът с вертикалните чертици е най-простият, специално за хора, които вече имат познания по HTML.

Трябва да се отбележи обаче, че елементите thead, tbody, tfoot, colgroup, и col понастоящем не се поддържат от МедияУики.

Сравняване на различните варианти на синтаксис

[редактиране на кода]
 XHTML Остарял HTML Чист уики синтаксис
Таблица <table></table> <table></table>
{|
|}
Заглавие <caption>Заглавие</caption> <caption>Заглавие</caption>
|+ Заглавие
Ред <tr></tr> <tr>
|-
Клетка

<td>Клетка 1</td>
<td>Клетка 2</td>

<td>Клетка 1
<td>Клетка 2

| Клетка 1
| Клетка 2
Клетка <td>Клетка 1</td> <td>Клетка 2</td> <td>Клетка 3</td> <td>Клетка 1 <td>Клетка 2 <td>Клетка 3
| Клетка 1 || Клетка 2 || Клетка 3 
Заглавна клетка <th>Заглавна клетка</th> <th>Заглавна клетка
! Заглавна клетка
Примерна таблица
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
  • Зле форматиран и без затварящи етикети
  • Изглеждащ странно като цяло
  • Непознат синтаксис, не се разбира лесно от хора без опит с HTML
  • Не позволява отстъпи за по-добро форматиране
 XHTML Остарял HTML Чист уики синтаксис

Уики-синтаксис за таблици в термините на HTML

[редактиране на кода]

Уики-синтаксисът за таблици, разработен от Магнус Манске, замества кода на HTML с отвесни чертици (|).

Отвесните чертици трябва да започват в началото на нов ред, освен когато разделят параметри от съдържание на клетка или когато се използват сдвоени, ||, служейки като разделители на клетки, чието съдържание е въведено на един ред. Параметрите са незадължителни.

Таблица се дефинира чрез:

 {| ''params''
 |}

което е еквивалентно на:

 <table ''params''>Insert non-formatted text here
 </table>
Внимание: Трябва да включите шпацията между {| и params, в противен случай първия параметър ще бъде игнориран.

Етикетите <tr> ще се генерират автоматично за първия ред. За да започнете нов ред, използвайте

|-

което дава:

<tr>

Параметри могат да се добавят по следния начин:

|- params

което дава:

<tr params>

Забележка:

  • Етикетите <tr> автоматично се затварят при срещане на <tr> или </table>.

Клетки се създават така:

|cell1
|cell2
|cell3

или така:

|cell1 || cell2 || cell3

като двата начина са еквивалентни на:

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

следователно „||“ е равносилно на „нов ред“ + „|“

Параметри в клетките се използват по следния начин:

| params | cell1 || params | cell2 || params | cell3

което дава като резултат:

<td params>cell1</td>
<td params>cell2</td>
<td params>cell3</td>

Заглавни клетки

[редактиране на кода]

Функционират по същия начин като <td>, освен „!“, което се използва вместо отварящия знак „|“. Комбинацията „!!“ може да се използва вместо „||“ като разделител на клетки, записани на един ред. Параметрите обаче продължават да използват „|“. Например:

! params | cell1

Заглавие на таблицата

[редактиране на кода]

Заглавие на таблица се прави с:

|+ Заглавие

което генерира:

<caption>Заглавие</caption>

Можете да използвате и параметрите:

|+ params | Заглавие

което генерира:

<caption params>Заглавие</caption>