Синтаксис использования таблиц

Для создания таблицы достаточно указать в начале и конце строки «||». Между этим двумя маркерами можно создавать произвольное количество ячеек, разделяя их «||». Например, ниже показана разметка для таблицы из 4 ячеек:

|| верхняя левая ячейка || верхняя правая ячейка ||
|| нижняя левая ячейка  || нижняя правая ячейка  ||

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

верхняя левая ячейка

верхняя правая ячейка

нижняя левая ячейка

нижняя правая ячейка

Атрибуты таблицы

Помимо повторения маркеров ячеек для получения объединённых ячеек, возможно указать ряд других атрибутов HTML-таблицы. Любые атрибуты могут располагаться между угловыми скобками <...> непосредственно после маркера ячейки. Например: ||<style"..."> содержимое ячейки ||

Стилей достаточно для задания произвольного внешнего вида таблицы. Достаточно использовать стили CSS и они будут включены в генерируемую разметку HTML:

  • <style="..."> — поместить информацию о стиле ячейки (td)

  • <rowstyle="..."> — поместить информацию о стиле ряда (tr)

  • <tablestyle="..."> — поместить информацию о стиле таблицы (table)

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

Ширина ячеек и таблицы:

  • <50%>: ширина ячейки (будет добавлено width: 50%; к стилю)

  • <width="50%">: то же самое

  • <tablewidth="100%">: ширину таблицы на 100% (сработает только в первом ряду таблицы)

Вики-подобная разметка имеет следующие опции:

  • <-2> — объединение ячеек в одной строке

  • <|2> — объединение ячеек в одном столбце

Выравнивание и расположение текста в ячейке:

  • <(> — выравнивание по левому краю (text-align: left;)

  • <:> — выравнивание по центру (text-align: center;)

  • <)> — выравнивание по правому краю (text-align: right;)

  • <^> — расположить текст в верхней части ячейки (vertical-align: top;)

  • <v> — расположить текст в нижней части ячейки (vertical-align: bottom;)

Использование цветов:

  • <#XXXXXX> — цвет фона (background-color: #XXXXXX;)

  • <bgcolor="#XXXXXX"> — то же самое

  • <rowbgcolor="#XXXXXX"> — цвет фона ряда (сработает только в первой ячейке строки)

  • <tablebgcolor="#XXXXXX"> — цвет фона таблицы

При использовании нескольких конфликтующих опций вида <(:)> будет применена последняя. Нет отдельного параметра для вертикального центрирования текста в ячейке (vertical-align: middle;), так как оно используется по умолчанию.

Использование классов и идентификаторов CSS в таблицах

Кроме того, администратор или пользователь (администратор — в файле темы, пользователь — путём задания собственной CSS в настройках) могут дополнять стандартные CSS собственными определениями, после чего исользовать их в качестве аргументов class или id. Можно задавать несколько опций одновременно, записывая их подряд в угловых скобки (например, <tablestyle="..." rowstyle="..."> в первой ячейке таблицы, чтобы задать и стиль всей таблицы, и стиль первого ряда).

  • <class="..."> — задать класс CSS для ячейки (td)

  • <rowclass="..."> — задать класс CSS для строки (td)

  • <tableclass="..."> — задать класс CSS для таблицы (td)

  • <id="..."> — задать CSS id для ячейки (td)

Пример

Общий макет таблицы и HTML-подобные параметры

Новый синтаксис:

||||||<tablestyle="width: 80%">'''Заголовок'''||
||ячейка 1||ячейка 2||ячейка 3||
||<rowspan=2> объединение 2 рядов||||<style="background-color: #E0E0FF;"> объединение  2 колонок||
||<rowstyle="background-color: #FFFFE0;">ячейка 2||ячейка 3||

Старый синтаксис:

||||||<tablewidth="80%">'''Заголовок'''||
||ячейка 1||ячейка 2||ячейка 3||
||<rowspan=2> объединение рядов||||<bgcolor='#E0E0FF'> объединение на 2 колонки||
||<rowbgcolor="#FFFFE0">ячейка 2||ячейка 3||

Отображение:

Заголовок

ячейка 1

ячейка 2

ячейка 3

объединение 2 рядов

объединение 2 колонок

ячейка 2

ячейка 3

Ширина ячеек

Новый синтаксис:

|| узкая ||<style="width: 99%; text-align: center;"> широкая ||

Старый синтаксис:

|| узкая ||<:99%> широкая ||

Отображение:

узкая

широкая

Объединение ячеек

Разметка:

||<|2> 2 ряда || ряд 1 ||
|| ряд 2 ||
||<-2> ряд 3 на 2 колонки ||

Отображение:

2 ряда

ряд 1

ряд 2

ряд 3 на 2 колонки

Выравнивание и расположение текста в ячейке

Новый синтаксис:

||<style="text-align: left"> влево ||<|3 style="vertical-align: top;"> вверх ||<|3 style="vertical-align: bottom;"> вниз ||
||<style="text-align: center;"> по центру ||
||<style="text-align: right;"> вправо ||

Старый синтаксис:

||<(> влево ||<^|3> вверх ||<v|3> вниз ||
||<:> по центру ||
||<)> вправо ||

Отображение:

влево

вверх

вниз

по центру

вправо

Шрифты

Разметка:

|| обычный ||<style="font-weight: bold;"> жирный ||<style="color: #FF0000;"> красный ||<style="color: #FF0000; font-weight: bold;"> жирный ||

Отображение:

обычный

жирный

красный

жирный

Цвета

Новый синтаксис:

||<style="background-color: red;"> красный ||<style="background-color: green;"> зелёный ||<style="background-color: blue;"> синий ||

Старый синтаксис:

||<#FF8080> красный ||<#80FF80> зеленый ||<#8080FF> синий ||

Отображение:

красный

зелёный

синий

Разрыв строки внутри ячейки

Разметка:

|| строка 1<<BR>>строка 2||

Отображение:

строка 1
строка 2

Пустые стили границ

Разметка:

||<style="border:none;"> строка 1||
||<style="border:none;"> строка 2||

Отображение:

строка 1

строка 2

Вставка данных в таблицы из других источников

Списки и другое сложное форматирование в ячейках таблицы

MiniPage.png