Подробное объяснение форматирования таблиц

Материал из Wiki.

[править] Pipe-синтаксис

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

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

Параметры таблицы и параметры ячейки в сущности не различаются, так же как и в HTML (см. [1] и HTML element#Tables). Тем не менее, элементы thead, tbody, tfoot, colgroup и col пока еще не поддерживаются МедиаВики. Таблица может быть полезна, даже если ни одна из ячеек не содержит данных, например, потому, что использование фоновых цветов ячеек может представлять собой диаграмму . Изображение в виде таблицы куда более удобно для редактирования, чем загруженная картинка.

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

[править] Примеры

[править] Простой пример

{| 
 | Ячейка 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" | пять
 | шесть
 |-
 | семь
 | восемь
 | девять
 |}

даст

[править] Размещение

Можно управлять размещением самой таблицы, всего содержимого в строке и содержимым ячеки, но нельзя задать единый параметр для всего содержимого таблицы. Ни при каких обстоятельствах не используйте «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

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

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

[править] Усложненный пример

{| 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> синтаксис не обязательно останется поддерживаемым браузерами в будущем, особенно на переносных, имеющих выход в Интернет устройствах.

См. также HTML element#Tables. Заметьте, однако, что элементы thead, tbody, tfoot, colgroup и col до сих пор не поддерживаются МедиаВики.

[править] Сравнение

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

|+ название

|- параметры 

| ячейка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 
 |}

[править] Pipe-синтаксис в терминах HTML

Pipe-синтаксис (синтаксис вертикальных чёрточек), разработанный Magnus Manske, заменяет символы «|» на соответствующий HTML-код. Можете взглянуть на on-line-скрипт, который конвертирует код для HTML-таблиц в соответствующий код, написанный по правилам pipe-синтаксиса.

Вертикальные чёрточеки должны стоять в началах строк, кроме случая, когда они отделяют параметры от, собственно, самого содержимого или при использовании ||, чтобы разделить ячейки, текст которых записан в одну строку. Параметры необязательны.

[править] Таблицы

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

{| ''параметры'' |} или, что тоже самое, <table ''параметры''>Вставьте здесь неотформатированный текст </table>

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

[править] Ряды

Тэги <tr> автоматически генерируются для первой строки. Чтобы начать новую строку, используйте

|-

что будет переведено в

<tr>

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

|- параметры

что будет переведено в

<tr параметры>

Замечание:

• тэги <tr> автоматически открываются при первом <td> эквиваленте;
• тэги <tr> автоматически закрываются при <tr> и </table> эквивалентах.

[править] Ячейки

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

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

либо так:

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

или, что тоже самое,

<td>ячейка1</td><td>ячейка2</td><td>ячейка3</td>

так, «||» = «новая строка» + «|».

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

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

что приведет к

<td параметры>ячейка1
<td параметры>ячейка2
<td параметры>ячейка3

[править] Заголовки

Заголовки работают также, как и тэг TD, кроме того, что «!» используется вместо открывающейся «|», в то время как для отделения параметров остается «|». «!!» можно использовать вместо «||». Пример:

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

[править] Названия

Тэг <caption> создается строкой

|+ Название

что даст

<caption>Название</caption>

Можно также применять параметры:

|+ параметры|Название

что приведет к

<caption параметры>Название</caption>

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

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

{| 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}}. Template:Prettytable содержит следующие параметры:

Шаблон:Prettytable.

[править] Gallery

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

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

даст: