Справка:Таблицы

Версия от 00:12, 15 июля 2009; VitaliyFilippov (обсуждение | вклад) Справка:Tables/ru» переименована в «Справка:Таблицы»)

Шаблон:PD Help Page/ru

На страницах вики можно использовать таблицы, созданные как с помощью табличных тэгов HTML, так и используя специальную вики-разметку. Использование html-тэгов описано в сети достаточно подробно и здесь обсуждаться не будет. Преимущества вики-разметки состоит в том, что таблица обозначается символами, и при редактировании представить себе структуру таблицы удобнее, чем при использовании тэгов.

Добрый совет — не используйте таблицы, если без них можно обойтись. Табличная разметка часто усложняет редактирование страницы.

Do you want to try some new features? By joining the beta, you will get access to experimental features, at the risk of encountering bugs and issues.

Ок Нет, спасибо

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

{| начало таблицы
|+ заголовок таблицы, необязательно; только один на таблицу, между началом таблицы и первой строкой
|- строка таблицы, в первой строке необязательно -- движок вики сам подставит первую строку
! заглавная ячейка, необязательно. Последовательность заглавных ячеек можно записывать на одной строке, с двойными разделителями (!!) или начинать с новой строки, каждую со своим знаком (!).
| ячейка данных, требуется! Последовательность заглавных ячеек можно записывать на одной строке, с двойными разделителями (||) или начинать с новой строки, каждую со своим знаком (|).
|} конец таблицы
  • Вышеприведенные знаки должны начинаться с новой строки, кроме двойных || и !! для последовательности ячеек.
  • Атрибуты XHTML. Каждый знак разметки, кроме конца таблицы, может иметь при себе один или несколько атрибутов XHTML.
    • У ячеек и заголовка (| или ||, ! или !!, и |+) есть содержимое. Содержимое от атрибутов тэга отделяется вертикальной чертой (|). Содержимое может располагаться в той же строке или в следующих строках.
    • У меток таблицы и строки таблицы ({| и |-) нет содержимого. Не ставьте вертикальную черту (|) после их необязательных атрибутов! Если вы по ошибке поставите черту после атрибутов таблицы или строки, парсер удалит её и последний атрибут, если он был рядом с ошибочной чертой.
  • Содержимое может располагаться а) за знаком ячейки в той же строке после необязательных XHTML атрибутов или б) на строках под знаком ячейки. Содержимое, использующее вики-разметку, которая должна сама начинаться с новой строки, например, списки, заголовки или вложенные таблицы, разумеется, должно начинаться с новой строки.

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

Обычная

В нижеприведенной таблице нет границ и правильной разбивки, она демонстрирует простейшую табличную структуру с вики-разметкой.

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{|
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое
|}

Альтернатива

Для более табличного вида ячейки можно записывать в одну строчку, разделяя их ||. Это не будет хорошо смотреться в случае большого содержимого, например, целых абзацев. Однако, это хорошо подходит для небольших данных, как в таблице из примера.

Внутри вики-разметки можно ставить дополнительные пробелы, как в примере ниже, чтобы сама разметка смотрелась лучше, но на вид таблицы-результата это не повлияет.

В эту таблицу можно было бы добавить HTML атрибуты, но для простоты обойдёмся без них.

Апельсин Яблоко и т.д.
Хлеб Булка и т.д.
Масло Мороженое и т.д.
{|
|  Апельсин  ||   Яблоко  ||   и т.д.
|-
|    Хлеб    ||    Булка  ||   и т.д.
|-
|    Масло   || Мороженое ||   и т.д.
|}

С HTML атрибутами

Вы можете добавить HTML атрибуты, чтобы таблица смотрелась лучше

border="1"

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

align="center" border="1"

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| align="center" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

align="right" border="1"

Вы можете указывать атрибуты для отдельных ячеек. Например, числа лучше выравнивать вправо.

Апельсин Яблоко 12,333.00
Хлеб Булка 500.00
Масло Мороженое 1.00
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|-
|Масло
|Мороженое
|align="right"|1.00
|}

Можно использовать атрибуты в отдельных строках.

Апельсин Яблоко 12,333.00
Хлеб Булка 500.00
Масло Мороженое 1.00
{| border="1"
|Апельсин
|Яблоко
|align="right"|12,333.00
|-
|Хлеб
|Булка
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Масло
|Мороженое
|align="right"|1.00
|}

cellspacing="0" border="1"

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

cellpadding="20" cellspacing="0" border="1"

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

С HTML атрибутами и стилями CSS

Стили CSS можно использовать вместе с другими HTML атрибутами или отдельно.

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

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

Для создания TH (заглавной ячейки таблицы в HTML) используйте ! вместо |. Заглавная ячейка обычно выделяется жирным и центрирована по умолчанию.

Заголовки столбцов

В каждом столбце

Вкусно Вкуснее
Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| border="1" cellpadding="20" cellspacing="0"
!Вкусно
!Вкуснее
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

Colspan="2"

Вкусные
Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Вкусные
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

Заголовки строк

По умолчанию

Фрукт Апельсин Яблоко
Еда Хлеб Булка
Добавка Масло Мороженое
{| border="1" cellpadding="20" cellspacing="0"
!Фрукт
|Апельсин
|Яблоко
|-
!Еда
|Хлеб
|Булка
|-
!Добавка
|Масло
|Мороженое 
|}

Выравнивание вправо

Заголовки строк, выровненные вправо, можно сделать так:

Фрукт Апельсин Яблоко
Еда Хлеб Булка
Добавка Масло Мороженое
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Фрукт
|Апельсин
|Яблоко
|-
!align="right" |Еда
|Хлеб
|Булка
|-
!align="right" |Добавка
|Масло
|Мороженое 
|}

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

Заглавие наверху таблицы можно добавить так:

Продукты
Апельсин Яблоко
Хлеб Булка
Масло Мороженое
{| border="1" cellpadding="20" cellspacing="0"
|+Продукты
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Булка
|-
|Масло
|Мороженое 
|}

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

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

Заголовки H1, H2, H3 и т.д.

HTML-заголовки H1, H2, H3, H4 и т.д. могут быть созданы с помощью обычной вики-разметки со знаками ==равенства== и должны быть целиком в одну строку.

Предпросмотре всей таблицы. Если вы нажмёте на кнопку правки внутри таблицы, и в режиме редактирования выберите предпросмотр, таблица отобразится неправильно, так как часть её отсутствует.

Следите за совместимостью иерархии заголовков с остальной частью страницы, чтобы оглавление наверху страницы отображалось правильно.

Вкуснейшие

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

Предупреждение

Отрицательные числа

Отрицательные числа или знак минус (обозначающий отсутствие какого-то значения) может нарушить таблицу, если ячейка начинается с новой строки (|-6), потому что это воспринимается вики как начало новой строки в таблице, а не новой ячейки. Чтобы избежать такой проблемы, ставьте пробел перед минусом (| -6) или воспользуйтесь внутристроковой разметкой (||-6).