Таблицы — различия между версиями

Материал из Wiki
Перейти к:навигация, поиск
(Новая: font color="#000099" size="2" face="Verdana, Helvetica"> === Простейшая таблица === Любая таблица в wiki-стиле начинается с фигурно...)
 
(→‎С возможностью сортировки данных)
 
(не показаны 22 промежуточные версии 2 участников)
Строка 1: Строка 1:
−
font color="#000099" size="2" face="Verdana, Helvetica">
+
''Материалы взяты с Википедии''
  
−
=== Простейшая таблица ===
+
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
 +
 
 +
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала. Поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
 +
 
 +
==   Простейшая таблица ==
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается с вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется её содержание.
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается с вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется её содержание.
  
Строка 8: Строка 12:
 
|Исходный код таблицы с одной строкой:
 
|Исходный код таблицы с одной строкой:
 
|&nbsp;
 
|&nbsp;
−
|В КурганВики это будет выглядеть так:
+
|В Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 35: Строка 39:
 
|Исходный код таблицы в две строки:
 
|Исходный код таблицы в две строки:
 
|&nbsp;
 
|&nbsp;
−
|В КурганВики это будет выглядеть так:
+
|В Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 67: Строка 71:
 
|Таблица в три строки пишется так:
 
|Таблица в три строки пишется так:
 
|&nbsp;
 
|&nbsp;
−
|В КурганВики это будет выглядеть так:
+
|А в Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 106: Строка 110:
 
И так далее.
 
И так далее.
  
−
=== Табличные рамки ===
+
== Табличные рамки ==
 
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.  
 
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.  
  
−
'''Толщина линий''' рамки задаётся атрибутом '''border=n''', где «n» — толщина линии:
+
'''Толщина линий''' рамки задаётся атрибутом <code>border=n</code>, где «n» — толщина линии:
  
 
{|
 
{|
 
|Исходный код:
 
|Исходный код:
 
|&nbsp;
 
|&nbsp;
−
|В КурганВики это будет выглядеть так:
+
|В Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
  | <pre>{| border=1
 
  | <pre>{| border=1
Строка 150: Строка 154:
 
|}
 
|}
  
−
=== Заголовки ===
+
Изменять оформление рамки таблицы также можно с помощью атрибута <code>class</code>. Как правило, рекомендуется использовать <code>class="standard"</code>:
 +
 
 +
{|
 +
|Исходный код:
 +
|&nbsp;
 +
|В Вики это будет выглядеть следующим образом:
 +
|-
 +
| <pre>{| class="standard"
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}</pre>
 +
|
 +
{| cellspacing="10"
 +
|&nbsp;
 +
|&nbsp;
 +
|}
 +
|
 +
{| class="standard"
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
== Заголовки ==
 
Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.  
 
Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.  
  
Строка 157: Строка 202:
 
|Для последней таблицы можно написать так:
 
|Для последней таблицы можно написать так:
 
|&nbsp;
 
|&nbsp;
−
|В КурганВики это будет выглядеть так:
+
|В Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
|
 
|
Строка 201: Строка 246:
 
  |}
 
  |}
 
|}
 
|}
 +
 +
В классе <code>"standard"</code> заголовки подсвечиваются:
 +
 +
{|
 +
|Для последней таблицы можно написать так:
 +
|&nbsp;
 +
|В Вики это будет выглядеть следующим образом:
 +
|-
 +
|
 +
<pre>{| class="standard"
 +
!Первый столбец
 +
!Второй столбец
 +
!Третий столбец
 +
|-
 +
!Первая строчка
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
!Вторая строчка
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
!Третья строчка
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}</pre>
 +
|
 +
{| cellspacing="10"
 +
|&nbsp;
 +
|&nbsp;
 +
|}
 +
|
 +
{| class="standard"
 +
!Первый столбец
 +
!Второй столбец
 +
!Третий столбец
 +
|-
 +
!Первая строчка
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
!Вторая строчка
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
!Третья строчка
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
|}
 +
 +
== Запись в одну строчку ==
 +
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их дополнительной вертикальной чертой.
 +
 +
'''Пример:'''
 +
{|
 +
|Исходный код:
 +
|&nbsp;
 +
|В Вики это будет выглядеть следующим образом:
 +
|-
 +
| <pre>{| border=1
 +
!Первый столбец||Второй столбец||Третий столбец
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}</pre>
 +
|
 +
{| cellspacing="10"
 +
|&nbsp;
 +
|&nbsp;
 +
|}
 +
|
 +
{| border=1
 +
!Первый столбец||Второй столбец||Третий столбец
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 +
== Объединение ячеек ==
 +
В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали.
 +
Для объединения по вертикали применяется атрибут ''rowspan=n'', где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
 +
 +
'''Пример:'''
 +
{|
 +
|Вертикальное объединение двух ячеек пишется так:
 +
|&nbsp;||&nbsp;||&nbsp;||&nbsp;
 +
|Выглядеть это будет так:
 +
|-
 +
|<pre>{| border=1
 +
|Ячейка 1
 +
|rowspan=2 |Ячейка 2, объединяет два ряда таблицы
 +
|Ячейка 3
 +
|-
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}</pre>
 +
|&nbsp;||&nbsp;||&nbsp;||&nbsp;
 +
|
 +
{| border=1
 +
  |Ячейка 1
 +
  |rowspan=2 |Ячейка 2, объединяет два ряда таблицы
 +
  |Ячейка 3
 +
  |-
 +
  |Ячейка 4
 +
  |Ячейка 5
 +
  |}
 +
|}
 +
 +
Для объединения по горизонтали используется атрибут ''colspan=n''.
 +
'''Пример:'''
 +
<nowiki>{| border=1
 +
|Ячейка 1
 +
|colspan=2 |Ячейка 2, объединяет два столбца
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}</nowiki>
 +
Выглядит это так:
 +
{| border=1
 +
|Ячейка 1
 +
|colspan=2 |Ячейка 2, объединяет два столбца
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}
 +
 +
== «Раскраска» таблиц ==
 +
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 +
* для отдельного слова — <nowiki><font color="#ABCDEF">Tекст</font></nowiki>;
 +
* для длинного текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>,
 +
где «ABCDEF» — индекс цвета в [[Цвета в Вики|Таблице цветов]].
 +
'''Пример:'''
 +
Для "раскраски" текста пишут так:
 +
<nowiki>{| border=1
 +
|Ячейка 1*1
 +
|Здесь цветное только <font color="#FF00FF">одно</font> слово.
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}</nowiki>
 +
В Вики это будет выглядеть следующим образом:
 +
{| border=1
 +
|Ячейка 1*1
 +
|Здесь цветное только <font color="#FF00FF">одно</font> слово.
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
 +
Сделать '''цветную ячейку''' можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в [[Цвета в Вики|таблице цветов]].
 +
'''Пример:'''
 +
Для «раскраски» одной ячейки пишется так:
 +
<nowiki>{| border=1
 +
|Ячейка 1*1
 +
|bgcolor=#FFCC00|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|bgcolor=#CCFF00|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}</nowiki>
 +
В Вики это будет выглядеть следующим образом:
 +
{| border=1
 +
|Ячейка 1*1
 +
|bgcolor=#FFCC00|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|bgcolor=#CCFF00|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
<!-- не функционирует. В других языковых разделах такого не нашел. Надо поэкспериментировать.
 +
 +
Чтобы сделать цветным фон всей таблицы, следует вписать атрибут "bgcolor=#ABCDEF" в первую строку таблицы, где ставиться и атрибут рамки:
 +
<nowiki>{| border=1 bgcolor=#66FFFF
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}</nowiki>
 +
В Вики это будет выглядеть следующим образом:
 +
{| border=1 bgcolor=#66FFFF
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
-->
 +
 +
== Вложенные таблицы ==
 +
Для создания таблицы внутри уже имеющейся, надо вписать в нужном месте фигурную скобку с вертикальной черточкой, как при написании обычной таблицы. Обратите внимание, что горизонтальной черточки в начале строки '''не должно''' быть. Не забудьте также закрыть внутреннюю таблицу.
 +
'''Пример:'''
 +
<nowiki>{| border=1
 +
|Ячейка 1
 +
|
 +
{| border=2
 +
  |Ячейка A
 +
  |-
 +
  |Ячейка B
 +
  |}
 +
|Ячейка 3
 +
|}</nowiki>
 +
Выглядеть это будет так:
 +
{| border=1
 +
|Ячейка 1
 +
|
 +
{| border=2
 +
  |Ячейка A
 +
  |-
 +
  |Ячейка B
 +
  |}
 +
|Ячейка 3
 +
|}
 +
 +
Таким способом длинную узкую таблицу можно оформить более элегантно. Например, вы решили, что ваша таблица будет лучше смотреться, если её расположить в виде трёх рядом расположенных отдельных табличек. Сначала напишите код таблицы из одной строки, но с пятью столбцами:
 +
{|
 +
|
 +
<pre>{|
 +
|Столбец 1
 +
|Столбец 2
 +
|Столбец 3
 +
|Столбец 4
 +
|Столбец 5
 +
|}</pre>
 +
|В 1, 3 и 5 столбцах будут располагаться сами таблицы, а 2 и 4 предназначены для пробелов между ними.
 +
|}
 +
 +
Разделите свою длинную таблицу на три равных части, оформите их как отдельные таблицы с соответствующими атрибутами и вставьте вместо записей «Столбец 1», «Столбец 3» и «Столбец 5».
 +
 +
Вместо записей «Столбец 2» и «Столбец 4» вставьте знак вынужденного пробела. Если расстояние между таблицами вам покажется узковатым, то добавьте ещё значки вынужденного пробела (отделяя их друг от друга двумя вертикальными чёрточками).
 +
 +
{|
 +
|<pre>{|
 +
|
 +
{| class="standard"
 +
  !Заголовок 1||Заголовок 2
 +
  |-
 +
  |Ячейка 1-1||Ячейка 1-2
 +
  |-
 +
  |Ячейка 1-3||Ячейка 1-4
 +
  |-
 +
  |Ячейка 1-5||Ячейка 1-6
 +
  |-
 +
  |Ячейка 1-7||Ячейка 1-8
 +
  |-
 +
  |Ячейка 1-9||Ячейка 1-10
 +
  |-
 +
  |Ячейка 1-11||Ячейка 1-12
 +
  |}
 +
|&nbsp;||&nbsp;
 +
|
 +
{| class="standard"
 +
  !Заголовок 1||Заголовок 2
 +
  |-
 +
  |Ячейка 3-1||Ячейка 3-2
 +
  |-
 +
  |Ячейка 3-3||Ячейка 3-4
 +
  |-
 +
  |Ячейка 3-5||Ячейка 3-6
 +
  |-
 +
  |Ячейка 3-7||Ячейка 3-8
 +
  |-
 +
  |Ячейка 3-9||Ячейка 3-10
 +
  |-
 +
  |Ячейка 3-11||Ячейка 3-12
 +
  |}
 +
|&nbsp;||&nbsp;
 +
|
 +
{| class="standard"
 +
  !Заголовок 1||Заголовок 2
 +
  |-
 +
  |Ячейка 5-1||Ячейка 5-2
 +
  |-
 +
  |Ячейка 5-3||Ячейка 5-4
 +
  |-
 +
  |Ячейка 5-5||Ячейка 5-6
 +
  |-
 +
  |Ячейка 5-7||Ячейка 5-8
 +
  |-
 +
  |Ячейка 5-9||Ячейка 5-10
 +
  |-
 +
  |Ячейка 5-11||Ячейка 5-12
 +
  |}
 +
|}</pre>
 +
|&nbsp;||&nbsp;||&nbsp;||&nbsp;
 +
| valign="top"|
 +
{|
 +
  |
 +
  {| class="standard"
 +
  !Заголовок 1||Заголовок 2
 +
  |-
 +
  |Ячейка 1-1
 +
  |Ячейка 1-2
 +
  |-
 +
  |Ячейка 1-3
 +
  |Ячейка 1-4
 +
  |-
 +
  |Ячейка 1-5
 +
  |Ячейка 1-6
 +
  |-
 +
  |Ячейка 1-7
 +
  |Ячейка 1-8
 +
  |-
 +
  |Ячейка 1-9
 +
  |Ячейка 1-10
 +
  |-
 +
  |Ячейка 1-11
 +
  |Ячейка 1-12
 +
  |}
 +
|&nbsp;||&nbsp;
 +
|
 +
{| class="standard"
 +
  !Заголовок 1||Заголовок 2
 +
  |-
 +
|Ячейка 3-1
 +
|Ячейка 3-2
 +
|-
 +
|Ячейка 3-3
 +
|Ячейка 3-4
 +
|-
 +
|Ячейка 3-5
 +
|Ячейка 3-6
 +
|-
 +
|Ячейка 3-7
 +
|Ячейка 3-8
 +
|-
 +
|Ячейка 3-9
 +
|Ячейка 3-10
 +
|-
 +
|Ячейка 3-11
 +
|Ячейка 3-12
 +
|}
 +
|&nbsp;||&nbsp;
 +
|
 +
{| class="standard"
 +
!Заголовок 1||Заголовок 2
 +
|-
 +
|Ячейка 5-1
 +
|Ячейка 5-2
 +
|-
 +
|Ячейка 5-3
 +
|Ячейка 5-4
 +
|-
 +
|Ячейка 5-5
 +
|Ячейка 5-6
 +
|-
 +
|Ячейка 5-7
 +
|Ячейка 5-8
 +
|-
 +
|Ячейка 5-9
 +
|Ячейка 5-10
 +
|-
 +
|Ячейка 5-11
 +
|Ячейка 5-12
 +
|}
 +
|}
 +
|}
 +
 +
== Название таблицы ==
 +
Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.
 +
'''Пример:'''
 +
<nowiki>{| border=1
 +
|+ Очень длинное-длинное название таблицы.
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}</nowiki>
 +
Выглядеть это будет так:
 +
{| border=1
 +
|+ Очень длинное-длинное название таблицы.
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}
 +
 +
== С возможностью сортировки данных ==
 +
{| class="standard sortable" border=1
 +
|-
 +
|Учитель||Студент||Школьник
 +
|-
 +
|Иван Иванович Иванов|| 1 || 2
 +
|-
 +
|Петров Иванович Иванов|| 2 || 1
 +
|}
 +
 +
Пример: 
 +
 +
<nowiki>{| class="standard sortable" border=1
 +
|- 
 +
|Учитель||Студент||Школьник
 +
|-
 +
|Иван Иванович Иванов|| 1 || 2 
 +
|-
 +
|Петров Иванович Иванов|| 2 || 1
 +
|} </nowiki>
 +
 +
== Ширина таблицы и столбцов ==
 +
Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, независимо от их содержания. Для фиксации ширины таблицы применяется атрибут ''width''.
 +
'''Пример:'''
 +
<nowiki>{| border=1 width=75%
 +
|+Таблица 1
 +
|Ячейка 1*1 - long - long- long- long- long
 +
|Ячейка 1*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 1*4
 +
|}</nowiki>
 +
<nowiki>{| border=1 width=75%
 +
|+Таблица 2
 +
|Ячейка 2*1
 +
|Ячейка 2*2
 +
|-
 +
|Ячейка 2*3
 +
|Ячейка 2*4
 +
|}</nowiki>
 +
 +
Выглядеть это будет так:
 +
{| border=1 width=75%
 +
|+Таблица 1
 +
|Ячейка 1*1 - long - long- long- long- long
 +
|Ячейка 1*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 1*4
 +
|}
 +
{| border=1 width=75%
 +
|+Таблица 2
 +
|Ячейка 2*1
 +
|Ячейка 2*2
 +
|-
 +
|Ячейка 2*3
 +
|Ячейка 2*4
 +
|}
 +
 +
С помощью этого же атрибута можно регулировать '''ширину отдельных столбцов''':
 +
 +
'''Пример:'''
 +
<nowiki>{| border=1 width=75%
 +
|+Таблица 1
 +
| width=40%|Ячейка 1*1 - long - long- long- long- long
 +
| width=20%|Ячейка 1*2 - long - long- long- long- long
 +
| width=40%|Ячейка 1*3 - long - long- long- long- long
 +
|-
 +
|Ячейка 1*4
 +
|Ячейка 1*5
 +
|Ячейка 1*6
 +
|}</nowiki>
 +
 +
{| border=1 width=75%
 +
|+Таблица 1
 +
| width=40%|Ячейка 1*1 - long - long- long- long- long
 +
| width=20%|Ячейка 1*2 - long - long- long- long- long
 +
| width=40%|Ячейка 1*3 - long - long- long- long- long
 +
|-
 +
|Ячейка 1*4
 +
|Ячейка 1*5
 +
|Ячейка 1*6
 +
|}
 +
 +
Для задания определённой ширины ячейки с '''вложенной таблицей''' следует указать для неё атрибут ''width'', но закрыть этот атрибут вертикальной чёрточкой:
 +
{| width=80%
 +
|
 +
<nowiki>{| border=1
 +
|Ячейка 1
 +
| width=50%|
 +
{| border=2
 +
  |Ячейка A
 +
  |-
 +
  |Ячейка B
 +
  |}
 +
|Ячейка 3
 +
|}</nowiki>
 +
|&nbsp;||&nbsp;||&nbsp;||&nbsp;
 +
{| border=1 width=60%
 +
|Ячейка 1
 +
| width=50%|
 +
{| border=2
 +
  |Ячейка A
 +
  |-
 +
  |Ячейка B
 +
  |}
 +
|Ячейка 3
 +
|}
 +
|}
 +
 +
== Таблицы в машинописном стиле без форматирования ==
 +
Существует также простейший и быстрейший способ создать таблицу — это написать ее в машинописном стиле. Столбцы и общий вид форматируются визуально.
 +
'''Пример:'''
 +
                    Климатическая таблица
 +
 +
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 +
<nowiki>--------------------------------------------------------------------------------------------------</nowiki>
 +
Дневная температура  21    21      22    23  25  27    29    28    26      24      22    20
 +
Ночная температура  15    15      15    16  17  17    18    17    16      15      15    14
 +
Солнечные часы/день  6      6      7    8  9    9    9    8      7      7      6      6
 +
Дождливые дни/месяц  6      4      3    2  2    1    0    0      2      5      6      7
 +
Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
 +
 +
Однако подобный примитивный способ форматирования таблиц является нежелательным; следует избегать его широкого использования в статьях. Повстречав в Вики таблицу, оформленную подобным образом, желательно привести её к стандартному вики-формату.
 +
 +
[[Категория:Справка]]

Текущая версия на 14:05, 27 апреля 2009

Материалы взяты с Википедии

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

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

Простейшая таблица

Любая таблица в wiki-стиле начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание.

Пример:

Исходный код таблицы с одной строкой:   В Вики это будет выглядеть так: 
{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}
   
Ячейка 1 Ячейка 2 Ячейка 3

Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.

Пример:

Исходный код таблицы в две строки:   В Вики это будет выглядеть так: 
{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Таблица в три строки пишется так:   А в Вики это будет выглядеть так: 
{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

И так далее.

Табличные рамки

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

Толщина линий рамки задаётся атрибутом border=n, где «n» — толщина линии:

Исходный код:   В Вики это будет выглядеть следующим образом: 
{| border=1
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Изменять оформление рамки таблицы также можно с помощью атрибута class. Как правило, рекомендуется использовать class="standard":

Исходный код:   В Вики это будет выглядеть следующим образом: 
{| class="standard"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Заголовки

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

Пример:

Для последней таблицы можно написать так:   В Вики это будет выглядеть следующим образом: 
{| border=1
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*3

В классе "standard" заголовки подсвечиваются:

Для последней таблицы можно написать так:   В Вики это будет выглядеть следующим образом: 
{| class="standard"
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*3

Запись в одну строчку

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

Пример:

Исходный код:   В Вики это будет выглядеть следующим образом: 
{| border=1
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}
   
Первый столбец Второй столбец Третий столбец
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Объединение ячеек

В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.

Пример:

Вертикальное объединение двух ячеек пишется так:         Выглядеть это будет так: 
{| border=1
 |Ячейка 1 
 |rowspan=2 |Ячейка 2, объединяет два ряда таблицы
 |Ячейка 3
 |- 
 |Ячейка 4
 |Ячейка 5
 |}
        
Ячейка 1 Ячейка 2, объединяет два ряда таблицы Ячейка 3
Ячейка 4 Ячейка 5

Для объединения по горизонтали используется атрибут colspan=n. 

Пример:
{| border=1
 |Ячейка 1 
 |colspan=2 |Ячейка 2, объединяет два столбца
 |-
 |Ячейка 3 
 |Ячейка 4
 |Ячейка 5
 |}

Выглядит это так:

Ячейка 1 Ячейка 2, объединяет два столбца
Ячейка 3 Ячейка 4 Ячейка 5

«Раскраска» таблиц

Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:

  • для отдельного слова — <font color="#ABCDEF">Tекст</font>;
  • для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>,

где «ABCDEF» — индекс цвета в Таблице цветов. 

Пример:
Для "раскраски" текста пишут так:
{| border=1
 |Ячейка 1*1
 |Здесь цветное только <font color="#FF00FF">одно</font> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Вики это будет выглядеть следующим образом:

Ячейка 1*1 Здесь цветное только одно слово. Ячейка 3*1
Ячейка 1*2 Ячейка 2*2
А здесь выделен цветом длинный-длинный абзац.
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в таблице цветов. 

Пример:
Для «раскраски» одной ячейки пишется так:
{| border=1
 |Ячейка 1*1
 |bgcolor=#FFCC00|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor=#CCFF00|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Вики это будет выглядеть следующим образом:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

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

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

Пример:
{| border=1
 |Ячейка 1
 |
 {| border=2
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}

Выглядеть это будет так:

Ячейка 1
Ячейка A
Ячейка B
Ячейка 3

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

{|
 |Столбец 1
 |Столбец 2
 |Столбец 3
 |Столбец 4
 |Столбец 5
 |}
 В 1, 3 и 5 столбцах будут располагаться сами таблицы, а 2 и 4 предназначены для пробелов между ними.

Разделите свою длинную таблицу на три равных части, оформите их как отдельные таблицы с соответствующими атрибутами и вставьте вместо записей «Столбец 1», «Столбец 3» и «Столбец 5».

Вместо записей «Столбец 2» и «Столбец 4» вставьте знак вынужденного пробела. Если расстояние между таблицами вам покажется узковатым, то добавьте ещё значки вынужденного пробела (отделяя их друг от друга двумя вертикальными чёрточками). 

{|
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 1-1||Ячейка 1-2
  |-
  |Ячейка 1-3||Ячейка 1-4
  |-
  |Ячейка 1-5||Ячейка 1-6
  |-
  |Ячейка 1-7||Ячейка 1-8
  |-
  |Ячейка 1-9||Ячейка 1-10
  |-
  |Ячейка 1-11||Ячейка 1-12
  |}
 | || 
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 3-1||Ячейка 3-2
  |-
  |Ячейка 3-3||Ячейка 3-4
  |-
  |Ячейка 3-5||Ячейка 3-6
  |-
  |Ячейка 3-7||Ячейка 3-8
  |-
  |Ячейка 3-9||Ячейка 3-10
  |-
  |Ячейка 3-11||Ячейка 3-12
  |}
 | || 
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 5-1||Ячейка 5-2
  |-
  |Ячейка 5-3||Ячейка 5-4
  |-
  |Ячейка 5-5||Ячейка 5-6
  |-
  |Ячейка 5-7||Ячейка 5-8
  |-
  |Ячейка 5-9||Ячейка 5-10
  |-
  |Ячейка 5-11||Ячейка 5-12
  |}
 |}
        
Заголовок 1 Заголовок 2
Ячейка 1-1 Ячейка 1-2
Ячейка 1-3 Ячейка 1-4
Ячейка 1-5 Ячейка 1-6
Ячейка 1-7 Ячейка 1-8
Ячейка 1-9 Ячейка 1-10
Ячейка 1-11 Ячейка 1-12
   
Заголовок 1 Заголовок 2
Ячейка 3-1 Ячейка 3-2
Ячейка 3-3 Ячейка 3-4
Ячейка 3-5 Ячейка 3-6
Ячейка 3-7 Ячейка 3-8
Ячейка 3-9 Ячейка 3-10
Ячейка 3-11 Ячейка 3-12
   
Заголовок 1 Заголовок 2
Ячейка 5-1 Ячейка 5-2
Ячейка 5-3 Ячейка 5-4
Ячейка 5-5 Ячейка 5-6
Ячейка 5-7 Ячейка 5-8
Ячейка 5-9 Ячейка 5-10
Ячейка 5-11 Ячейка 5-12

Название таблицы

Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами. 

Пример:
{| border=1
 |+ Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}

Выглядеть это будет так:

Очень длинное-длинное название таблицы.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

С возможностью сортировки данных

Учитель Студент Школьник
Иван Иванович Иванов 1 2
Петров Иванович Иванов 2 1

Пример: 

{| class="standard sortable" border=1
 |-  
 |Учитель||Студент||Школьник 
 |- 
 |Иван Иванович Иванов|| 1 || 2  
 |- 
 |Петров Иванович Иванов|| 2 || 1 
 |}

Ширина таблицы и столбцов

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

Пример:
{| border=1 width=75%
 |+Таблица 1
 |Ячейка 1*1 - long - long- long- long- long
 |Ячейка 1*2
 |-
 |Ячейка 1*3
 |Ячейка 1*4
 |}
{| border=1 width=75%
 |+Таблица 2
 |Ячейка 2*1
 |Ячейка 2*2
 |-
 |Ячейка 2*3
 |Ячейка 2*4
 |}

Выглядеть это будет так:

Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 2
Ячейка 2*1 Ячейка 2*2
Ячейка 2*3 Ячейка 2*4

С помощью этого же атрибута можно регулировать ширину отдельных столбцов: 

Пример:
{| border=1 width=75%
 |+Таблица 1
 | width=40%|Ячейка 1*1 - long - long- long- long- long
 | width=20%|Ячейка 1*2 - long - long- long- long- long
 | width=40%|Ячейка 1*3 - long - long- long- long- long
 |-
 |Ячейка 1*4
 |Ячейка 1*5
 |Ячейка 1*6
 |}
Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2 - long - long- long- long- long Ячейка 1*3 - long - long- long- long- long
Ячейка 1*4 Ячейка 1*5 Ячейка 1*6

Для задания определённой ширины ячейки с вложенной таблицей следует указать для неё атрибут width, но закрыть этот атрибут вертикальной чёрточкой: 

{| border=1
 |Ячейка 1
 | width=50%|
 {| border=2
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}
       
Ячейка 1
Ячейка A
Ячейка B
Ячейка 3

Таблицы в машинописном стиле без форматирования

Существует также простейший и быстрейший способ создать таблицу — это написать ее в машинописном стиле. Столбцы и общий вид форматируются визуально. 

Пример:
                   Климатическая таблица

Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
--------------------------------------------------------------------------------------------------
Дневная температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура воды     19     18      18    18  19   20    21    23     20      18      18     18

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

Источник — «http://wikikurgan.ru/index.php?title=Таблицы&oldid=1728»