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

Материал из Wiki
Перейти к:навигация, поиск
(Простейшая таблица)
(С возможностью сортировки данных)
 
(не показано 16 промежуточных версий 2 участников)
Строка 1: Строка 1:
 +
''Материалы взяты с Википедии''
 +
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
  
Строка 10: Строка 12:
 
|Исходный код таблицы с одной строкой:
 
|Исходный код таблицы с одной строкой:
 
| 
 
| 
КурганВики это будет выглядеть так:
+
Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 37: Строка 39:
 
|Исходный код таблицы в две строки:
 
|Исходный код таблицы в две строки:
 
| 
 
| 
КурганВики это будет выглядеть так:
+
Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 69: Строка 71:
 
|Таблица в три строки пишется так:
 
|Таблица в три строки пишется так:
 
| 
 
| 
|А в КурганВики это будет выглядеть так:
+
|А в Вики это будет выглядеть так:
 
|-
 
|-
 
|
 
|
Строка 116: Строка 118:
 
|Исходный код:
 
|Исходный код:
 
| 
 
| 
КурганВики это будет выглядеть следующим образом:
+
Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
  | <pre>{| border=1
 
  | <pre>{| border=1
Строка 157: Строка 159:
 
|Исходный код:
 
|Исходный код:
 
|&nbsp;
 
|&nbsp;
КурганВики это будет выглядеть следующим образом:
+
Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
  | <pre>{| class="standard"
 
  | <pre>{| class="standard"
Строка 200: Строка 202:
 
|Для последней таблицы можно написать так:
 
|Для последней таблицы можно написать так:
 
|&nbsp;
 
|&nbsp;
КурганВики это будет выглядеть следующим образом:
+
Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
|
 
|
Строка 250: Строка 252:
 
|Для последней таблицы можно написать так:
 
|Для последней таблицы можно написать так:
 
|&nbsp;
 
|&nbsp;
Википедии это будет выглядеть следующим образом:
+
Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
|
 
|
Строка 302: Строка 304:
 
|Исходный код:
 
|Исходный код:
 
|&nbsp;
 
|&nbsp;
КурганВики это будет выглядеть следующим образом:
+
Вики это будет выглядеть следующим образом:
 
|-
 
|-
 
| <pre>{| border=1
 
| <pre>{| border=1
Строка 400: Строка 402:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}</nowiki>
 
  |}</nowiki>
В КурганВики это будет выглядеть следующим образом:
+
В Вики это будет выглядеть следующим образом:
 
  {| border=1
 
  {| border=1
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Строка 431: Строка 433:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}</nowiki>
 
  |}</nowiki>
В Википедии это будет выглядеть следующим образом:
+
В Вики это будет выглядеть следующим образом:
 
  {| border=1
 
  {| border=1
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Строка 461: Строка 463:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}</nowiki>
 
  |}</nowiki>
В Википедии это будет выглядеть следующим образом:
+
В Вики это будет выглядеть следующим образом:
 
  {| border=1 bgcolor=#66FFFF
 
  {| border=1 bgcolor=#66FFFF
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Строка 666: Строка 668:
 
  |Ячейка 4
 
  |Ячейка 4
 
  |}
 
  |}
 +
 +
== С возможностью сортировки данных ==
 +
{| class="standard sortable" border=1
 +
|-
 +
|Учитель||Студент||Школьник
 +
|-
 +
|Иван Иванович Иванов|| 1 || 2
 +
|-
 +
|Петров Иванович Иванов|| 2 || 1
 +
|}
 +
 +
Пример: 
 +
 +
<nowiki>{| class="standard sortable" border=1
 +
|- 
 +
|Учитель||Студент||Школьник
 +
|-
 +
|Иван Иванович Иванов|| 1 || 2 
 +
|-
 +
|Петров Иванович Иванов|| 2 || 1
 +
|} </nowiki>
  
 
== Ширина таблицы и столбцов ==
 
== Ширина таблицы и столбцов ==
Строка 769: Строка 792:
 
  Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
 
  Температура воды    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

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