Help:Tables
From KnitWiki
Tables may be authored in wiki pages using either HTML table elements directly, or using wikicode formatting to define the table. HTML table elements and their use are well described on various web pages and will not be discussed here. The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to HTML table elements.
A good general rule of thumb is to avoid using a table unless you need to. Table markup often complicates page editing.
Contents |
Wiki table markup summary
| {| | start table |
| |+ | table caption, optional; only one per table and between table start and first row |
| |- | table row, optional on first row -- wiki engine assumes the first row |
| ! | table header cell, optional. Consecutive table headers may be added on same line separated by double marks !! or start on new lines, each with its own single mark ! |
| | | table data cell, required! Consecutive table data cells may be added on same line separated by double marks || or start on new lines, each with its own single mark | |
| |} | end table |
- The above marks must start on a new line except the double || and !! for optionally adding consecutive cells to a line.
- XHTML attributes. Each mark, except table end, optionally accepts one or more XHTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
- Cells and caption (| or ||, ! or !!, and |+) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
- Table and row marks ({| and |-) do not directly hold content. Do not add pipe (|) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it and your final attribute if it was touching the erroneous pipe!
- Content may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headers, or nested tables, must of course be on its own new line.
Simple table
Plain
The following table lacks borders and good spacing but shows the simplest wiki markup table structure
This code:
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Will create a plain table with two columns of text that looks like this:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Alternative
For more table-ish looking wiki markup cells can be listed on one line separated by ||. This does not scale well for longer cell content such as paragraphs. It works well for short bits of content however, such as our example table.
Extra spaces within cells in the wiki markup can be added, as shown in the wiki markup below, to make the table easier to understand during editing but they do not effect the actual table rendering.
HTML attributes can be added to this table following the examples in other tables on this page but have been left out of the following example for simplicity.
This code:
{|
| Orange || Apple || more
|-
| Bread || Pie || more
|-
| Butter || Ice cream || and more
|}
Will create a table that looks pretty much like the last one:
| Orange | Apple | more |
| Bread | Pie | more |
| Butter | Ice cream | and more |
With HTML attributes
You can add HTML attributes to make your table look more attractive
border="1"
This code:
{|border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Will create a table with a border:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
align="center" border="1"
The same code with the align="center" attribute added:
{|align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Will create the same table, but it will be centered horizontally across the page:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
align="right" border="1"
You can put attributes in individual cells. Numbers, for example, may look better aligned right.
Cell attributes should be typed between pipes before the cell you want to apply them to.
This code:
{|border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
Will create a table with some cells aligned to the right:
| Orange | Apple | 12,333.00 |
| Bread | Pie | 500.00 |
| Butter | Ice cream | 1.00 |
You can put attributes on individual rows, too. Row attributes should go immediately after the "|-" code for creating a new row.
This code:
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
Will create a table like the one above, but with a whole row with green italic text:
| Orange | Apple | 12,333.00 |
| Bread | Pie | 500.00 |
| Butter | Ice cream | 1.00 |
cellspacing="0" border="1"
You can also use the HTML cellspacing attribute to control the amount of space between borders.
This code:
{|cellspacing="20" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Will create a table with cellspacing of 20:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
cellpadding="20" cellspacing="0" border="1"
The cellpadding attribute can be used to control the amount of space within a cell.
This code:
{|cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Will create a table with a cellpadding attribute of 20:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
With HTML attributes and CSS styles
CSS style attributes can be added with or without other HTML attributes
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
To apply green text and a pale yellow background to the whole table, the style attribute is put at the very beginning of the table like this:
{|style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
This will create the following table with the same styling throughout:
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Table with TH headings
TH (HTML table headings) can be created by using ! instead of |. Headings usually show up bold and centered by default.
Top headings
Column Headings
To place headings across the top of your colums, put them in the first row, using an exclamation point intstead of a pipe to start each row like this:
{|border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
This will create a bold heading for each column
| Yummy | Yummier |
|---|---|
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Colspan="2"
If you prefer to have a single heading across the top of your table, use the colspan attribute in the first cell of the first row. Colspan should be set to the number of columns you would like your heading to cover:
{|border="1" cellpadding="20" cellspacing="0"
!colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
| Yummies | |
|---|---|
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Side headings
Default
Create a column of headings down the left hand side of your table by making the first cell of each row a heading using !:
{|border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream
|}
| Fruit | Orange | Apple |
|---|---|---|
| Dish | Bread | Pie |
| Complement | Butter | Ice cream |
Right justify
Right justified side headings can be done by adding the align="right" attribute to each cell that contains a heading:
{|border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream
|}
| Fruit | Orange | Apple |
|---|---|---|
| Dish | Bread | Pie |
| Complement | Butter | Ice cream |
Captions
A table caption can be added to the top of any table as follows:
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Attributes can also be added to the caption
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
Table with H1, H2, H3 etc. headings
HTML H1, H2, H3, H4 etc. headings can be created the standard wiki markup way with ==equal== signs and must be on a line all by themselves to work.
Preview the whole table. If you click on an edit tab for a heading within a table, edit, and preview, the parent table will display erroneously broken because part of it will be missing.
Keep the heading hierarchy consistent with the rest of the page so that the table of contents at page top works correctly.
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
Yummiest | |
| Orange | Apple |
| Bread | Pie |
| Butter | Ice cream |
