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

Материал из КинтВики
Перейти к: навигация, поиск
(Automatic page editing)
м
 
(не показано 6 промежуточных версий 1 участника)
Строка 1: Строка 1:
−
[[Категория:Public]]
+
[[Категория: Оформление материалов]]
−
[[Категория:Wiki]]
+
 
 
Предлагаются следующие шаблоны оформления:
 
Предлагаются следующие шаблоны оформления:
  
Строка 239: Строка 239:
 
  |Ячейка 5
 
  |Ячейка 5
 
  |}
 
  |}
−
{{Template:Replicate-from-kintwiki}}
+
 
 +
 
 +
<br>
 +
==Классы таблиц==
 +
 
 +
Источник: http://ru.wikipedia.org/wiki/Википедия:Оформление_таблиц
 +
 
 +
При [[Википедия:Как_делать_таблицы|создании таблиц]] желательно придерживаться стандартного стиля оформления. В Википедии это реализовано с помощью [[Каскадная таблица стилей|CSS]] классов, добавленных в файл [[Mediawiki:Common.css]].
 +
 
 +
Укажите в первой строке параметр <code>class="имя_класса"</code>, и таблица будет оформлена стандартным образом.
 +
 
 +
=== standard ===
 +
Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр <code>border</code> тоже необязателен.
 +
 
 +
{| cellspacing=15 style="background-color:transparent"
 +
|<pre><nowiki>
 +
{| class="standard"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
!Ячейка 1*1
 +
|Ячейка 2*1||Ячейка 3*1
 +
|-
 +
!Ячейка 1*2
 +
|Ячейка 2*2||Ячейка 3*2
 +
|-
 +
!Ячейка 1*3
 +
|Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</nowiki></pre>
 +
|
 +
{| class="standard"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
!Ячейка 1*1
 +
|Ячейка 2*1||Ячейка 3*1
 +
|-
 +
!Ячейка 1*2
 +
|Ячейка 2*2||Ячейка 3*2
 +
|-
 +
!Ячейка 1*3
 +
|Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
=== wide ===
 +
Отличается от <code>standard</code> только тем, что растягивает таблицу на всю ширину окна браузера.
 +
 
 +
<pre style="width:50%">
 +
{| class="wide"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</pre>
 +
 
 +
{| class="wide"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
 
 +
=== tiles ===
 +
 
 +
Отличается от <code>standard</code> отсутствием линий сетки и затенением обычных ячеек. Не используйте его для таблиц, к которым можно применить какой-нибудь из двух предыдущих стилей без потери наглядности. Примером оправданного применения может быть, например, таблица Менделеева.
 +
 
 +
{|class=transparent
 +
|<pre>
 +
{| class="tiles"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</pre>
 +
 
 +
|width=40|
 +
 
 +
|
 +
{| class="tiles"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
 
 +
=== simple ===
 +
Этот класс меняет только сетку границ между ячейками, делая её такой же как в <code>standard</code>, он имеет смысл только с ненулевым <code>border</code>. Сравните:
 +
 
 +
{| class=transparent
 +
 
 +
|просто border
 +
<pre>{| border=1</pre>
 +
{| border=1
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
 
 +
|width=40|
 +
 
 +
|с классом <code>simple</code>:
 +
<pre>{| class="simple" border=1</pre>
 +
 
 +
{| class="simple" border=1
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
 
 +
Все вышеперечисленные классы также добавляют небольшое пустое расстояние слева и справа к каждой ячейке (<code>padding-left:0.2em; padding-right:0.2em</code>).
 +
 
 +
 
 +
=== wikitable/prettytable ===
 +
Также поддерживаются классы wikitable/prettytable из английской Википедии. У этих классов пустое расстояние добавляется в каждую ячейку со всех сторон (<code>padding:0.2em</code>). В остальном <code>wikitable</code> практически идентичен <code>standard</code>, а <code>prettytable</code> отличается <span style="background:#f2f2f2; border:1px solid #AAAAAA; padding:0.2em">цветом заголовка</span> таблицы.
 +
 
 +
{| cellspacing=15 style="background-color:transparent"
 +
|<pre><nowiki>
 +
{| class="wikitable"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1
 +
|align=right|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</nowiki></pre>
 +
|
 +
{| class="wikitable"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1
 +
|align=right|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
{| cellspacing=15 style="background-color:transparent"
 +
|<pre><nowiki>
 +
{| class="prettytable"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</nowiki></pre>
 +
|
 +
{| class="prettytable"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}

Текущая версия на 00:48, 8 февраля 2011


Предлагаются следующие шаблоны оформления:

Оформление с выделением цветом

{| border="1" cellpadding="4" cellspacing="1" style="background:#F0F0F0;" 
|+'''Заголовок таблицы'''
!style="background:#80FFFF;" width=30%|Заголовок колонки 1
!style="background:#CCFFCC;" width=20%|Заголовок колонки 2
!style="background:#CCFFCC;" width=20%|Заголовок колонки 3
!style="background:#FFFFCC;" width=20%|Заголовок колонки 4

|-align="center"
| Строка 1
| 12
| 13
| 14

|-align="center"
| Строка 2
| 22
| 23
| 24

|-align="center" style="background:#CCFFCC;" 
| colspan=3 align="left" | Итог по таблице 
| style="background:#FF8080;"| 38

|}

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

Заголовок таблицы
Заголовок колонки 1 Заголовок колонки 2 Заголовок колонки 3 Заголовок колонки 4
Строка 1 12 13 14
Строка 2 22 23 24
Итог по таблице 38



Оформление с выделением дополнительными линиями контура таблицы

{| border="1" cellpadding="2" cellspacing="1" 
|+'''Регистр 1'''
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 1
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 2
! width="150" style="background:#C0C0C0;"| Ресурс 1
|- align="center"
| Значение 11 || Значение 12 || Ресурс 11
|- align="center"
| Значение 21 || Значение 22 || Ресурс 21
|}

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

Регистр 1
Измерение 1 Измерение 2 Ресурс 1
Значение 11 Значение 12 Ресурс 11
Значение 21 Значение 22 Ресурс 21



Простая таблица

{| border="1" cellpadding="2" cellspacing="1" 
|+'''Регистр 1'''
! style="background:#C0C0C0;"| Измерение 1
! style="background:#C0C0C0;"| Измерение 2
! style="background:#C0C0C0;"| Ресурс 1
|- align="center"
| Значение 11 || Значение 12 || Ресурс 11
|- align="center"
| Значение 21 || Значение 22 || Ресурс 21
|}

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

Регистр 1
Измерение 1 Измерение 2 Ресурс 1
Значение 11 Значение 12 Ресурс 11
Значение 21 Значение 22 Ресурс 21



Расположение двух таблиц по горизонтали

Для такого расположения можно использовать, как делается и в html, вложенные таблицы. При этом для внешней таблицы устанавливается свойство border=0

Например: 

{| border=0
|

{| border="1" cellpadding="2" cellspacing="1" 
|+'''Регистр 1'''
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 1
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 2
! width="150" style="background:#C0C0C0;"| Ресурс 1
|- align="center"
| Значение 11 || Значение 12 || Ресурс 11
|- align="center"
| Значение 21 || Значение 22 || Ресурс 21
|}
|| || || ||
{| border="1" cellpadding="2" cellspacing="1" 
|+'''Регистр 1'''
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 1
! width="150" style="background:#C0C0C0; border-bottom:2px solid black;"| Измерение 2
! width="150" style="background:#C0C0C0;"| Ресурс 1
|- align="center"
| Значение 11 || Значение 12 || Ресурс 11
|- align="center"
| Значение 21 || Значение 22 || Ресурс 21
|}

|}

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

Регистр 1
Измерение 1 Измерение 2 Ресурс 1
Значение 11 Значение 12 Ресурс 11
Значение 21 Значение 22 Ресурс 21
Регистр 1
Измерение 1 Измерение 2 Ресурс 1
Значение 11 Значение 12 Ресурс 11
Значение 21 Значение 22 Ресурс 21

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

Источник: http://ru.wikipedia.org/wiki/Википедия:Как_делать_таблицы

В 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



Классы таблиц

Источник: http://ru.wikipedia.org/wiki/Википедия:Оформление_таблиц

При создании таблиц желательно придерживаться стандартного стиля оформления. В Википедии это реализовано с помощью CSS классов, добавленных в файл Mediawiki:Common.css.

Укажите в первой строке параметр class="имя_класса", и таблица будет оформлена стандартным образом.

standard

Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр border тоже необязателен. 

 
{| class="standard" 
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
!Ячейка 1*1
|Ячейка 2*1||Ячейка 3*1
|-
!Ячейка 1*2
|Ячейка 2*2||Ячейка 3*2
|-
!Ячейка 1*3
|Ячейка 2*3||Ячейка 3*3
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

wide

Отличается от standard только тем, что растягивает таблицу на всю ширину окна браузера. 

{| class="wide" 
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|-
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

tiles

Отличается от standard отсутствием линий сетки и затенением обычных ячеек. Не используйте его для таблиц, к которым можно применить какой-нибудь из двух предыдущих стилей без потери наглядности. Примером оправданного применения может быть, например, таблица Менделеева. 

{| class="tiles"
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|-
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3


simple

Этот класс меняет только сетку границ между ячейками, делая её такой же как в standard, он имеет смысл только с ненулевым border. Сравните:

просто border 
{| border=1
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3
с классом simple: 
{| class="simple" border=1
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3


Все вышеперечисленные классы также добавляют небольшое пустое расстояние слева и справа к каждой ячейке (padding-left:0.2em; padding-right:0.2em).


wikitable/prettytable

Также поддерживаются классы wikitable/prettytable из английской Википедии. У этих классов пустое расстояние добавляется в каждую ячейку со всех сторон (padding:0.2em). В остальном wikitable практически идентичен standard, а prettytable отличается цветом заголовка таблицы. 

 
{| class="wikitable"
|-
!Заголовок 1||Заголовок 2||Заголовок 3 
|-
|Ячейка 1*1
|align=right|Ячейка 2*1
|Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|-
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3 
 
{| class="prettytable"
|-
!Заголовок 1||Заголовок 2||Заголовок 3 
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|-
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3
Источник — «http://wiki.kint.ru/index.php?title=Оформление_таблиц&oldid=22644»