Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, т. е. информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала. Поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
Расширение SimpleTable
Простейший способ с минимумом «шумовых» символов и с соблюдением модели «строка таблицы=строка текста» — это использование расширения SimpleTable и тега «tab».
![Note.svg](/images/5/5f/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>
Месяцы: | январь | февраль | март | апрель | май | июнь | июль | август | сентябрь | октябрь | ноябрь | декабрь |
Дневная_температура | 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», обрабатываемые самим 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_NO | DEPT_NO | PRO_NO | EMP_BDATE | EMP_SAL | EMP_BONUS |
2441 | 1 | 155 | 1955 | 16000.00 | 14000.00 |
2442 | 1 | 20 | 1960 | 14000.00 | NULL |
2443 | 1 | NULL | 1960 | 16000.00 | 13000.00 |
2452 | 1 | 155 | NULL | 15000.00 | 14000.00 |
2453 | 1 | 234 | NULL | 17000.00 | NULL |
2444 | 2 | 177 | 1970 | 17000.00 | 16000.00 |
Таблицы в стандартном синтаксисе MediaWiki
Любая таблица в wiki-стиле начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается вертикальной черточки |, после которой пишется ее содержание.
Пример:
Таблица с одной строкой пишется так:
{|
|Ячейка 1
|Ячейка 2
|Ячейка 3
|}
В CustisWiki это будет выглядеть так:
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
Пример:
Таблица в две строки пишется так:
{|
|Ячейка 1*1
|Ячейка 2*1
|Ячейка 3*1
|-
|Ячейка 1*2
|Ячейка 2*2
|Ячейка 3*2
|}
В CustisWiki это будет выглядеть так:
Ячейка 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
|}
А в CustisWiki это будет выглядеть так:
Ячейка 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
|}
В CustisWiki это будет выглядеть следующим образом:
Первый столбец
|
Второй столбец
|
Третий столбец
|
Первая строчка
|
Ячейка 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
|}
В CustisWiki это будет выглядеть следующим образом:
Первый столбец |
Второй столбец |
Третий столбец
|
Ячейка 1*1 |
Ячейка 2*1 |
Ячейка 3*1
|
Ячейка 1*2 |
Ячейка 2*2 |
Ячейка 3*2
|
Ячейка 1*3 |
Ячейка 2*3 |
Ячейка 3*3
|
Объединённые ячейки
В 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
|}
В CustisWiki это будет выглядеть следующим образом:
Ячейка 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
|}
В CustisWiki это будет выглядеть следующим образом:
Ячейка 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
|}
Выглядеть это будет так:
Название таблицы
Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными 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 — просто, но некрасиво
- Используем Firefox, Chrome или Safari.
- Включаем wikEd, если оный выключен (кнопочка с карандашом в правом верхнем углу страницы).
- Делаем Copy-Paste таблицы в статью.
- Нажимаем кнопку [W] — Wikify, выглядит она так:
.
Ручками — сложнее, но красивее
Нужно:
- добиться сохранения таблицы в 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
Статья реплицируется в SMWiki, SBWiki, RDWiki, GZWiki, DPWiki, HRWiki, CBWiki, ORWiki, RAWiki, ITWiki, CRMWiki.