НовоВики. «Мой Новосибирск родной!»

Работа с таблицами — различия между версиями

Материал из Wiki.nios.ru
Перейти к: навигация, поиск
м (Защищена страница «Работа с таблицами» ([edit=sysop] (бессрочно) [move=sysop] (бессрочно)))
 
(не показаны 9 промежуточных версий 1 участника)
Строка 2: Строка 2:
 
<div style="background-color:#D7FFC7;font-size:1px;height:8px;border:1px solid #AAAAAA;-moz-border-radius-topright:0.5em;-moz-border-radius-topleft:0.5em;"></div>
 
<div style="background-color:#D7FFC7;font-size:1px;height:8px;border:1px solid #AAAAAA;-moz-border-radius-topright:0.5em;-moz-border-radius-topleft:0.5em;"></div>
 
<div style="border:1px solid #97BF87;border-top:0px solid white;padding:5px 5px 0 5px;margin-bottom:3ex;">
 
<div style="border:1px solid #97BF87;border-top:0px solid white;padding:5px 5px 0 5px;margin-bottom:3ex;">
Вернуться на [[Справка:Справка|справочную страницу]]</div>
+
Вернуться на [[Справка:Содержание|справочную страницу]]</div>
 
+
  
 
== Вставка таблицы ==
 
== Вставка таблицы ==
Строка 20: Строка 19:
 
  |Ячейка 3, 2
 
  |Ячейка 3, 2
 
  |}</nowiki>
 
  |}</nowiki>
 +
 
{|border="1"
 
{|border="1"
 
|Ячейка 1, 1
 
|Ячейка 1, 1
Строка 30: Строка 30:
 
|}
 
|}
  
Дополнительно: [http://ru.wikibooks.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8#.D0.A2.D0.B0.D0.B1.D0.BB.D0.B8.D1.86.D1.8B Справка по Таблицам в Wiki]
+
*Можно сделать рамку без двойных линий с помощью аттрибута <code>style="border-collapse:collapse"</code>.
 +
<nowiki>{|border="1" style="border-collapse:collapse"
 +
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}</nowiki>
  
==Использование цвета фона и текста ==
+
{|border="1" style="border-collapse:collapse"
{| class="standard" border=1 width=100%
+
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 
|-
 
|-
!<center>Необходимо</center>
+
|Ячейка 1, 2
!<center>Вики-разметка</center>
+
|Ячейка 2, 2
!<center>Получаем</center>
+
|Ячейка 3, 2
 
|-
 
|-
|Цветной текст
+
|Ячейка 1, 3
|<tt><nowiki><span style="color:#008000">слово или текст</span></nowiki></tt>
+
|Ячейка 2, 3
|<span style="color:#008000">слово или текст</span>
+
|Ячейка 3, 3
 +
|}
 +
 
 +
== Классы таблиц ==
 +
===Стандартная таблица===
 +
Таблицу можно оформить одним из стандартных оформлений с помощью аттрибута <code>class="standard"</code>.
 +
 
 +
<nowiki>{|class="standard"
 +
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}</nowiki>
 +
 
 +
{|class="standard"
 +
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 
|-
 
|-
|Фон ячейки таблицы
+
|Ячейка 1, 2
|<tt><nowiki>style="background-color:#FA8072;" | текст</nowiki></tt>
+
|Ячейка 2, 2
| style="background:#FA8072;"|текст
+
|Ячейка 3, 2
 +
|-
 +
|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 
|}
 
|}
 +
 +
===Широкие таблицы ===
 +
<nowiki>{|class="wide-frame"
 +
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}</nowiki>
 +
 +
{|class="wide-frame"
 +
|Ячейка 1, 1
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}
 +
 +
<nowiki>{|class="wide wikitable sortable"
 +
|Заголовок 1
 +
|Заголовок 2
 +
|-
 +
|1
 +
 +
|-
 +
|5
 +
 +
|-
 +
|7
 +
 +
|}</nowiki>
 +
 +
{|class="wide wikitable sortable"
 +
|Заголовок 1
 +
|Заголовок 2
 +
|-
 +
|1
 +
 +
|-
 +
|5
 +
 +
|-
 +
|7
 +
 +
|}
 +
 +
===Таблицы с возможностью сортировки===
 +
<nowiki>{| class="standard wikitable sortable"
 +
|Заголовок 1
 +
|Заголовок 2
 +
|-
 +
|1
 +
 +
|-
 +
|5
 +
 +
|-
 +
|7
 +
 +
|}</nowiki>
 +
 +
{| class="standard wikitable sortable"
 +
|Заголовок 1
 +
|Заголовок 2
 +
|-
 +
|1
 +
 +
|-
 +
|5
 +
 +
|-
 +
|7
 +
 +
|}
 +
 +
===Таблица в виде фрейма===
 +
<nowiki>{| class="frame sortable"
 +
|-
 +
!Латиница||Кириллица||class="unsortable"|Цифры
 +
|-
 +
| D || Г || 3
 +
|-
 +
| E || Щ || 2
 +
|-
 +
| F || Б || 11
 +
|}</nowiki>
 +
 +
{| class="standart frame sortable"
 +
|-
 +
!Латиница||Кириллица||class="unsortable"|Цифры
 +
|-
 +
| D || Г || 3
 +
|-
 +
| E || Щ || 2
 +
|-
 +
| F || Б || 11
 +
|}
 +
 +
== Заголовки ==
 +
 +
Чтобы содержимое ячейки оформлялось как заголовок колонки, вместо вертикальных чёрточек ставятся восклицательные знаки.
 +
 +
<nowiki>{|class="standard"
 +
!Первый столбец
 +
!Второй столбец
 +
!Третий столбец
 +
|-
 +
!Первая строчка
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
!Вторая строчка
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
!Третья строчка
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
!Первый столбец
 +
!Второй столбец
 +
!Третий столбец
 +
|-
 +
!Первая строчка
 +
|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
!Вторая строчка
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
!Третья строчка
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}
 +
 +
 +
== Объединение ячеек ==
 +
В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут <code>rowspan="n"</code>, где <code>n</code> — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
 +
 +
Вертикальное объединение двух ячеек пишется так:
 +
 +
<nowiki>{|class="standard"
 +
|Ячейка 1
 +
|rowspan="2" |Ячейка 2, объединяет два ряда таблицы
 +
|Ячейка 3
 +
|-
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
|Ячейка 1
 +
|rowspan="2" |Ячейка 2, объединяет два ряда таблицы
 +
|Ячейка 3
 +
|-
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}
 +
 +
Для объединения по горизонтали используется атрибут <code>colspan="n"</code>.
 +
 +
<nowiki>{|class="standard"
 +
|Ячейка 1
 +
|colspan="2" |Ячейка 2, объединяет два столбца
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
|Ячейка 1
 +
|colspan="2" |Ячейка 2, объединяет два столбца
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}
 +
 +
== Раскраска таблиц ==
 +
*Текст, находящийся в таблице, можно сделать цветным. См. раздел [[Таблица цветов HTML]].
 +
*Сделать цветную ячейку можно с помощью атрибута <code>style="background-color:цвет"</code>.
 +
 +
Раскраска одной ячейки:
 +
 +
<nowiki>{|class="standard"
 +
|Ячейка 1, 1
 +
|style="background-color:#FA8072"|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|style="background-color:green"|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
|Ячейка 1, 1
 +
|style="background-color:#FA8072"|Ячейка 2, 1
 +
|Ячейка 3, 1
 +
|-
 +
|Ячейка 1, 2
 +
|Ячейка 2, 2
 +
|Ячейка 3, 2
 +
|-
 +
|style="background-color:green"|Ячейка 1, 3
 +
|Ячейка 2, 3
 +
|Ячейка 3, 3
 +
|}
 +
 +
== Вложенные таблицы ==
 +
Для создания таблицы внутри уже имеющейся, надо вписать в нужном месте фигурную скобку с вертикальной черточкой, как при написании обычной таблицы. Обратите внимание, что горизонтальной чёрточки в начале строки быть ''не должно''. Не забудьте также закрыть внутреннюю таблицу.
 +
 +
<nowiki>{|class="standard"
 +
|Ячейка 1
 +
|
 +
{|class="standard"
 +
  |Ячейка А
 +
  |-
 +
  |Ячейка Б
 +
  |}
 +
|Ячейка 3
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
|Ячейка 1
 +
|
 +
{|class="standard"
 +
|Ячейка А
 +
|-
 +
|Ячейка Б
 +
|}
 +
|Ячейка 3
 +
|}
 +
 +
== Название таблицы ==
 +
Чтобы название таблицы было отцентрировано по её ширине, нужно после вертикальной чёрточки поставить знак <code>+</code>. Само название можно форматировать обычными wiki-атрибутами.
 +
 +
<nowiki>{|class="standard"
 +
|+Очень длинное-длинное название таблицы.
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}</nowiki>
 +
 +
{|class="standard"
 +
|+Очень длинное-длинное название таблицы.
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}
 +
 +
== Ширина таблицы ==
 +
Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, независимо от их содержания. Для фиксации ширины таблицы применяется атрибут <code>width</code>.
 +
 +
<nowiki>{|class="standard" width="75%"
 +
|+Таблица 1
 +
|Ячейка 1, длинная-длинная-длинная-длинная
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}
 +
 +
{|class="standard" width="75%"
 +
|+Таблица 2
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}</nowiki>
 +
 +
{|class="standard" width="75%"
 +
|+Таблица 1
 +
|Ячейка 1, длинная-длинная-длинная-длинная
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}
 +
 +
{|class="standard" width="75%"
 +
|+Таблица 2
 +
|Ячейка 1
 +
|Ячейка 2
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|}
 +
 +
По материалам "[http://ru.wikibooks.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8#.D0.A2.D0.B0.D0.B1.D0.BB.D0.B8.D1.86.D1.8B Справка по Таблицам в Wiki]".

Текущая версия на 17:05, 24 февраля 2012

Вернуться на справочную страницу

Содержание

[править] Вставка таблицы

  • Любая таблица в wiki-стиле начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается вертикальной чёрточки |, после которой пишется её содержание.
  • Для введения следующей строки используйте конструкцию |-. Таким образом можно вводить любое количество строк.
  • Возможно устанавливать толщину рамки атрибутом border="толщина_линии" (толщина линии указывается числом).

Таблица в две строки с границей пишется так:

{|border="1"
 |Ячейка 1, 1
 |Ячейка 2, 1
 |Ячейка 3, 1
 |-
 |Ячейка 1, 2
 |Ячейка 2, 2
 |Ячейка 3, 2
 |}
Ячейка 1, 1 Ячейка 2, 1 Ячейка 3, 1
Ячейка 1, 2 Ячейка 2, 2 Ячейка 3, 2
  • Можно сделать рамку без двойных линий с помощью аттрибута style="border-collapse:collapse".
{|border="1" style="border-collapse:collapse"
 |Ячейка 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="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

[править] Широкие таблицы

{|class="wide-frame"
 |Ячейка 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="wide wikitable sortable"
 |Заголовок 1
 |Заголовок 2
 |-
 |1
 |И
 |-
 |5
 |У
 |-
 |7
 |М
 |}
Заголовок 1 Заголовок 2
1 И
5 У
7 М

[править] Таблицы с возможностью сортировки

{| class="standard wikitable sortable"
 |Заголовок 1
 |Заголовок 2
 |-
 |1
 |И
 |-
 |5
 |У
 |-
 |7
 |М
 |}
Заголовок 1 Заголовок 2
1 И
5 У
7 М

[править] Таблица в виде фрейма

{| class="frame sortable"
 |-
 !Латиница||Кириллица||class="unsortable"|Цифры
 |-
 | D || Г || 3 
 |-
 | E || Щ || 2
 |-
 | F || Б || 11
 |}
Латиница Кириллица Цифры
D Г 3
E Щ 2
F Б 11

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

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

{|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


[править] Объединение ячеек

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

Вертикальное объединение двух ячеек пишется так:

{|class="standard"
 |Ячейка 1 
 |rowspan="2" |Ячейка 2, объединяет два ряда таблицы
 |Ячейка 3
 |- 
 |Ячейка 4
 |Ячейка 5
 |}
Ячейка 1 Ячейка 2, объединяет два ряда таблицы Ячейка 3
Ячейка 4 Ячейка 5

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

{|class="standard"
 |Ячейка 1 
 |colspan="2" |Ячейка 2, объединяет два столбца
 |-
 |Ячейка 3 
 |Ячейка 4
 |Ячейка 5
 |}
Ячейка 1 Ячейка 2, объединяет два столбца
Ячейка 3 Ячейка 4 Ячейка 5

[править] Раскраска таблиц

  • Текст, находящийся в таблице, можно сделать цветным. См. раздел Таблица цветов HTML.
  • Сделать цветную ячейку можно с помощью атрибута style="background-color:цвет".

Раскраска одной ячейки:

{|class="standard"
 |Ячейка 1, 1
 |style="background-color:#FA8072"|Ячейка 2, 1
 |Ячейка 3, 1
 |-
 |Ячейка 1, 2
 |Ячейка 2, 2
 |Ячейка 3, 2
 |-
 |style="background-color:green"|Ячейка 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="standard"
 |Ячейка 1
 |
 {|class="standard"
  |Ячейка А
  |-
  |Ячейка Б
  |}
 |Ячейка 3
 |}
Ячейка 1
Ячейка А
Ячейка Б
Ячейка 3

[править] Название таблицы

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

{|class="standard"
 |+Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}
Очень длинное-длинное название таблицы.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

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

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

{|class="standard" width="75%"
 |+Таблица 1
 |Ячейка 1, длинная-длинная-длинная-длинная
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}

 {|class="standard" width="75%"
 |+Таблица 2
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}
Таблица 1
Ячейка 1, длинная-длинная-длинная-длинная Ячейка 2
Ячейка 3 Ячейка 4
Таблица 2
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

По материалам "Справка по Таблицам в Wiki".

Персональные инструменты