Текущая версия на 10:06, 13 октября 2016

Синтаксис

Таблицы

• таблица начинается со строки «{| необязательные_параметры_таблицы» и заканчивается строкой «|}»;

 {| ''параметры''
 |}

Внимание: обязательно вставляйте пробел между {| и параметры, иначе первый параметр будет проигнорирован.

• необязательное название таблицы включается с помощью строки «|+ название» после начала («{| ...»);

 {| ''параметры''
|+ название таблицы
|-
 |}

Ряды

• код для строки таблицы состоит из строк «|- необязательные_параметры_для_всей_строки» и, начиная с новой строки, коды для ячеек этой строки (каждая начинается с «|»), разделенные символом новой строки или «|»;

Чтобы начать новую строку, используйте

 |-

Параметры добавляются следующим образом:

|- параметры

Ячейки

• содержимое таблицы — текст, расположенный внутри ячеек; текст ячейки вводится как «| текст» или «| параметры_ячейки | текст»;

Ячейки можно создать либо так:

 |ячейка1
 |ячейка2
 |ячейка3

либо так:

 |ячейка1||ячейка2||ячейка3

Параметры для ячеек задаются следующим образом:

|параметры|ячейка1||параметры|ячейка2||параметры|ячейка3

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

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

Заголовки

• строка названий колонок выделяется при использовании «!» вместо «|», кроме того случая, когда «|» разделяет параметры и текст ячейки (можно также оставлять «|», если коды ячеек ряделяются не символом новой строки, а «|», например, «! Заголовок1 || Заголовок2 || Заголовок3» — прим. переводчика); разница между такой строкой и строкой обыкновенной зависит от браузера, обычно названия колонок выделяются жирным шрифтом;
• первая ячейка строки определяется как заголовок строки при использовании «!» в начале строки вместо «|», начиная текст последующих ячеек с новой строки.

Пример:

!параметры|ячейка1

Примеры простых таблиц

Таблица без обрамления ячеек

{| 
 | Ячейка 1, строка 1 
 | Ячейка 2, строка 1 
 |- 
 | Ячейка 1, строка 2 
 | Ячейка 2, строка 2 
 |}

или

{| 
 | Ячейка 1, строка 1 || Ячейка 2, строка 1 
 |- 
 | Ячейка 1, строка 2 || Ячейка 2, строка 2 
 |}

дадут

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

Исходник

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

Примеры сложных таблиц

Цвет; область действия параметров

Вот два способа указания цвета текста и фона для одиночной ячейки:

{| 
 | bgcolor=red | <font color=white> раз
 | два
 | style="background:red; color:white" | три
 | четыре
 |}

даст

Как показано, тег «font» распространяется только на одну ячейку, даже без использования закрывающего тега: закрывающий тег генерируется системой.

Как и остальные параметры, цвета тоже могут быть определены как для строки, так и для таблицы целиком, причём параметры для строки не принимают во внимание соответствующие значения для таблицы, аналогично для ячеек по отношению к строке:

{| style="background:yellow; color:green"
 |- 
 | раз
 | два
 | три
 |- style="background:red; color:white"
 | четыре
 | пять
 | шесть
 |-
 | семь
 | style="background:silver" | восемь
 | девять
 |}

даст

HTML спецификации 4.01 определяет шестнадцать именованных цветов, которые показаны здесь вместе с их шестнадцатиричными эквивалентами:

См. W:en:web colors.

Ширина, высота

Ширина и высота для всей таблицы определяются так же, как и для строки. Чтобы установить ширину столбца, можно определить этот параметр для его произвольной ячейки. Если ширина не определена ни для одного столбца, и/или высота не определена ни для одной строки, то внешность таблицы зависит от используемого браузера.

{| style="width:75%; height:200px" border="1"
 |-
 | раз
 | два
 | три
 |- style="height:100px" 
 | четыре
 | style="width:200px" | пять
 | шесть
 |-
 | семь
 | восемь
 | девять
 |}

даст

Размещение

Можно управлять размещением самой таблицы, всего содержимого в строке и содержимым ячейки, но нельзя задать единый параметр для всего содержимого таблицы. (см. M:Template talk:Table demo). Ни при каких обстоятельствах не используйте «float» при выравнивании таблицы, это нарушит отображение таблицы при больши́х размерах шрифтов.

Общий пример

Ниже показан более сложный пример, в котором применяются еще некоторые параметры при создании таблиц. Можете поиграться с ними при создании своей таблицы, чтобы понять, что же именно они означают. Однако не каждая из этих методик подходит повсеместно, например, разноцветный фон не всегда является хорошей идеей. Не старайетсь усложнять код таблицы там, где это не надо: это только усложнит задачу тому, кто впоследствии будет править статью. Цель этого примера — показать, что и как можно делать.

Исходник

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

Appearance

Пример таблицы

Первый заголовок	Второй заголовок
верхняя левая		правая сторона
нижняя левая	нижняя средняя
Таблица в таблице Два логотипа Википедии

Усложненный пример

{| align=right border=1
 | Столбец 1, строка 1 
 | rowspan=2 | Столбец 2, строка 1 (и 2) 
 | Столбец 3, строка 1 
 |- 
 | Столбец 1, строка 2 
 | Столбец 3, строка 2 
 |}

Обратите внимание на выравнивание таблицы по правому краю.

Вложенные таблицы

{| border=1
 | α
 | align="center"| ячейка 2
 {| border=2 style="background-color:#ABCDEF;"
  | Вложенная
  |-
  | таблица
  |}
 | valign="bottom"| и снова основная таблица
 |}

gives a nested table

Вложеные таблицы начинаются с новой строки.

Совместное использование COLSPAN и ROWSPAN

{| border="1" cellpadding="5" cellspacing="0"
 |-
 ! Столбец 1 || Столбец 2 || Столбец 3
 |-
 | rowspan=2| А
 | colspan=2 align="center"| Б
 |-
 | В
 | Г
 |-
 | Д
 | colspan=2 align="center"| Е
 |- 
 | rowspan=3| Ж
 | З
 | И
 |- 
 | Й
 | К
 |-
 | colspan=2 align="center"| Л
 |}

Другие виды синтаксиса

Вот другие типы синтаксиса таблиц, поддерживаемые МедиаВики:

1. XHTML,
2. HTML и вики-<td> синтаксис.

Все три поддерживаются МедиаВики и создают правильный HTML-эквивалент, тем не менее основы синтаксиса очень просты, кроме, быть может, случая, когда человек не знаком с HTML. Также HTML и вики-<td> синтаксис не обязательно останется поддерживаемым браузерами в будущем, особенно на переносных, имеющих выход в Интернет устройствах.

Сравнение

{| параметры 
 |}

|+ название

|- параметры 

| ячейка1
| ячейка2

|ячейка1||ячейка2||ячейка3

! заголовок

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

Текст рядом с таблицей

(Чтобы увидеть демонстрируемые эффекты, Вам, возможно, придется увеличить или уменьшить размер шрифта в настройках браузера, также попробуйте изменить ширину его окна.)

Вставьте align="right", и текст будет расположен слева от таблицы.

here begins the text immediately after 5*3 multiplication table. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. At ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Шаблон:Clear

Тем не менее, не помещайте предварительно отформатированный тескт (<pre></pre>) рядом с таблицей: он может быть наложен поверх неё, так как не переносится по словам. Чтобы этого не случалось, используйте <br style="clear:both;">:

here begins the text immediately after 4*3 multiplication table. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. now comes the cleared BR:
here it was so preformatted text will start only after the table ended

Используйте align="left", чтобы расположить таблицу слева; текст будет обтекать её справа (однако, возможно, слишком близко к таблице):

here begins the text immediately after 2*3 multiplication table. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. At ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.

Чтобы такого не происходило, можно использовать в заголовке таблицы атрибут style="margin-right: 1em;" . Шаблон:Clr

Пространство около таблицы, изображения или текста

Чтобы создать такое пространство, добавьте элемент (таблицу, изображение или текст) в таблицу 1×1 (один столбец, одна строка) и используйте для последней атрибут cellpadding:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

At ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla. Шаблон:Clr

Настройка ширины столбцов

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

{| border="1" cellpadding="2"
 ! width="50"  | Название
 ! width="225" | Преимущество
 ! width="225" | Играют
 |-
 | Теннис
 | Интересная игра
 | Везде
 |-
 | Большой теннис
 | Еще интереснее
 | Везде
 |}

Название	Преимущество	Играют
Теннис	Интересная игра	Везде
Большой теннис	Еще интереснее	Везде

Настройка параметров

В начале кода для ячейки можно добавить параметры, после которых не забудьте поставить «|». Например, width="300px" | установит ширину ячейки в 300 пикселей. Чтобы добавить несколько параметров, просто разделите их пробелами.

Код

{|
 |-
 | bgcolor="red" | ячейка1 || width="300px" bgcolor="blue" | ячейка2 || bgcolor="green" | ячейка3
 |}

Результат

ячейка1

ячейка2

ячейка3

Выравнивание десятичных дробей

Ниже показано, как можно выравнивать десятичные дроби по отделяющей целую часть от дробной точке:

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

даст

432	.	1
43	.	21
4	.	321

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

432.1
 43.21
  4.321

Шаблоны стилей

Трудолюбивые пользователи создали шаблоны, чтобы упростить создание таблиц. Теперь вместо запоминания бесчисленных параметров и нагромождения кодов таблиц просто включите подходящий шаблон после «{|». Просто и лаконично. Например, вот эта таблица

станет такой:

просто заменив строку border="1" cellpadding="2" на {{prettytable}}. Шаблон:Prettytable содержит следующие параметры:

Вики-газета о городе

Gallery

Как и галерея изображений, таблица может быть сформирована при использовании тэга gallery; если элемент содержит ссылку, он полностью игнорируется.

<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]]) 
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>

даст:

• Drenthe
• Flevoland
• Friesland
• Gelderland
• Groningen
• Limburg
• North Holland
• Overijssel
• South Holland
• Utrecht
• Zeeland

Источники

• Подробное_объяснение_вики-форматирования_таблиц - источник испорчен