For more information on general wiki markup, see Help with Editing.
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, start that cell with more than one cell marker. Adjacent lines of the same level of indentation (i.e. number of spaces) containing table markup are combined into one table.
Attributes
General Attributes
Apart from the option to repeat table markers to get cells spanning across several columns, you can directly set many HTML table attributes. Any attributes have to be placed between angle brackets <...> directly after the cell marker. If you use more than one of these attributes, they should be separated by a space.
The options are the following:
| Attribute: | Function: |
| <width="50%"> | Changes the width of the cell, in this case to 50% of the width of the table. |
| Note that changing the width of a cell will change the default width for the column as well. | |
| <colspan="2"> | Makes the cell span multiple columns horizontally, in this case 2 columns. |
| <rowspan="3"> | Makes the cell span multiple rows vertically, in this case 3 rows. |
| <align="left"> | Makes the text, images, etc. in the cell align to the left — this is the default. |
| <align="center"> | Makes the text, images, etc. in the cell centered. |
| <align="right"> | Makes the text, images, etc. in the cell align to the right. |
| <valign="top"> | This changes the vertical alignment of the text so it is at the top of the cell. |
| <valign="bottom"> | This changes the vertical alignment of the text so it is at the bottom of the cell. |
| Note that there is no option for vertical alignment "middle", this is always the default. | |
| <bgcolor="#XXXXXX"> | This changes the background color of the cell, see Help with Colors |
Remember that to include multiple attributes you enclose all attributes into the same set of angle brackets for the cell. So to have a cell aligned to the right, spanning seven rows, and with a Lavender Blush background, you would use this attribute: <align="right" rowspan="7" bgcolor="LavenderBlush">.
If you use several conflicting options like <valign="top" valign="bottom">, the last option wins.
Row and Table Attributes
You can also set the attributes for a row of cells, or for an entire table, by prefixing the name of the attribute with table or row. If you want to set an attribute for the whole table, you should probably do it in the first cell of the table. Possible tags:
| Attribute: | Function: |
| <rowbgcolor="#XXXXXX"> | Sets the background color for the row of the cell. |
| <tablewidth="50%"> | Changes the width of the table, in this case to 50% of the screen. |
| <tablebgcolor="#XXXXXX"> | Alter the background color for the entire table. |
| <tableborder="1"> | Adds a border to the table. |
| <tablebordercolor="#XXXXXX"> | Changes the color of the border lines. |
| <tableclass="classname"> | Set a CSS class for the table. |
Note that cell attributes (such as bgcolor) take dominance over row attributes (such as rowbgcolor) which in turn are dominant over the table attributes (such as tablebgcolor). In addition, in a series of conflicting tags, the last one is dominant.
Shorthand Attributes
In addition to these you can use a shorthand markup, which is a little bit harder to read but is good for wiki-ninjas to quickly change a table. These attributes only apply to a single cell rather than a row or the entire table.
The wiki-like markup has the following options:
| Attribute: | Function: |
| <50%> | Changes the width of the cell, in this case to 50% the screen. |
| <-2> | Makes the cell span multiple columns horizontally, in this case 2. |
| <|3> | Makes the cell span multiple rows vertically, in this case 3. |
| <(> | Makes the text, images, etc. in the cell aligned to the left, this is default. |
| <:> | Makes the text, images, etc. in the cell centered. |
| <)> | Makes the text, images, etc. in the cell aligned to the right. |
| <^> | This changes the vertical alignment of the text so it is at the top of the cell. |
| <v> | This changes the vertical alignment of the text so it is at the bottom of the cell. |
| Note that there is no option for vertical alignment "middle", this is always the default. | |
| <#XXXXXX> | This changes the background color of the cell, see Help with Colors |
If you use several conflicting options like <(:)>, the last option wins. Also, the non-shorthand tags may be included in the same tag as shorthand. This allows the use of named colors (such as LavenderBlush) with shorthand, and allows users unfamiliar with the system the ability to simply overwrite the shorthand by adding attributes following the short hand.
Example
General table layout and HTML like options::
||||||<tablewidth="80%" bgcolor="#DDDDDD">'''Heading'''||
||cell 1||cell 2||cell 3||
||<rowspan="2"> spanning rows||||<bgcolor='#E0E0FF'> spanning 2 columns||
||<rowbgcolor="#FFFFE0">cell 2||cell 3||
The same with shorthand attributes::
||||||<tablewidth="80%" #DDDDDD>'''Heading'''||
||cell 1||cell 2||cell 3||
||<|2> spanning rows||<-2#E0E0FF> spanning 2 columns||
||<rowbgcolor="#FFFFE0">cell 2||cell 3||
Cell width::
|| narrow ||<:85%> wide ||
Spanning rows and columns::
||<|2> 2 rows || row 1 ||
|| row 2 ||
||<-2> row 3 over 2 columns ||
Alignment::
||<tableborder="1">||<^> top {{{<^>}}}|| ||
||<(> left {{{<(>}}}||<:> centered {{{<:>}}}||<)> right {{{<)>}}} ||
|| ||<v> bottom {{{<v>}}}|| ||
Colors::
||<#FF8080> red ||<#80FF80> green ||<#8080FF> blue ||
and now a table with a border:
||<tableborder="1">item one||item 2||
Display
- General table layout and HTML like options
-
Heading cell 1 cell 2 cell 3 spanning rows spanning 2 columns cell 2 cell 3 - The same with shorthand attributes
-
Heading cell 1 cell 2 cell 3 spanning rows spanning 2 columns cell 2 cell 3 - Cell width
-
narrow wide - Spanning rows and columns
-
2 rows row 1 row 2 row 3 over 2 columns - Alignment
-
top <^>
left <(> centered <:>
right <)>
bottom <v>
- Colors
-
red green blue
and now a table with a border:
| item one | item 2 |
