Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, т. е. информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала. Поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
Таблицы в машинописном стиле без форматирования
Простейший и быстрейший способ создать таблицу — это написать ее в машинописном стиле, с помощью преформатированных блоков.
Столбцы и общий вид форматируются визуально. Например:
Климатическая таблица
Месяцы: январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
Дневная температура 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
Расширение SimpleTable
Еще один простейший способ с минимумом «шумовых» символов и с соблюдением модели
«строка таблицы=строка текста», это использовать расширение SimpleTable и тег «tab».
Например,
<tab cellpadding="5" border=1 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
- вертикальная черта «|»
- head
- этот атрибут, если есть, указывает, где распологается заголовок таблицы.
- top
- верхняя запись
- left
- первая колонка
- topleft
- и верхняя запись и первая (левая) колонка таблицы.
Также принимаются все атрибуты, которые можно указать в стандартном синтаксисе вики-таблиц, например:
- class
- Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам. Чтобы применить стиль к ячейкам, нужно определить класс .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 |
Кстати, если вы хотите видеть что-то посимпатичнее уродливых стандартных HTML-рамочек, пропишите class="simpletable". Его также можно комбинировать с другими классами (например 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 |
Простейшая таблица
Любая таблица в 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=n, где «n» — толщина линии рамки.
Пример:
Для последней таблицы рамку можно создать так:
{| border=1
|Ячейка 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
!Первый столбец
!Второй столбец
!Третий столбец
|-
!Первая строчка
|Ячейка 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
|
Запись в одну строчку
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их вертикальной чертой.
Пример:
Для последней таблицы можно написать так:
{| border=1
!Первый столбец||Второй столбец||Третий столбец
|-
|Ячейка 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
|
Rowspanning и Colspanning
В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.
Для «растягивания» по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.
Пример:
Вертикальное «растягивание» на две ячейки пишется так:
{| border=1
|Ячейка 1
|rowspan=2 |Ячейка 2, растянута
|Ячейка 3
|-
|Ячейка 4
|Ячейка 5
|}
Выглядеть это будет так:
Ячейка 1
|
Ячейка 2, растянута
|
Ячейка 3
|
Ячейка 4
|
Ячейка 5
|
Для «растягивания» по горизонтали используется атрибут colspan=n.
Пример:
{| border=1
|Ячейка 1
|colspan=2 |Ячейка 2, растянута
|-
|Ячейка 3
|Ячейка 4
|Ячейка 5
|}
Выглядит это так:
Ячейка 1
|
Ячейка 2, растянута
|
Ячейка 3
|
Ячейка 4
|
Ячейка 5
|
«Раскраска» таблиц
Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
- для отдельного слова — <font color="#ABCDEF">Teкст</font>;
- для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>,
где «ABCDEF» — индекс цвета в Таблице цветов.
Пример:
Для "раскраски" текста пишут так:
{| border=1
|Ячейка 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» обозначает, как вы уже, наверное, догадались, индекс цвета в Таблице цветов.
Пример:
Для "раскраски" одной ячейки пишется так:
{| border=1
|Ячейка 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).
В таком случае, надо:
- добиться сохранения таблицы в 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-таблицу в статью.
Статья реплицируется в SMWiki, SBWiki, RDWiki, GZWiki, DPWiki, HRWiki, CBWiki, ORWiki.
Статья реплицируется в Wiki4IntraNet.