[HelpOnLanguages] [TitleIndex] [WordIndex]

HelpOnTables

Table Markup

To create a table, you start and end a line using the table marker "||". Between those start and end markers, you can create any number of cells by separating them with "||". To get a centered cell that spans several columns, you start that cell with more than one cell marker. Adjacent lines of the same indent level containing table markup are combined into one table.

For more information on the possible markup, see HelpOnEditing.

Table Attributes

Apart from the option to repeat cell markers to get columns spanning several other columns, you can directly set many HTML table attributes. Any attributes have to be placed between angle brackets <...> directly after the cell marker.

The wiki-like markup has the following options:

The style stuff is all you need for styling your tables. Just use CSS formatted style there and it will be inlined in the generated HTML tag. Alternatively, extend moin's CSS by your own definitions and refer to them using class or id.

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

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.

Example

 NEW STYLE: General table layout and HTML like options::
 ||||||<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||
 Cell width::
 || narrow ||<style="width: 99%; text-align: center;"> wide ||
 Spanning rows and columns::
 ||<|2> 2 rows || row 1 ||
 || row 2 ||
 ||<-2> row 3 over 2 columns ||
 Alignment::
 ||<style="text-align: left"> left ||<|3 style="vertical-align: top;"> top ||<|3 style="vertical-align: bottom;"> bottom ||
 ||<style="text-align: center;"> centered ||
 ||<style="text-align: right;"> right ||
 Colors::
 ||<style="background-color: red;"> red ||<style="background-color: green;"> green ||<style="background-color: blue;"> blue ||

 OLD STYLE: General table layout and HTML like options::
 ||||||<tablewidth="80%">'''Heading'''||
 ||cell 1||cell2||cell 3||
 ||<rowspan=2> spanning rows||||<bgcolor='#E0E0FF'> spanning 2 columns||
 ||<rowbgcolor="#FFFFE0">cell2||cell 3||
 Cell width::
 || narrow ||<:99%> wide ||
 Spanning rows and columns::
 ||<|2> 2 rows || row 1 ||
 || row 2 ||
 ||<-2> row 3 over 2 columns ||
 Alignment::
 ||<(> left ||<^|3> top ||<v|3> bottom ||
 ||<:> centered ||
 ||<)> right ||
 Colors::
 ||<#FF8080> red ||<#80FF80> green ||<#8080FF> blue ||

Display

NEW STYLE: General table layout and HTML like options
  • Heading

    cell 1

    cell2

    cell 3

    spanning rows

    spanning 2 columns

    cell2

    cell 3

  • Cell width
  • narrow

    wide

  • Spanning rows and columns
  • 2 rows

    row 1

    row 2

    row 3 over 2 columns

  • Alignment
  • left

    top

    bottom

    centered

    right

  • Colors
  • red

    green

    blue

  • OLD STYLE: General table layout and HTML like options
  • Heading

    cell 1

    cell2

    cell 3

    spanning rows

    spanning 2 columns

    cell2

    cell 3

  • Cell width
  • narrow

    wide

  • Spanning rows and columns
  • 2 rows

    row 1

    row 2

    row 3 over 2 columns

  • Alignment
  • left

    top

    bottom

    centered

    right

  • Colors
  • red

    green

    blue

  • Insert Table Data from other sources


    2014-08-13 10:44