Версия для слабовидящих

Как делать таблицы — различия между версиями

Материал из Ярославский педагогический университет
Перейти к: навигация, поиск
(Создана новая страница размером == Таблицы == Для единообразного оформления статей рекомендуется использова...)
 
(→‎Выделение ячеек)
 
(не показаны 5 промежуточные версии 2 участников)
Строка 1: Строка 1:
 +
{{Руководства}}
 
== Таблицы ==
 
== Таблицы ==
−
Для единообразного оформления статей рекомендуется использовать в общих случаях таблицы класса [[Справка:Оформление таблиц#class="standard"|<code>standard</code>]]. Оформление таблиц для специальных случаев приведено в статье «[[Справка:Оформление таблиц]]»; а в статье «[http://ru.wikipedia.org/wiki/Википедия:Таблицы Справка:Таблицы]» дано подробное описание составления самих таблиц.
+
Для единообразного оформления статей рекомендуется использовать в общих случаях таблицы класса [[Как делать таблицы#class="standard"|<code>standard</code>]]. Оформление таблиц для специальных случаев приведено в этой статье; а в статье «[http://ru.wikipedia.org/wiki/Википедия:Таблицы Википедия:Таблицы]» дано подробное описание составления самих таблиц.
 +
 
 +
== Классы оформления таблиц ==
 +
 
 +
Все нижеперечисленные классы добавляют небольшое пустое расстояние слева и справа к каждой ячейке  <!-- (<code>padding-left:0.2em; padding-right:0.2em</code>).-->
 +
 
 +
=== wikitable ===
 +
Стандартный класс, создающий таблицу с тонкими границами между всеми ячейками и с подсвеченными заголовками. Также добавляет вертикальные отступы  внутри ячеек  <!-- (<code>padding-top:0.2em; padding-bottom:0.2em</code>)-->.
 +
 
 +
{| cellspacing="15" style="background-color:transparent"
 +
|<pre><nowiki>
 +
{| class="wikitable"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 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||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
=== class="standard" ===
 +
Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр <code>border</code> тоже необязателен.
 +
 
 +
{| cellspacing="20"
 +
|<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
 +
|}
 +
|}
 +
 
 +
=== class="wide" ===
 +
Класс <code>wide</code> отличается от класса <code>standard</code> только тем, что он растягивает таблицу на всю ширину окна браузера.
 +
 
 +
<pre><nowiki>
 +
{| class="wide"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</nowiki></pre>
 +
 
 +
{| 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" ===
 +
 
 +
Заголовки не подсвечиваются, но изменяется вид рамки. Сравните:
 +
*просто с атрибутом <code>border</code>:
 +
 
 +
{| cellpadding="15"
 +
|<pre>
 +
{| border=1
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}</pre>
 +
|
 +
{| border=1
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
*с добавлением класса <code>simple</code>:
 +
{| cellpadding="15"
 +
|<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
 +
|}</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="tiles" ===
 +
 
 +
Таблица без линий сетки, с автоматической подсветкой заголовков и затенением обычных ячеек.
 +
 
 +
{| cellspacing="20"
 +
|<pre><nowiki>
 +
{| class="tiles"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
</nowiki></pre>
 +
|
 +
{| 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" ===
 +
Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю <code>standard</code>).
 +
 
 +
{| cellspacing="20"
 +
|<pre><nowiki>
 +
{| class="standard collapsible"
 +
|-
 +
!Заголовок 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 collapsible"
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
{| cellspacing="20"
 +
|<pre><nowiki>
 +
{| class="standard collapsible" style="float:right; margin-left:2em"
 +
!colspan="3"|Тема
 +
|-
 +
!Заголовок 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 collapsible" style="float:right;"
 +
!colspan="3"|Тема
 +
|-
 +
!Заголовок 1||Заголовок 2||Заголовок 3
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
|}
 +
 
 +
Чтобы таблица была по умолчанию свёрнутой, надо добавить класс <code>collapsed</code>.
 +
 
 +
{| cellspacing="20"
 +
|<pre><nowiki>
 +
{| 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
 +
|}</nowiki></pre>
 +
|
 +
{| 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" ===
 +
Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю <code>standard</code>).
 +
 
 +
{| cellspacing="20"
 +
|<pre><nowiki>
 +
{| class="standard sortable"
 +
|-
 +
!Латиница||Кириллица||Цифры
 +
|-
 +
| D || Г || 3
 +
|-
 +
| E || Щ || 2
 +
|-
 +
| F || Б || 11
 +
|}</nowiki></pre>
 +
|
 +
{| class="standard sortable"
 +
|-
 +
!Латиница||Кириллица||Цифры
 +
|-
 +
| D || Г || 3
 +
|-
 +
| E || Щ || 211
 +
|-
 +
| F || Б || 11
 +
|}
 +
|}
 +
 
 +
== Выделение ячеек ==
 +
 
 +
Любую ячейку таблицы или всю строку можно подсветить или затенить, для этого нужно для ячейки или строки задать параметр <code>class="тип_выделения"</code>.
 +
 
 +
Существуют два стандартных класса подсветки и два типа затенения.
 +
 
 +
{| class="simple" border=1
 +
|-
 +
! ||для заголовка|| для обычной ячейки
 +
|--
 +
!highlight
 +
!class="highlight" |
 +
|class="highlight"|
 +
|--
 +
!bright
 +
!class="bright" |
 +
|class="bright" |
 +
|--
 +
!shadow
 +
!class="shadow" |
 +
|class="shadow" |
 +
|--
 +
!dark
 +
!class="dark" |
 +
|class="dark" |
 +
|}
 +
 
 +
Для того чтобы сделать фон ячейки прозрачным, используйте <code>class="transparent"</code>.
 +
 
 +
* Для заголовков рекомендуется использовать подсветку <code>highlight</code>, при необходимости выделить более важный заголовок — <code>bright</code>. Если есть необходимость понизить важность заголовка, можно использовать затенение или стиль <code>normal</code>.
 +
* Для выделения групп обычных ячеек рекомендуется использовать затемнение (сначала <code>shadow</code>, при необходимости — <code>dark</code>). Если нужно выделить одну-две ячейки, можно использовать подсветку.
 +
 
 +
<!------категории------->
 +
[[категория:Образовательные ресурсы]]

Текущая версия на 10:09, 12 сентября 2017

Написание статей Написание статей
Техническая справка
Внешняя справка

Таблицы

Для единообразного оформления статей рекомендуется использовать в общих случаях таблицы класса standard. Оформление таблиц для специальных случаев приведено в этой статье; а в статье «Википедия:Таблицы» дано подробное описание составления самих таблиц.

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

Все нижеперечисленные классы добавляют небольшое пустое расстояние слева и справа к каждой ячейке

wikitable

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

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

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

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
|}
Заголовок 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
|}
Заголовок 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
|}
Заголовок 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
|}
Заголовок 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
|}
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3 
 
{| class="standard collapsible" style="float:right; margin-left:2em"
!colspan="3"|Тема
|-
!Заголовок 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

Чтобы таблица была по умолчанию свёрнутой, надо добавить класс 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
|}
Латиница Кириллица Цифры
D Г 3
E Щ 211
F Б 11

Выделение ячеек

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

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

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

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

  • Для заголовков рекомендуется использовать подсветку highlight, при необходимости выделить более важный заголовок — bright. Если есть необходимость понизить важность заголовка, можно использовать затенение или стиль normal.
  • Для выделения групп обычных ячеек рекомендуется использовать затемнение (сначала shadow, при необходимости — dark). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Источник — «https://yspu.org/index.php?title=Как_делать_таблицы&oldid=83479»