Yago: Новая страница: «Стандартное оформление таблиц в ЭБФ достигается использованием …»

2010-08-22T16:31:18Z

Новая страница: «Стандартное оформление таблиц в ЭБФ достигается использованием …»

Новая страница

Стандартное оформление [[ЭБФ:Как делать таблицы|таблиц]] в ЭБФ достигается использованием нескольких стандартных [[Каскадная таблица стилей|CSS]] классов.

== Классы оформления таблиц ==

=== wikitable ===
<div style="float:right; margin-left:1em; font-size:90%">
[[svn:trunk/phase3/skins/common/shared.css|shared.css]]:
<syntaxhighlight lang="css">
table.wikitable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
.wikitable th,
.wikitable td {
border: 1px #aaa solid;
padding: 0.2em;
}
.wikitable th {
background: #f2f2f2;
text-align: center;
}
.wikitable caption {
font-weight: bold;
}
</syntaxhighlight>
</div>
Создаёт таблицу с тонкими границами между всеми ячейками, сероватым цветом фона и серыми заголовками. Универсальный класс, определёный прямо в движке [[MediaWiki]].

{| cellspacing="15" style="background-color:transparent"
|<pre><nowiki>
{| class="wikitable"
|-
!Заголовок 1||Заголовок 2
|-
|Ячейка 1*1||Ячейка 2*1
|-
|Ячейка 1*2||Ячейка 2*2
|-
|Ячейка 1*3||Ячейка 2*3
|}
</nowiki></pre>

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

|}

=== standard ===
Похож на <tt>wikitable</tt>, но имеет следующие отличия:
* без цвета фона, то есть таблица обычно имеет белый фон страницы;
* другой цвет заголовочных ячеек;
* ячейки более узкие по вертикали;
* отсутствие отступов вокруг таблицы.

{| cellspacing="15" style="background-color:transparent"
|<pre><nowiki>
{| class="standard"
|-
!Заголовок 1||Заголовок 2
|-
|Ячейка 1*1||Ячейка 2*1
|-
|Ячейка 1*2||Ячейка 2*2
|-
|Ячейка 1*3||Ячейка 2*3
|}
</nowiki></pre>
|
{| class="standard"
|-
!Заголовок 1||Заголовок 2
|-
|Ячейка 1*1||Ячейка 2*1
|-
|Ячейка 1*2||Ячейка 2*2
|-
|Ячейка 1*3||Ячейка 2*3
|}
|}

=== wide ===
Отличается от <code>standard</code> только тем, что растягивает таблицу на всю ширину страницы.

<pre style="width:50%">
{| class="wide"
...
</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"

|просто <code>border</code>
<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
|}
|}

== Классы оформления ячеек ==
{| class="simple" border="1" style="float:right; margin-left:2em"
|-
! ||заголовок||обычная ячейка
|--
!'''highlight'''
!class="highlight" |
|class="highlight"|
|--
!'''bright'''
!class="bright" |
|class="bright" |
|--
!'''shadow'''
!class="shadow" |
|class="shadow" |
|--
!'''dark'''
!class="dark" |
|class="dark" |
|}

Также в ЭБФ есть два класса подсветки и два типа затенения отдельных ячеек, при этом классы подсветки придают разные цвета заголовочным «!» и обычным «|» ячейкам.

Эти классы можно добавлять к строке для подсветки сразу всех ячеек строки.
<pre style="width:20em">
|- class="bright"
| ...
| ...
</pre>

Или к отдельно взятой ячейке; если нужно просто отменить цвет, заданный в строке, используйте класс <tt>transparent</tt>.
<pre style="width:20em">
|-
|class="bright"| ...
|class="highlight"| ...
</pre>

Например:
{| class="wikitable" style="font-family:monospace"
|-
|width=20%| 
|width=20%| 
|width=20%| 
|width=20%| 
|width=20%| 
|-class=dark
|colspan=2| |-class="dark"
| 
| 
|class=highlight| |class="highlight"
|-class=bright
|colspan=2| |-class="bright"
| 
| 
|class=transparent| |class="transparent"
|}

Для заголовков рекомендуется использовать подсветку <code>highlight</code>, при необходимости выделить более важный заголовок — <code>bright</code>. Если есть необходимость понизить важность заголовка, можно использовать затенение.

Для выделения групп обычных ячеек рекомендуется использовать затенение (сначала <code>shadow</code>, при необходимости — <code>dark</code>). Если нужно выделить одну-две ячейки, можно использовать подсветку.

Если в какой-то ячейке требуется задать определённый цвет фона, задавайте его вот так: <code>style="background-color: ''цвет'';"</code> (см. [[ЭБФ:Таблица цветов|таблицу цветов]]). Рекомендуется использовать эту возможность ''только'' если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.

{|table class="wikitable collapsible collapsed"
!Проверка классов ячеек в вашем браузере  
|-
|Эти таблицы предназначены для проверки того, что описанные выше классы правильно обрабатываются вашим браузером. В левых столбцах использован указанный класс, в правых цвет задан стилем оформления прямо в коде страницы. Цвета слева и справа должны совпадать. 

{|class="standard" style="float:left; margin:10px"
|-
|colspan="2" align="center"|ячейка
|-
| 
|style="background:#FFFFFF"|#FFFFFF
|-
|class="highlight"|highlight
|style="background:#FFFFEE"|#FFFFEE
|-
|class="bright"|bright
|style="background:#FFEECC"|#FFEECC
|-
|class="shadow"|shadow
|style="background:#F0F0F0"|#F0F0F0
|-
|class="dark"|dark
|style="background:#CCCCCC"|#CCCCCC
|}

{|class="standard" style="float:left; margin:10px"
|-
|colspan="2" align="center"|ячейка в строке
|-
| 
|style="background:#FFFFFF"|#FFFFFF
|-class="highlight"
|highlight
|style="background:#FFFFEE"|#FFFFEE
|-class="bright"
|bright
|style="background:#FFEECC"|#FFEECC
|-class="shadow"
|shadow
|style="background:#F0F0F0"|#F0F0F0
|-class="dark"
|dark
|style="background:#CCCCCC"|#CCCCCC
|}

{|class="standard" style="float:left; margin:10px"
|colspan="2" align="center"|заголовок
|-
! 
!bgcolor=#EEEEFF|#EEEEFF
|-
!class="highlight"|highlight
!style="background:#EEEEFF"|#EEEEFF
|-
!class="bright"|bright
!style="background:#CCCCFF"|#CCCCFF
|-
!class="shadow"|shadow
!style="background:#F0F0F0"|#F0F0F0
|-
!class="dark"|dark
!style="background:#CCCCCC"|#CCCCCC
|}

{|class="standard" style="float:left; margin:10px"
|colspan="2" align="center"|заголовок в строке
|-
! 
!bgcolor=#EEEEFF|#EEEEFF
|-class="highlight"
!highlight
!style="background:#EEEEFF"|#EEEEFF
|-class=bright
!bright
!style="background:#CCCCFF"|#CCCCFF
|-class="shadow"
!shadow
!style="background:#F0F0F0"|#F0F0F0
|-class="dark"
!dark
!style="background:#CCCCCC"|#CCCCCC
|}
|}

== Kлассы интерактивности таблиц ==
Эти дополнительные классы добавляют таблицам интерактивность с помощью [[JavaScript]].

=== collapsible ===
{| class="wikitable collapsible" style="float:right; margin-left:2em"
!colspan="3"|Тема
|-
!Заголовок 1||Заголовок 2||Заголовок 3
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|}
Позволяет «сворачивать» таблицу, оставляя лишь заголовки, например <code>{| class="wikitable '''collapsible'''"</code>

Подробнее см. [[ЭБФ:Сворачивающиеся блоки#Таблица|Википедия:Сворачивающиеся блоки]].

=== sortable ===
Позволяет сортировать столбцы таблицы. 
Чтобы сделать ''столбец'' несортируемым, добавьте класс '''unsortable''' к выбранной ячейке в заголовке таблицы.

{|class="transparent"
|
<nowiki>
{| class="standard </nowiki>'''sortable'''<nowiki>"
|-
!Латиница||Кириллица||</nowiki>'''class="unsortable"'''<nowiki>|Цифры
|-
| D || Г || 3
|-
| E || Щ || 2
|-
| F || Б || 11
|}</nowiki>

|width="40"|

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

Чтобы сделать ''последнюю строку'' в таблице несортируемой, добавте к ней класс '''sortbottom'''.
{|class="transparent"
|
<nowiki>
{|class="wikitable </nowiki>'''sortable'''<nowiki>"
!Имя!!Число
|-
|Юрий||1.85
|-
|Андрей||1.89
|-
|Сергей||1.72
|-</nowiki>class="sortbottom"<nowiki>
|''Среднеe:''||'''1.82'''
|}</nowiki>
|width=40|
|
{|class="wikitable sortable"
!Имя!!Число
|-
|Юрий||1.85
|-
|Андрей||1.89
|-
|Сергей||1.72
|-class="sortbottom"
|''Среднеe:''||'''1.82'''
|}
|}

Тип сортировки столбца определяется каждый раз заново при нажатии на кнопку сортировки и зависит от текущего содержимого самой верхней ячейки. К примеру, если в этой ячейке пусто, то столбец будет отсортирован как массив строк (где «8» > «122») несмотря на содержимое следующих ячеек. Это исправляется добавлением в начало ячейки невидимого значения для сортировки, например <code>0 </code>

== См. также ==
* [[ЭБФ:Как делать таблицы]]
* [http://meta.wikimedia.org/wiki/%D0%9F%D0%BE%D0%BC%D0%BE%D1%89%D1%8C:%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B Подробное объяснение вики-форматирования таблиц]
* [[ЭБФ:Колонки]]

[[Категория:ЭБФ:Справка|*]]

ЭБФ:Оформление таблиц - История изменений

Yago: Новая страница: «Стандартное оформление таблиц в ЭБФ достигается использованием …»