FANDOM


Зауважте, що використання розмітки HTML не є ані необхідним, ані бажаним.

Конвеєрний синтаксис (Вікірозмітка) Редагувати

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

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

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

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

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

Простий приклад Редагувати

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

створить

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

Табличні рамки Редагувати

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

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


Простий приклад Редагувати

Шаблон:Col-begin Шаблон:Col-break

Вихідний код Редагувати

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

Шаблон:Col-break

Як він виглядає Редагувати

Таблиця множення
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Шаблон:Col-end

Приклад з границями Редагувати

Шаблон:Col-begin Шаблон:Col-break

Вихідний код Редагувати

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

Шаблон:Col-break

Як він виглядає Редагувати

Таблиця множення
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Шаблон:Col-end

Приклад із класом Редагувати

Шаблон:Col-begin Шаблон:Col-break

Вихідний код Редагувати

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

Шаблон:Col-break

Як він виглядає Редагувати

Таблиця множення
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Шаблон:Col-end

Використання кольору Редагувати

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

Кольоровий текст Редагувати

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

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

де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так: Шаблон:Col-begin Шаблон:Col-break

Вихідний код Редагувати

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

Шаблон:Col-break

Як він виглядаєРедагувати

Клітинка 1*1 Кольорове одне слово. Клітинка 3*1
Клітинка 1*2 Клітинка 2*2
Кольоровий весь рядок.
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Шаблон:Col-end

Колір клітинки Редагувати

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

Пишеться Редагувати

Шаблон:Col-begin Шаблон:Col-break

{| border=1
 |Клітинка 1*1
 |bgcolor=#FFCC00|Клітинка 2*1
 |Клітинка 3*1
 |-
 |Клітинка 1*2
 |Клітинка 2*2
 |Клітинка 3*2
 |-
 |bgcolor=#CCFF00|Клітинка 1*3
 |Клітинка 2*3
 |Клітинка 3*3
 |}

Шаблон:Col-break

Як він виглядаєРедагувати

Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Шаблон:Col-end

Фоновий колір таблиці Редагувати

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

Пишеться Редагувати

Шаблон:Col-begin Шаблон:Col-break

{| border=1 bgcolor=#66FFFF
 |Клітинка 1*1
 |Клітинка 2*1
 |Клітинка 3*1
 |-
 |Клітинка 1*2
 |Клітинка 2*2
 |Клітинка 3*2
 |-
 |Клітинка 1*3
 |Клітинка 2*3
 |Клітинка 3*3
 |}

Шаблон:Col-break

Як він виглядає Редагувати

Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Шаблон:Col-end

Класи оформлення клітинок Редагувати

заголовок звичайна клітинка
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: колір;" (см. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.

Об'єднання клітин Редагувати

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


В кількох рядках – параметр rowspan Редагувати

Шаблон:Col-begin Шаблон:Col-break

{| class="wikitable"
| стовпець 1, рядок 1
| rowspan=2 | стовпець 2, рядок 1 (а також 2)
| стовпець 3, рядок 1
|-
| стовпець 1, рядок 2
| стовпець 3, рядок 2
|}

Шаблон:Col-break

стовпець 1, рядок 1 стовпець 2, рядок 1 (а також 2) стовпець 3, рядок 1
стовпець 1, рядок 2 стовпець 3, рядок 2

Шаблон:Col-end rowspan спричиняє розтягнення клітинки на кілька рядків

В кількох стовпцях – параметр colspan Редагувати

Шаблон:Col-begin Шаблон:Col-break

{| class="wikitable"
| стовпець 1, рядок 1
| colspan=2 | стовпець 2 (i 3), рядок 1
|-
| стовпець 1, рядок 2
| стовпець 2, рядок 2
| стовпець 3, рядок 2
|}

Шаблон:Col-break

стовпець 1, рядок 1 стовпець 2 (i 3), рядок 1
стовпець 1, рядок 2 стовпець 2, рядок 2 стовпець 3, рядок 2

Шаблон:Col-end 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

Шаблон:Col-end

Вкладені таблиці Редагувати

Шаблон:Col-begin Шаблон:Col-break

{| border=1
| клітина 1 зовнішньої таблиці
|
{| border=1 style="background:ABCDEF"
| таблиця
|-
| вкладена
|}
| клітина 3 зовнішньої таблиці
|}

Шаблон:Col-break ...додавання вкладеної таблиці в другій клітині зовнішньої таблиці

клітина 1 зовнішньої таблиці
таблиця
вкладена
клітина 3 зовнішньої таблиці

Шаблон:Col-end


Кілька таблиць поруч Редагувати

Нерідко з'являється питання – як поставити таблицю поруч, а не під іншою. Для цього можна ужити батьківську таблицю в якості каркасу, але це може спричинити проблеми для користувачів, які мають малу роздільність екрану. Ліпше скористатися елементом <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. "We Got The Party" Greg Wells, Kara DioGuardi 3:37
Трек Назва
1. "Life's What You Make It" (live)
Трек Назва Автор Час
1. "See You Again" Miley Cyrus, Armato, James 3:10

Таблиці зі сталою шириною зроблені за допомогою змінної width

Трек Назва Автор Час
1. "We Got The Party" Greg Wells, Kara DioGuardi 3:37
Трек Назва
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
|}

Сортування дат в таблицях Редагувати

Шаблон:Seealso В принципі, дата в таблицях сортуються правильно тільки тоді, коли наводяться в цифровому форматі рік-місяць-день, який не завжди використовується. Для цього створено шаблон Шаблон:S, який дозволяє правильно сортувати дати. Прикладом є такий код...

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

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

Головний стовпець Сортування дат Сортування чисел
Позиція 1 Шаблон:Dts 245
Позиція 2 Шаблон:Dts 127
Позиція 3 Шаблон:Dts 21

Сортування прізвищ у таблицях Редагувати

Шаблон:Seealso Проблеми можуть виникнути при сортуванні персоналій за прізвищем у випадку, коли статті Вікіпедії іменуються в форматі "ім'я прізвище". Для того, щоб правильно вказати ключ сортування, використовується шаблон імен Шаблон:S, що розв'яує цю проблему. Приклади...

{| class="wikitable sortable"
! Ім'я
! Професія
! Рік
|-
|{{sortname|Greg|Walden}}
|політик
|1991
|-
|{{sortname|Wes|Cooley}}
|діяч
|1996
|-
|{{sortname|Smith|Dennis|Denny Smith}}
|активіст
|1994
|-
|{{sortname|Pete|Sampras|nolink=tak}}
|спортсмен
|1993
|}

...дає таблиця, де персоналії можуть бути розсортовані за прізвищем:

Ім'я Професія Рік
Шаблон:Sortname політик 1991
Шаблон:Sortname діяч 1996
Шаблон:Sortname активіст 1994
Шаблон:Sortname спортсмен 1993

Генеалогічна таблиця Редагувати

Шаблон:Seealso Шаблон:Розширити розділ

Сортування таблиць, що містять малюнки Редагувати

Шаблон Шаблон:S дозволяє надати клітинці невидимий ключ сортування. Наприклад, це може бути корисно, коли стовпець містить малюнки. Застосування в польській вікіпедії: 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;" |
Два лого Вікіпедії
|}
|}

Як виглядає Редагувати

Приклад таблиці
Перший заголовок Другий заголовок
(зліва) зверху посередині
як вертикально,
так і горизонтально
справа,
а вертикально
посередині
внизу (зліва) внизу
посередині
Таблиця в таблиці
Файл:Wikipedia-logo-uk-300k.png Файл:Wikipedia-logo-uk-300k.png

Два лого Вікіпедії

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

Інші підтримувані типи табличного синтаксису що підтримуються 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
Файл:Gelderland-Position.png

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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 Шаблон:Clr

Вирівнювання по десятковій комі Редагувати

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

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

дає

432 . 1
43 . 21
4 . 321

Шаблони стилю Редагувати

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

Посилання Редагувати

Виноски Редагувати


Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.