HelpOnTables - MRC CBU Imaging Wiki

Upload page content

You can upload content for the page named below. If you change the page name, you can also upload content for another page. If the page name is empty, we derive the page name from the file name.

File to load page content from
Page name
Type the odd characters out in each group: abz2a 125t7 HhHaHh year.s 5433r21 worl3d

location: HelpOnTables

Table Markup

To create a table, start & end a new line using the table marker; two 'pipe' characters "||". Between those start and end markers, you can create any number of cells by separating them with "||". In the most basic example, here is a four-square table:

|| top left cell || top right cell ||
|| bottom left cell || bottom right cell ||


top left cell

top right cell

bottom left cell

bottom right cell

Table Attributes

Of course, undoubtedly the time will come when you want a bit formatting. Moin tables can be formatted with many HTML table attributes. Any attributes have to be placed between angle brackets <...> directly after the cell marker. For example: ||<style"..."> cell content ||

The style stuff is all you need for styling your tables. Just use CSS-formatted styles and it will be inlined in the generated HTML tag.

  • <style="..."> will put that style info into cell (td) html

  • <rowstyle="..."> will put that style info into row (tr) html

  • <tablestyle="..."> will put that style info into table (table) html

We still support the old table markup, but generate the effect by appending additional values to the style parameter:

Cell & table widths:

  • <50%>: cell width (will append width: 50%; to style)

  • <width="50%">: does the same

  • <tablewidth="100%">: set table width to 100% (only valid in first table row)

Spanning cells:

  • <-2>: column span

  • <|2>: row span

Text alignment:

  • <(>: left aligned (will append text-align: left; to style)

  • <:>: centered (will append text-align: center; to style)

  • <)>: right aligned (will append text-align: right; to style)

  • <^>: aligned to top (will append vertical-align: top; to style)

  • <v>: aligned to bottom (will append vertical-align: bottom; to style)


  • <#XXXXXX>: background color (will append background-color: #XXXXXX; to style)

  • <bgcolor="#XXXXXX"> does the same

  • <rowbgcolor="#XXXXXX"> set row background color (only valid in first cell)

  • <tablebgcolor="#XXXXXX"> set table background color

If you use several conflicting options like <(:)>, the last option wins. There is no explicit option for vertical centering (middle), since that is always the default.

Leveraging CSS in your tables

Alternatively, the admin or the user (the admin in the theme css file, or the user can extend moin's CSS by his own definitions via user preferences) can refer to them using class or id. You can use several options at the same time by writing them one after the other within the same angle brackets (e.g. <tablestyle="..." rowstyle="..."> on the first cell, to set both the table-wide style and the first-row style.

  • <class="..."> will put that CSS class into cell (td) html

  • <rowclass="..."> will put that CSS class into row (tr) html

  • <tableclass="..."> will put that class into table (table) html

  • <id="..."> will put that CSS id into cell (td) html


General table layout and HTML like options

New Style:
||||||<tablestyle="width: 80%">'''Heading'''||
||cell 1||cell2||cell 3||
||<rowspan=2> spanning rows||||<style="background-color: #E0E0FF;"> spanning 2 columns||
||<rowstyle="background-color: #FFFFE0;">cell2||cell 3||

Old Style:
||cell 1||cell2||cell 3||
||<rowspan=2> spanning rows||||<bgcolor="#E0E0FF"> spanning 2 columns||
||<rowbgcolor="#FFFFE0">cell2||cell 3||


cell 1


cell 3

spanning rows

spanning 2 columns


cell 3

Cell width

New Style
|| narrow ||<style="width: 99%; text-align: center;"> wide ||

Old Style
|| narrow ||<:99%> wide ||



Spanning rows and columns

||<|2> 2 rows || row 1 ||
|| row 2 ||
||<-2> row 3 over 2 columns ||

2 rows

row 1

row 2

row 3 over 2 columns


||<style="text-align: left;">left ||<style="vertical-align: top; text-align: center;"|3> top ||<style="vertical-align: bottom;"|3> bottom ||
||<style="text-align: center;"> centered ||
||<style="text-align: right;"> right ||

old style:
||<(> left ||<^|3> top ||<v|3> bottom ||
||<:> centered ||
||<)> right ||







|| normal ||<style="font-weight: bold;"> bold ||<style="color: #FF0000;"> red ||<style="color: #FF0000; font-weight: bold;"> boldred ||






New style
||<style="background-color: red;"> red ||<style="background-color: green;"> green ||<style="background-color: blue;"> blue ||
old Style
||<#FF8080> red ||<#80FF80> green ||<#8080FF> blue ||




Line breaks within cells

|| line 1<<BR>>line 2||

line 1
line 2

No border style

||<style="border:none;"> line 1||
||<style="border:none;"> line 2||

line 1

line 2

Insert Table Data from other sources

Bulleted lists and other complex content within cells