Оформление таблиц — различия между версиями
Материал из S.T.A.L.K.E.R. Inside Wiki
HikeR (обсуждение | вклад) м («Йцу» переименована в «Оформление таблиц»: сам стормозил чего-то...) |
(<<< aka_sektor) |
||
(не показаны 10 промежуточные версии 5 участников) | |||
Строка 1: | Строка 1: | ||
+ | __TOC__ | ||
+ | |||
При создании таблиц желательно придерживаться стандартного стиля оформления. В Вики это реализовано с помощью классов CSS. | При создании таблиц желательно придерживаться стандартного стиля оформления. В Вики это реализовано с помощью классов CSS. | ||
Достаточно при создании таблицы указать в первой строке (после символов <nowiki>{|</nowiki> ) параметр class="имя_класса" (где имя_класса — | Достаточно при создании таблицы указать в первой строке (после символов <nowiki>{|</nowiki> ) параметр class="имя_класса" (где имя_класса — | ||
одно из стандартных имён, перечисленных ниже) и таблица будет оформлена стандартным образом. | одно из стандартных имён, перечисленных ниже) и таблица будет оформлена стандартным образом. | ||
− | |||
== без использования class == | == без использования class == | ||
+ | Обычное использование: | ||
+ | {| cellspacing="10" | ||
+ | | | ||
+ | {| | ||
+ | |- | ||
+ | !Заголовок 1||Заголовок 2||Заголовок 3 | ||
+ | |- | ||
+ | |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 | ||
+ | |- | ||
+ | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |} | ||
+ | |<code> | ||
{| | {| | ||
|- | |- | ||
Строка 15: | Строка 30: | ||
|- | |- | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |} | ||
+ | </code> | ||
|} | |} | ||
Строка 20: | Строка 37: | ||
Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр border тоже необязателен. | Это наиболее часто встречающиеся таблицы. Такой стиль оформления желательно использовать для большинства таблиц, расположенных непосредственно в тексте статьи. Обратите внимание, что заголовки таблицы (которые создаются с помощью символа "!") подсвечены, для этого не нужно указывать никаких дополнительных параметров. Параметр border тоже необязателен. | ||
+ | {| cellspacing="10" | ||
+ | | | ||
+ | {| class="standard" | ||
+ | |- | ||
+ | !Заголовок 1||Заголовок 2||Заголовок 3 | ||
+ | |- | ||
+ | |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 | ||
+ | |- | ||
+ | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |} | ||
+ | |<pre><nowiki> | ||
{| class="standard" | {| class="standard" | ||
|- | |- | ||
Строка 29: | Строка 59: | ||
|- | |- | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |} | ||
+ | </nowiki></pre> | ||
|} | |} | ||
Строка 44: | Строка 76: | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
|} | |} | ||
+ | <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="simple" == | == class="simple" == | ||
Заголовки не подсвечиваются, но изменяется вид рамки. Сравните: | Заголовки не подсвечиваются, но изменяется вид рамки. Сравните: | ||
− | просто с атрибутом border: | + | *просто с атрибутом '''border''': |
+ | |||
+ | {| cellpadding="15" | ||
+ | | | ||
{| border=1 | {| border=1 | ||
|- | |- | ||
Строка 59: | Строка 107: | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
|} | |} | ||
− | с добавлением класса simple: | + | |<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> | ||
+ | |} | ||
+ | *с добавлением класса '''simple''': | ||
+ | {| cellpadding="15" | ||
+ | | | ||
{| class="simple" border=1 | {| class="simple" border=1 | ||
|- | |- | ||
Строка 70: | Строка 132: | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
|} | |} | ||
− | + | |<pre> | |
− | + | {| class="simple" border=1 | |
− | + | ||
− | + | ||
− | {| class=" | + | |
|- | |- | ||
!Заголовок 1||Заголовок 2||Заголовок 3 | !Заголовок 1||Заголовок 2||Заголовок 3 | ||
Строка 83: | Строка 142: | ||
|- | |- | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |}</pre> | ||
|} | |} | ||
− | == class="collapsible" | + | == class="collapsible" == |
Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard). | Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard). | ||
Строка 110: | Строка 170: | ||
|} | |} | ||
− | == class="sortable" | + | == class="sortable" == |
Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard). | Позволяет сортировать столбцы таблицы. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard). | ||
Строка 200: | Строка 260: | ||
== Ссылки == | == Ссылки == | ||
*Источник - [http://ru.wikipedia.org/wiki/Википедия:Оформление_таблиц Википедия:Оформление таблиц] | *Источник - [http://ru.wikipedia.org/wiki/Википедия:Оформление_таблиц Википедия:Оформление таблиц] | ||
− | + | [[Категория:Неоформленные статьи]] | |
− | [[Категория: | + |
Текущая версия на 00:46, 20 марта 2014
Содержание
При создании таблиц желательно придерживаться стандартного стиля оформления. В Вики это реализовано с помощью классов CSS.
Достаточно при создании таблицы указать в первой строке (после символов {| ) параметр class="имя_класса" (где имя_класса — одно из стандартных имён, перечисленных ниже) и таблица будет оформлена стандартным образом.
без использования 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 только тем, что он растягивает таблицу на всю ширину окна браузера.
Заголовок 1 | Заголовок 2 | Заголовок 3 |
---|---|---|
Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
{| 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="collapsible"
Позволяет «сворачивать» таблицу, оставляя лишь заголовки. Добавляется к какому-либо другому стилю (в приведённом ниже примере добавлен к стилю standard).
Заголовок 1 | Заголовок 2 | Заголовок 3 |
---|---|---|
Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
Чтобы таблица была по умолчанию свёрнутой, надо добавить класс 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).
Латиница | Кириллица | Цифры |
---|---|---|
D | Г | 3 |
E | Щ | 2 |
F | Б | 11 |
Выделение ячеек
Любую ячейку таблицы или всю строку можно подсветить или затенить, для этого нужно для ячейки или строки задать параметр class="тип_выделения".
Существуют два стандартных класса подсветки и два типа затенения.
для заголовка | для обычной ячейки | |
---|---|---|
highlight | ||
bright | ||
shadow | ||
dark |
Для того чтобы сделать фон ячейки прозрачным, используйте class="transparent".
- Для заголовков рекомендуется использовать подсветку highlight, при необходимости выделить более важный заголовок — bright. Если есть необходимость понизить важность заголовка, можно использовать затенение или стиль normal.
- Для выделения групп обычных ячеек рекомендуется использовать затенение (сначала shadow, при необходимости — dark). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Если в какой-то ячейке требуется задать определённый цвет фона, задавайте его вот так: style="background-color: цвет;"' (см. таблицу цветов). Рекомендуется использовать эту возможность только если необходим именно конкретный цвет, а не просто логическое выделение части ячеек.
Проверка возможностей:
Обычный заголовок | по умолчанию | highlight | bright | shadow | dark | transparent | красный |
---|---|---|---|---|---|---|---|
Подсвеченный заголовок (bright) | по умолчанию | highlight | bright | shadow | dark | transparent | красный |
Обычная строка | по умолчанию | highlight | bright | shadow | dark | transparent | красный |
Cтрока с затенением | по умолчанию | highlight | bright | shadow | dark | transparent | красный |
Ссылки
- Источник - Википедия:Оформление таблиц