Постоянные разделы Веб-квест.png Knopka setev2.jpg Shkaf knopka2.jpg Promknopka.jpg Masterklass.jpg ПОМОЩЬ.png Web202.jpg
Текущие активности Knopkaotchet.png Knopkasunduk.jpg Чтение кнопка.jpg Knopkapolka.jpg Knopkabird.jpg Knopkageroy19.jpg Afgan2019.jpg Travel2019.jpg

Таблицы

Материал из Wiki-Сибириада
Перейти к: навигация, поиск
Синтаксис

Таблицы

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

Ряды

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

 |-

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

|- параметры

Ячейки

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

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

дадут

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

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

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

{| 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
 | &alpha;
 | 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
А Б
В Г
Д Е
Ж З И
Й К
Л


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

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

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

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


Сравнение

Сравнение синтаксиса для таблиц
  XHTML HTML & Wiki-td Wiki-pipe
Таблица <table></table> <table></table>
{| параметры 
 |}
Название <caption></caption> <caption></caption>
|+ название
Строка <tr></tr> <tr>
|- параметры 
Ячейка с данными

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

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

| ячейка1
| ячейка2
Ячейка с данными <td>ячейка1</td> <td>ячейка2</td> <td>ячейка3</td> <td>ячейка1 <td>ячейка2 <td>ячейка3
|ячейка1||ячейка2||ячейка3
Ячейка-заголовок <th></th> <th>
! заголовок
Пример
1 2
3 4
<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
 |}
Пример
1 2
3 4
5 6
<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

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

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

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

Таблица умножения 5*3
× 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;">:

Таблица умножения 4*3
× 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", чтобы расположить таблицу слева; текст будет обтекать её справа (однако, возможно, слишком близко к таблице):

Таблица умножения 2*3
× 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:

Таблица умножения
× 1 2 3
1 1 2 3
2 2 4 6
Файл: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 содержит следующие параметры:

Шаблон:Prettytable.

Gallery

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

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

даст:

Источники

Личные инструменты
Пространства имён
Варианты
Действия
Навигация
Инструменты