Test — различия между версиями

Материал из synset
Перейти к: навигация, поиск
(Новая страница: «{{shortcut|ВП:ОТ}}{{TOC-Right}} Стандартное оформление таблиц в Викип…»)
 
(Реализация классов)
 
(не показано 5 промежуточных версий этого же участника)
Строка 344: Строка 344:
  
 
[[Категория:Википедия:Способы оформления статей|Таблицы]]
 
[[Категория:Википедия:Способы оформления статей|Таблицы]]
 +
 +
 +
<nowiki>
 +
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/FnKDany1_c4" frameborder="0" allowfullscreen></iframe>
 +
</nowiki>

Текущая версия на 09:07, 22 марта 2011

Шаблон:Shortcut

TOC

Стандартное оформление таблиц в Википедии достигается использованием нескольких стандартных CSS классов, указываемых в первой строке таблицы.

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

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

wikitable

Стандартный класс, создающий таблицу с тонкими границами между всеми ячейками и с подсвеченными заголовками. Также добавляет вертикальные отступы внутри ячеек (padding-top:0.2em; padding-bottom:0.2em).

 
{| class="wikitable"
|-
!Заголовок 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

standard

Наиболее часто встречающийся класс таблиц в русскоязычном разделе Википедии. Идентичен wikitable за исключением вертикальных отступов.

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

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


Классы оформления ячеек

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

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

для заголовка для обычной ячейки
highlight
bright
shadow
dark

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

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

Если в какой-то ячейке требуется задать определённый цвет фона, задавайте его вот так: style="background-color: цвет;" (см. таблицу цветов). Рекомендуется использовать эту возможность только если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.

Следующие таблицы (класса standard) предназначены для проверки того, что описанные выше классы правильно обрабатываются вашим браузером. В левых столбцах использован указанный класс, в правых цвет задан стилем оформления прямо в коде страницы. Цвета слева и справа должны совпадать.

ячейка
  #FFFFFF
highlight #FFFFEE
bright #FFEECC
shadow #F0F0F0
dark #CCCCCC
ячейка в строке
  #FFFFFF
highlight #FFFFEE
bright #FFEECC
shadow #F0F0F0
dark #CCCCCC
заголовок
  #EEEEFF
highlight #EEEEFF
bright #CCCCFF
shadow #F0F0F0
dark #CCCCCC
заголовок в строке
  #EEEEFF
highlight #EEEEFF
bright #CCCCFF
shadow #F0F0F0
dark #CCCCCC


Kлассы интерактивности таблиц

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

collapsible

Тема
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому классу, например {| class="standard collapsible"

Подробнее см. Википедия:Сворачивающиеся блоки.


sortable

Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому классу, например:

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

Чтобы сделать столбец несортируемым, добавьте класс unsortable к выбранной ячейке в заголовке таблицы. Подробнее см. m:Help:Sorting Шаблон:Ref-en.


Реализация классов

wikitable первоначально появился в английском разделе Википедии, был скопирован в несколько других разделов, и через несколько лет в rev:48842 был добавлен прямо в MediaWiki.

prettytable также существовал в английском разделе, и был идентичен wikitable за исключением цвета заголовка. В настоящее время признан устаревшим, и массово заменяется на wikitable ботом.

Остальные классы оформления таблиц и ячеек были придуманы и используются только в русскоязычном разделе Википедии, см. Common.css.

sortable и остальные классы сортировки определены в MediaWiki.

collapsible и остальные классы сворачивания присутствуют во многих проектах Фонда, но конкретная реализация может различаться, см. Common.js


<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/FnKDany1_c4" frameborder="0" allowfullscreen></iframe>