Таблицы
Синтаксис
- таблица начинается со строки «
{|
необязательные_параметры_таблицы» и заканчивается строкой «|}
»; - необязательное название таблицы включается с помощью строки «
|+
название» после начала («{|
...»); - код для строки таблицы состоит из строк «
|-
необязательные_параметры_для_всей_строки» и, начиная с новой строки, коды для ячеек этой строки (каждая начинается с «|»), разделенные символом новой строки или «|»; - содержимое таблицы — текст, расположенный внутри ячеек; текст ячейки вводится как «| текст» или «| параметры_ячейки | текст»;
- строка названий колонок выделяется при использовании «!» вместо «|», кроме того случая, когда «|» разделяет параметры и текст ячейки (можно также оставлять «|», если коды ячеек ряделяются не символом новой строки, а «|», например, «! Заголовок1 || Заголовок2 || Заголовок3» — прим. переводчика); разница между такой строкой и строкой обыкновенной зависит от браузера, обычно названия колонок выделяются жирным шрифтом;
- первая ячейка строки определяется как заголовок строки при использовании «!» в начале строки вместо «|», начиная текст последующих ячеек с новой строки.
Таблица может быть полезна, даже если ни одна из ячеек не содержит данных, например, потому, что использование фоновых цветов ячеек может представлять собой диаграмму. Изображение в виде таблицы куда более удобно для редактирования, чем загруженная картинка.
Все строки таблицы должны содержать одинаковое число ячеек, так что число столбцов не меняется (кроме случая, когда есть ячейки, растянутые на несколько строк или столбцов, см. Общий пример ниже). Для пустых ячеек используется неразрывный пробел (
), чтобы убедиться, что они будут отражены.
Примеры
Таблица без обрамления ячеек
{| | Ячейка 1, строка 1 | Ячейка 2, строка 1 |- | Ячейка 1, строка 2 | Ячейка 2, строка 2 |}
или
{| | Ячейка 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 определяет шестнадцать именованных цветов, которые показаны здесь вместе с их шестнадцатиричными эквивалентами:
black | #000000 | silver | #c0c0c0 | maroon | #800000 | red | #ff0000 | |||
navy | #000080 | blue | #0000ff | purple | #800080 | fuchsia | #ff00ff | |||
green | #008000 | lime | #00ff00 | olive | #808000 | yellow | #ffff00 | |||
teal | #008080 | aqua | #00ffff | gray | #808080 | white | #ffffff |
См. 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 |}
Столбец 1, строка 1 | Столбец 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
α | ячейка 2
|
и снова основная таблица |
Вложеные таблицы начинаются с новой строки.
Совместное использование 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 | Столбец 2 | Столбец 3 |
---|---|---|
А | Б | |
В | Г | |
Д | Е | |
Ж | З | И |
Й | К | |
Л |
Другие виды синтаксиса
Вот другие типы синтаксиса таблиц, поддерживаемые МедиаВики:
- XHTML,
- HTML и вики-<td> синтаксис.
Все три поддерживаются МедиаВики и создают правильный HTML-эквивалент, тем не менее основы синтаксиса очень просты, кроме, быть может, случая, когда человек не знаком с HTML. Также HTML и вики-<td> синтаксис не обязательно останется поддерживаемым браузерами в будущем, особенно на переносных, имеющих выход в Интернет устройствах.
См. также HTML element#Tables. Заметьте, однако, что элементы thead
, tbody
, tfoot
, colgroup
и col
до сих пор не поддерживаются МедиаВики.
Сравнение
XHTML | HTML & Wiki-td | Wiki-pipe | |||||||
---|---|---|---|---|---|---|---|---|---|
Таблица | <table></table> | <table></table> | {| параметры |} | ||||||
Название | <caption></caption> | <caption></caption> | |+ название | ||||||
Строка | <tr></tr> | <tr> | |- параметры | ||||||
Ячейка с данными |
<td>ячейка1</td> |
<td>ячейка1 |
| ячейка1 | ячейка2 | ||||||
Ячейка с данными | <td>ячейка1</td> <td>ячейка2</td> <td>ячейка3</td> | <td>ячейка1 <td>ячейка2 <td>ячейка3 | |ячейка1||ячейка2||ячейка3 | ||||||
Ячейка-заголовок | <th></th> | <th> | ! заголовок | ||||||
Пример |
| ||||||||
<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 |} | |||||||
Плюсы |
Возможность предварительного просмотра и отладки в любом XHTML-редакторе Может быть отформатирован для наибольшей удобочитаемости Широко известен |
Возможность предварительного просмотра и отладки в любом HTML-редакторе Может быть отформатирован для наибольшей удобочитаемости Широко известен Занимает меньше места, чем XHTML-код |
Легко писать Легко читать Занимает мало места | ||||||
Минусы |
Утомителен Занимает много места Сложно быстро читать |
Непривычен, особенно для людей, мало знакомых с HTML Плохо формируется Плохо разграничивается Зачастую странно выглядит Возможно, не будет поддерживаться браузерами |
Непривычный синтаксис Строгая структура Нельзя делать отступы Текст в виде HTML-тэгов может быть проще для чтения для некоторых людей, чем наборы вертикальных чёрточек, плюсов, восклицательных знаков и так далее | ||||||
XHTML | HTML & Wiki-td | Wiki-pipe |
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>
Текст рядом с таблицей
(Чтобы увидеть демонстрируемые эффекты, Вам, возможно, придется увеличить или уменьшить размер шрифта в настройках браузера, также попробуйте изменить ширину его окна.)
Вставьте 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 |
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;">:
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
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", чтобы расположить таблицу слева; текст будет обтекать её справа (однако, возможно, слишком близко к таблице):
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
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:
|
Файл:Gelderland-Position.png |
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
Шаблоны стилей
Трудолюбивые пользователи создали шаблоны, чтобы упростить создание таблиц. Теперь вместо запоминания бесчисленных параметров и нагромождения кодов таблиц просто включите подходящий шаблон после «{|
». Просто и лаконично. Например, вот эта таблица
× | 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 |
просто заменив строку 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
Источники
- Подробное_объяснение_вики-форматирования_таблиц - источник испорчен