Difference between revisions of "Help:Таблицы"

From Wiki4Intranet
Jump to: navigation, search
m (→‎Выравнивание содержимого ячейки)
 
(One intermediate revision by one other user not shown)
Line 148: Line 148:
 
Вид рамки, как и другие параметры таблицы, можно указать сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.
 
Вид рамки, как и другие параметры таблицы, можно указать сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.
  
−
Однако, вместо <tt>border=1</tt> рекомендуется опять-таки просто использовать <tt>class=wikitable</tt> — выглядит куда симпатичнее.
+
Однако, вместо <tt>border=1</tt> рекомендуется опять-таки просто использовать <tt>class=wikitable</tt> — выглядит куда симпатичнее.
  
 
'''Пример:'''
 
'''Пример:'''
Line 295: Line 295:
 
  |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 
  |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 
  |}
 
  |}
 +
 +
=== Выравнивание содержимого ячейки ===
 +
 +
Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: <tt>text-align</tt> и <tt>vertical-align</tt>.
 +
<tt>text-align</tt> можно указать в таблице, строке или отдельных ячейках, тогда как <tt>vertical-align</tt> можно задать только отдельным строкам или ячейкам.
 +
 +
{| style="width:100%"
 +
! style="width: 50%;"|Вы вводите
 +
! style="width: 50%;"|Вы получаете
 +
|-
 +
| style="padding: 5px;"|
 +
<pre>
 +
{| class="wikitable"
 +
|- style="vertical-align:top;"
 +
| style="height:100px; width:100px; text-align:left;" | A
 +
| style="height:100px; width:100px; text-align:center;" | B
 +
| style="height:100px; width:100px; text-align:right;" | C
 +
|- style="vertical-align:middle;"
 +
| style="height:100px; width:100px; text-align:left;" | D
 +
| style="height:100px; width:100px; text-align:center;" | E
 +
| style="height:100px; width:100px; text-align:right;" | F
 +
|- style="vertical-align:bottom;"
 +
| style="height:100px; width:100px; text-align:left;" | G
 +
| style="height:100px; width:100px; text-align:center;" | H
 +
| style="height:100px; width:100px; text-align:right;" | I
 +
|}
 +
</pre>
 +
| style="padding: 5px;"|
 +
{| class="wikitable"
 +
|- style="vertical-align:top;"
 +
| style="height:100px; width:100px; text-align:left;" | A
 +
| style="height:100px; width:100px; text-align:center;" | B
 +
| style="height:100px; width:100px; text-align:right;" | C
 +
|- style="vertical-align:middle;"
 +
| style="height:100px; width:100px; text-align:left;" | D
 +
| style="height:100px; width:100px; text-align:center;" | E
 +
| style="height:100px; width:100px; text-align:right;" | F
 +
|- style="vertical-align:bottom;"
 +
| style="height:100px; width:100px; text-align:left;" | G
 +
| style="height:100px; width:100px; text-align:center;" | H
 +
| style="height:100px; width:100px; text-align:right;" | I
 +
|}
 +
|}
  
 
=== Объединённые ячейки ===
 
=== Объединённые ячейки ===
Line 541: Line 584:
 
  Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
 
  Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
  
−
[[Category:Справка]]
+
<noinclude>[[Category:Справка]]</noinclude>
−
{{replicate-from-custiswiki-to-lib}}
+
−
{{replicate-from-custiswiki-to-smwiki}}
+
−
{{replicate-from-custiswiki-to-4intranet}}
+

Latest revision as of 10:38, 27 October 2016

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

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

Расширение SimpleTable

Простейший способ с минимумом «шумовых» символов и с соблюдением модели «строка таблицы=строка текста» — это использование расширения SimpleTable и тега «tab».

Note.svg Этот же способ удобно применять для копипасты простых таблиц из Excel’я и подобных программ — нужно только написать <tab sep=tab>. Если, однако, таблица содержит объединённые ячейки или специфичные стили ячеек, то способ не подходит, и нужно смотреть в сторону #Импорт таблиц из внешних приложений в вики-синтаксис.

Например, 

<tab class=wikitable sep=spaces head=top>
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
Дневная_температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная_температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные_часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые_дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура_воды     19     18      18    18  19   20    21     23    20      18      18     18
</tab>
Месяцы:январьфевральмартапрельмайиюньиюльавгустсентябрьоктябрьноябрьдекабрь
Дневная_температура212122232527292826242220
Ночная_температура151515161717181716151514
Солнечные_часы/день667899987766
Дождливые_дни/месяц643221002567
Температура_воды191818181920212320181818

Атрибуты тега «tab», обрабатываемые самим SimpleTable:

sep
Символ-сепаратор колонок:
tab
символ табуляции
space
пробел
spaces
один или несколько пробелов или символов табуляции
comma
запятая
bar
вертикальная черта «|»
Другие
Есть возможность определить как разделитель любую последовательность символов. Скажем, sep="%%" разобьёт строчку по двойному символу процента.
head
этот атрибут, если есть, указывает, где распологается заголовок таблицы.
top
верхняя запись
left
первая колонка
topleft
и верхняя запись и первая (левая) колонка таблицы.

Также принимаются все атрибуты, которые можно указать в стандартном синтаксисе вики-таблиц, например:

class
Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам.
Чтобы не видеть убогие стандартные HTML-рамочки, рекомендуется всегда использовать class="wikitable".
Чтобы применить стиль к ячейкам, нужно определить класс .className td. Например, чтобы выровнять все ячейки по левому краю, нужно добавить на страницу следующий текст: 
<html><style>.classname td { text-align: right; }</style></html>
border
Толщина границ, попадает в HTML-атрибут таблицы. Подобные границы выглядят убого, лучше используйте класс simpletable.
cellpadding
Ширина поля между значениями ячеек и границами ячеек.

И наконец, добавляя к class слово sortable, можно делать динамически сортируемые таблицы:

EMP_NODEPT_NOPRO_NOEMP_BDATEEMP_SALEMP_BONUS
24411155195516000.0014000.00
2442120196014000.00NULL
24431NULL196016000.0013000.00
24521155NULL15000.0014000.00
24531234NULL17000.00NULL
24442177197017000.0016000.00

Таблицы в стандартном синтаксисе MediaWiki

Любая таблица в wiki-стиле начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается вертикальной черточки |, после которой пишется ее содержание.

Пример: Таблица с одной строкой пишется так: 

{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}

В Wiki4Intranet это будет выглядеть так:

Ячейка 1 Ячейка 2 Ячейка 3

Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.

Пример: Таблица в две строки пишется так: 

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}

В Wiki4Intranet это будет выглядеть так:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2

Таблица в три строки пишется так: 

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

А в Wiki4Intranet это будет выглядеть так:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

И так далее.

Табличные рамки

Вид рамки, как и другие параметры таблицы, можно указать сразу после {|. Не забудьте, что между ними и атрибутом должен быть пробел.

Однако, вместо border=1 рекомендуется опять-таки просто использовать class=wikitable — выглядит куда симпатичнее.

Пример: Для последней таблицы рамку можно создать так:

border=1 class=wikitable
Код 
{| border=1
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

{| class=wikitable
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
Результат
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Заголовки

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

Пример:

Для последней таблицы можно написать так: 

{| class=wikitable
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*3

Запись в одну строчку

Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их вертикальной чертой.

Пример: Для последней таблицы можно написать так: 

{| class=wikitable
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Первый столбец Второй столбец Третий столбец
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Выравнивание содержимого ячейки

Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: text-align и vertical-align. text-align можно указать в таблице, строке или отдельных ячейках, тогда как vertical-align можно задать только отдельным строкам или ячейкам.

Вы вводите Вы получаете 
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

Объединённые ячейки

В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.

Для слияния ячеек по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.

Пример: Вертикальное слияние двух ячеек пишется так: 

{| class=wikitable
 |Ячейка 1
 |rowspan=2 |Ячейка 2, растянута
 |Ячейка 3
 |-
 |Ячейка 4
 |Ячейка 5
 |}

Выглядеть это будет так:

Ячейка 1 Ячейка 2, растянута Ячейка 3
Ячейка 4 Ячейка 5

Для горизонтального слияния используется атрибут colspan=n.

Пример: 

{| class=wikitable
 |Ячейка 1
 |colspan=2 |Ячейка 2, растянута
 |-
 |Ячейка 3
 |Ячейка 4
 |Ячейка 5
 |}

Выглядит это так:

Ячейка 1 Ячейка 2, растянута
Ячейка 3 Ячейка 4 Ячейка 5

«Раскраска» таблиц

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

  • для отдельного слова — <font color="#ABCDEF">Teкст</font>;
  • для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>,

где «ABCDEF» — индекс цвета в Таблице цветов. 

Пример:
Для "раскраски" текста пишут так:
{| class=wikitable
 |Ячейка 1*1
 |Здесь цветное только <font color="#FF00FF">одно</font> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33CC66">А здесь выделен цветом длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Ячейка 1*1 Здесь цветное только одно слово. Ячейка 3*1
Ячейка 1*2 Ячейка 2*2
А здесь выделен цветом длинный-длинный абзац.
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

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

Пример:
Для "раскраски" одной ячейки пишется так:
{| class=wikitable
 |Ячейка 1*1
 |bgcolor=#FFCC00|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor=#CCFF00|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Wiki4Intranet это будет выглядеть следующим образом:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Вложенные таблицы

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

Пример:
{| border=1
 |Ячейка 1
 |
 {| border=2
 |Ячейка A
 |-
 |Ячейка B
 |}
 |Ячейка 3
 |}

Выглядеть это будет так:

Ячейка 1
Ячейка A
Ячейка B
Ячейка 3

Название таблицы

Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами. 

Пример:
{| border=1
 |+ Очень длинное-длинное название таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}

Выглядеть это будет так:

Очень длинное-длинное название таблицы.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Ширина таблицы

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

Пример:
{| border=1 width=75%
 |+Таблица 1
 |Ячейка 1*1 - long - long- long- long- long
 |Ячейка 1*2
 |-
 |Ячейка 1*3
 |Ячейка 1*4
 |}
{| border=1 width=75%
 |+Таблица 2
 |Ячейка 2*1
 |Ячейка 2*2
 |-
 |Ячейка 2*3
 |Ячейка 2*4
 |}

Выглядеть это будет так:

Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 2
Ячейка 2*1 Ячейка 2*2
Ячейка 2*3 Ячейка 2*4

Импорт таблиц из внешних приложений в вики-синтаксис

Иногда возникает задача импорта сложных таблиц из Office-приложений (MS Word, MS Excel, Open Office).

«Сложные» таблицы — это таблицы, имеющие различные стили ячеек и/или объединённые ячейки.

С помощью wikEd — просто, но некрасиво

  1. Используем Firefox, Chrome или Safari.
  2. Включаем wikEd, если оный выключен (кнопочка с карандашом в правом верхнем углу страницы).
  3. Делаем Copy-Paste таблицы в статью.
  4. Нажимаем кнопку [W] — Wikify, выглядит она так: WikEd wikify.png.

Ручками — сложнее, но красивее

Нужно:

  • добиться сохранения таблицы в HTML-формате (например, скопировать таблицу из MS Excel в MS Word, сохранить в формате «web-page filtered»).
  • «Почистить» таблицу от лишних тэгов и атрибутов с помощью программы Tidy. Примерный вызов Tidy для HTML таблицы из сохраненной из «MS Word» следующий:
tidy -raw -i -m -wrap 256 -bare --word-2000 yes %1
  • Вставить полученную (очищенную и отформатированную) HTML-таблицу в статью.

Таблицы в машинописном стиле без форматирования

Последний способ создать таблицу — это написать ее в машинописном стиле, с помощью преформатированных блоков. Столбцы и общий вид форматируются визуально. Например: 

                                       Климатическая таблица

Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
--------------------------------------------------------------------------------------------------
Дневная температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура воды     19     18      18    18  19   20    21     23    20      18      18     18
Retrieved from "https://wiki.4intra.net/index.php?title=Help:Таблицы&oldid=7746"