Просмотр исходного текста страницы Справка:Таблицы

{{PD Help Page/ru}}

На страницах вики можно использовать таблицы, созданные как с помощью табличных тэгов HTML, так и используя специальную вики-разметку. Использование html-тэгов описано в сети достаточно подробно и здесь обсуждаться не будет. Преимущества вики-разметки состоит в том, что таблица обозначается символами, и при редактировании представить себе структуру таблицы удобнее, чем при использовании тэгов.
<!--
Tables may be authored in wiki pages using either HTML table elements directly, or using wikicode formatting to define the table. HTML table elements and their use are well described on various web pages and will not be discussed here. The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to HTML table elements.-->

Добрый совет — не используйте таблицы, если без них можно обойтись. Табличная разметка часто усложняет редактирование страницы.
<!--A good general rule of thumb is to avoid using a table unless you need to. Table markup often complicates page editing.-->

== Вики-разметка таблиц ==

{|cellpadding="5" cellspacing="0" border="1" width="600"
|<nowiki>{|</nowiki> || начало '''таблицы'''
|-
|<nowiki>|+</nowiki> || '''заголовок таблицы''', ''необязательно;'' только один на таблицу, между началом таблицы и первой строкой
|-
|<nowiki>|-</nowiki> || '''строка таблицы''', ''в первой строке необязательно'' -- движок вики сам подставит первую строку
|-
|<nowiki>!</nowiki>  || '''заглавная ячейка''', ''необязательно.'' Последовательность заглавных ячеек можно записывать на одной строке, с двойными разделителями (!!) или начинать с новой строки, каждую со своим знаком (!).
|- 
|<nowiki>|</nowiki>  || '''ячейка данных''', ''требуется!'' Последовательность заглавных ячеек можно записывать на одной строке, с двойными разделителями (<nowiki>||</nowiki>) или начинать с новой строки, каждую со своим знаком (<nowiki>|</nowiki>).
|-
|<nowiki>|}</nowiki> || конец '''таблицы'''
|}
*Вышеприведенные знаки должны начинаться с новой строки, кроме двойных || и !! для последовательности ячеек.
*'''Атрибуты XHTML.''' Каждый знак разметки, кроме конца таблицы, может иметь при себе один или несколько атрибутов XHTML.
**У ячеек и заголовка (<nowiki>| или ||, ! или !!, и |+</nowiki>) есть содержимое. Содержимое от атрибутов тэга отделяется вертикальной чертой (|). Содержимое может располагаться в той же строке или в следующих строках.
**У меток таблицы и строки таблицы (<nowiki>{| и |-</nowiki>) нет содержимого. ''Не'' ставьте вертикальную черту (|) после их необязательных атрибутов! Если вы по ошибке поставите черту после атрибутов таблицы или строки, парсер удалит её ''и'' последний атрибут, если он был рядом с ошибочной чертой.
*'''Содержимое''' может располагаться а) за знаком ячейки в той же строке после необязательных XHTML атрибутов или б) на строках под знаком ячейки.  Содержимое, использующее вики-разметку, которая должна сама начинаться с новой строки, например, списки, заголовки или вложенные таблицы, разумеется, должно начинаться с новой строки.
<!--*The above marks must '''start on a new line''' except the double || and !! for optionally adding consecutive cells to a line.
*'''XHTML attributes.''' Each mark, except table end, optionally accepts one or more XHTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space. 
**Cells and caption (<nowiki>| or ||, ! or !!, and |+</nowiki>) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
**Table and row marks (<nowiki>{| and |-</nowiki>) do not directly hold content. Do ''not'' add pipe (|) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it ''and'' your final attribute if it was touching the erroneous pipe!
*'''Content''' may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headers, or nested tables, must of course be on its own new line.-->

==Простая таблица==

===Обычная===
В нижеприведенной таблице нет границ и правильной разбивки, она демонстрирует простейшую табличную структуру с вики-разметкой.
<!--The following table lacks borders and good spacing but shows the simplest wiki markup table structure-->
{| width="100%"
|width="50%"|
{|
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое
|}
|width="50%"|
<pre>
{|
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое
|}
</pre>
|}

===Альтернатива===
Для более табличного вида ячейки можно записывать в одну строчку, разделяя их ||. Это не будет хорошо смотреться в случае большого содержимого, например, целых абзацев. Однако, это хорошо подходит для небольших данных, как в таблице из примера.
<!--
For more table-ish looking wiki markup cells can be listed on one line separated by ||. This does not scale well for longer cell content such as paragraphs. It works well for short bits of content however, such as our example table.-->

Внутри вики-разметки можно ставить дополнительные пробелы, как в примере ниже, чтобы сама разметка смотрелась лучше, но на вид таблицы-результата это не повлияет.
<!--Extra spaces within cells in the wiki markup can be added, as I have done in the wiki markup below, to make the wiki markup itself look better but they do not affect the actual table rendering.-->

В эту таблицу можно было бы добавить HTML атрибуты, но для простоты обойдёмся без них.
<!--HTML attributes can be added to tables on this page but have been left out of the following example for simplicity.-->
{| width="100%"
|width="50%"|
{|
|  Апельсин  ||  Яблоко   ||   и т.д.
|-
|    Хлеб    ||   Булка   ||   и т.д.
|-
|    Масло   || Мороженое ||   и т.д.
|}
|width="50%"|
<pre>
{|
|  Апельсин  ||   Яблоко  ||   и т.д.
|-
|    Хлеб    ||    Булка  ||   и т.д.
|-
|    Масло   || Мороженое ||   и т.д.
|}
</pre>
|}

===С HTML атрибутами===
Вы можете добавить HTML атрибуты, чтобы таблица смотрелась лучше
====border="1"====
{| width="100%"
|width="50%"|
{| border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

====align="center" border="1"====
{| width="100%"
|width="50%"|
{| align="center" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| align="center" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

====align="right" border="1"====
Вы можете указывать атрибуты для отдельных '''ячеек'''. Например, числа лучше выравнивать вправо.
<!--You can put attributes on individual '''cells.''' Numbers for example may look better aligned right-->
{| width="100%"
|width="50%"|
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|-
|Масло
|Мороженое
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|-
|Масло
|Мороженое
|align="right"|1.00
|}
</pre>
|}

Можно использовать атрибуты в отдельных '''строках'''.
<!--You can put attributes on individual '''rows,''' too.-->
{| width="100%"
|width="50%"|
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Масло
|Мороженое
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Масло
|Мороженое
|align="right"|1.00
|}
</pre>
|}

====cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

====cellpadding="20" cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

===С HTML атрибутами и стилями CSS===
Стили CSS можно использовать вместе с другими HTML атрибутами или отдельно.
====style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

==Таблица с заголовками TH==

Для создания TH (заглавной ячейки таблицы в HTML) используйте ! вместо |. Заглавная ячейка обычно выделяется жирным и центрирована по умолчанию.
<!--TH (HTML table headings) can be created by using ! instead of |. Headings usually show up bold and centered by default.-->

===Заголовки столбцов===
====В каждом столбце====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!Вкусно
!Вкуснее
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!Вкусно
!Вкуснее
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}
====Colspan="2"====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!colspan="2"|Вкусные
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Вкусные
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

===Заголовки строк===
====По умолчанию====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!Фрукт
|Апельсин
|Яблоко
|-
!Еда
|Хлеб
|Булка
|-
!Добавка
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!Фрукт
|Апельсин
|Яблоко
|-
!Еда
|Хлеб
|Булка
|-
!Добавка
|Масло
|Мороженое 
|}
</pre>
|}

====Выравнивание вправо====
Заголовки строк, выровненные вправо, можно сделать так:
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Фрукт
|Апельсин
|Яблоко
|-
!align="right" |Еда
|Хлеб
|Булка
|-
!align="right" |Добавка
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Фрукт
|Апельсин
|Яблоко
|-
!align="right" |Еда
|Хлеб
|Булка
|-
!align="right" |Добавка
|Масло
|Мороженое 
|}
</pre>
|}

==Заглавие таблицы==
'''Заглавие''' наверху таблицы можно добавить так:
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+Продукты
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+Продукты
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

В заглавие тоже можно добавить '''атрибуты'''.

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Продукты''
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Продукты''
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

==Заголовки H1, H2, H3 и т.д.==
HTML-заголовки H1, H2, H3, H4 и т.д. могут быть созданы с помощью обычной вики-разметки со знаками ==равенства== и '''должны быть целиком в одну строку'''.
<!--HTML H1, H2, H3, H4 etc. headings can be created the standard wiki markup way with ==equal== signs and '''must be on a line all by themselves''' to work.-->

'''Предпросмотре всей таблицы.''' Если вы нажмёте на кнопку правки ''внутри'' таблицы, и в режиме редактирования выберите предпросмотр, таблица отобразится неправильно, так как часть её отсутствует.
<!--'''Preview the whole table.''' If you click on an edit tab for a heading ''within'' a table, edit, and preview, the parent table will display erroneously broken because part of it will be missing.-->

Следите за совместимостью иерархии заголовков с остальной частью страницы, чтобы оглавление наверху страницы отображалось правильно.
<!--Keep the heading hierarchy consistent with the rest of the page so that the table of contents at page top works correctly.-->

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Вкуснейшие===
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
|width="50%"|
<pre>
{| border="3"  cellpadding="20" cellspacing="0"
|colspan="2"|
===Вкуснейшие===
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}
</pre>
|}

==Предупреждение==
===Отрицательные числа===

Отрицательные числа или знак минус (обозначающий отсутствие какого-то значения) может нарушить таблицу, если ячейка начинается с новой строки (|-6), потому что это воспринимается вики как начало новой строки в таблице, а не новой ячейки. Чтобы избежать такой проблемы, ставьте пробел перед минусом (| -6) или воспользуйтесь внутристроковой разметкой (||-6).
<!--Negative value minus sign can break your table (it may display missing some values) if you start a cell on a new line with a negative number or a parameter that evaluates to a negative number (|-6) because that is the wiki markup for table row, not table cell. To avoid this, insert a space before the value (| -6) or use in-line cell markup (||-6).-->

{{Languages|Help:Tables}}
[[Category:Справка|Tables]]