Синтаксис использования таблиц
Содержание
Для создания таблицы достаточно указать в начале и конце строки «||». Между этим двумя маркерами можно создавать произвольное количество ячеек, разделяя их «||». Например, ниже показана разметка для таблицы из 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 |
Пустые стили границ
Разметка:
||<style="border:none;"> строка 1|| ||<style="border:none;"> строка 2||
Отображение:
строка 1 |
строка 2 |
Вставка данных в таблицы из других источников
значения разделенные запятыми, см. ПомощьПоПарсерам#csvparser
вставка страниц вики, см. ПомощьПоМакроКомандам/Include
Списки и другое сложное форматирование в ячейках таблицы