Оформление таблиц

Материал из Wiki.

При создании таблиц желательно придерживаться стандартного стиля оформления. В Википедии это реализовано с помощью классов CSS.

Достаточно при создании таблицы указать в первой строке (после символов {| ) параметр class="имя_класса" (где имя_класса — одно из стандартных имён, перечисленных ниже) и таблица будет оформлена стандартным образом.

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

[править] 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
|}

[править] class="wide"

Класс 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
|}

[править] class="simple"

Заголовки не подсвечиваются, но изменяется вид рамки. Сравните:

• просто с атрибутом 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
|}

[править] class="tiles"

Таблица без линий сетки, с автоматической подсветкой заголовков и затенением обычных ячеек.

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

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

[править] class="collapsible"

Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard).

 

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

Чтобы таблица была по умолчанию свёрнутой, надо добавить класс collapsed.

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

[править] class="sortable"

Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard).

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

[править] Выделение ячеек

Любую ячейку таблицы или всю строку можно подсветить или затенить, для этого нужно для ячейки или строки задать параметр class="тип_выделения".

Существуют два стандартных класса подсветки и два типа затенения.

Для того чтобы сделать фон ячейки прозрачным, используйте class="transparent".

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