Help:Tables

Tables may be set up in wiki pages using either HTML table elements, or wikicode. HTML table elements will not be discussed here (see web pages if you're interested). The benefit of wikicode is that the table is made of character symbols. This makes it easier to imagine the table when you work in the editing box.

As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing.

Wiki table markup summary

Wiki table markup, or wiki markup or just marks are words used to describe to control codes. Control codes are symbols used that tell wikipedia how to display something. When a person looks at a page in wikipedia, the wiki markup can make the text look special, such as bold, large, or in a table. The person viewing the page does not see the wiki markup. Only the editor (the person that writes the page) sees the wiki markup.

Wiki Table Markup

{|	table start, required. Must be entered first.
|+	table caption, optional. If entered, it must be between table start and the first table row. Only one table caption should be entered. The text will be displayed above the table, and it will be centered.
!	table header cell, optional. Normally entered before data rows. The text entered in the table header will appear in a bold display, and will be centered. If entering one table header per line, start each with a single mark (!). If entering more than one table header per line, start the line with a single mark (!), and separated each table header with a double mark (!!).
|-	table row, required between rows (including any table header row). Not needed before the first row.
|	table data cell, required. The text entered in the table data will line-up on the left side. If entering one table data per line, start each with a single mark (|). If entering more than one table data per line, start the line with a single mark (|), and separated each table data with a double mark (||).
|}	table end, required. Must be entered last.

• The above marks must start on a new line except the double || and !!
  • Double || and !! marks are used to add more than one cell entry in a line.

• XHTML attributes, Each mark, except table end, optionally accepts one or more XHTML attributes.
  • XHTML attributes must be on the same line as the mark.
  • Separate XHTML attributes from each other with a single space.
  • Cells (| or ||, and ! or !!) and the caption (|+) hold content. Separate 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 hold content. Do not add pipe (|) after their optional attributes. The pipe mark will be deleted.
    • If there is no space between the last attribute and the pipe mark, the last attribute will be deleted!

• Content may be entered on the same line as its cell mark, or on the lines below the cell mark.
  • Centent must follow any optional XHTML attributes.
  • Content that uses wiki markup, such as lists, headers, or nested tables, that needs to start on a new line must be on its own new line.

Simple wiki table

This is a plain wiki table. It shows the simplest wiki table markup table structure. The table does not have any borders. There is very little spacing between the content.

In the following examples, the table on the left is the table the user will see when they view an article in wikipedia. The box on the right is the wiki markup code entered to create the table.

One cell per line

This is the simplest wiki table markup table structure. The content of each cell is entered one its own line.

Orange Apple Banana Bread Pie Cake Butter Ice cream Milk

{| |Orange |Apple |Banana |- |Bread |Pie |Cake |- |Butter |Ice cream |Milk |}

One row per line

To make the wiki markup look more like a table, row content may be entered on one line. This works well for small tables, like this example. Note that the content cells are separated by a double pipe mark (||).

Extra spaces in the cells in the wiki markup can be added. The wiki markup below has extra spaces to make the wiki markup look more like a table. The extra spaces do not affect the table display.

Orange Apple Banana Bread Pie Cake Butter Ice cream Milk

{| | Orange || Apple || Banana |- | Bread || Pie || Cake |- | Butter || Ice cream || Milk |}

Table with XHTML attributes

You can add XHTML attributes tables. Attributes are control codes that define how the table and its data will display.

Attributes on tables

Placing attributes after the table start tag applies attributes to the entire table.

• For example, a table may look better with a border around the entire table.

Orange Apple 12,333.00 Bread Pie 500.00 Butter Ice cream 1.00

{| border="1" |Orange |Apple |12,333.00 |- |Bread |Pie |500.00 |- |Butter |Ice cream |1.00 |}

Attributes on cells

Attributes can be placed on individual cells.

• For example, one cell can be made highlighted (made to stand out) by changing its background color.
• Note that the attribute must be separated from the cell data with a pipe mark (|).

Orange Apple Banana Bread Pie Cake Butter Ice cream Milk

{| border="1" |Orange |Apple |Banana |- |Bread |Pie |bgcolor="cyan"|Cake |- |Butter |Ice cream |Milk |}

Attributes on rows

Attributes may be placed on individual rows,.

• For example, one row may be highlighted by changing the color and style of the font (the format used to display letters).

Orange Apple Banana Bread Pie Cake Butter Ice cream Milk

{| border="1" |Orange |Apple |Banana |- |Bread |Pie |Cake |- style="font-style:italic;color:red;" |Butter |Ice cream |Milk |}

For the authoriative source on these, see the W3C's HTML 4.01 Specification page on tables.

Table with CSS styles

CSS style attributes may be used to define how the table and its data will display.

• Just like XHTML attributes, CSS style attributes may be added to the table, row, or cell.
• CSS style attributes can be added with or without other HTML attributes.

Orange Apple Bread Pie Butter Ice cream

{| style="color:green;background-color:yellow;" cellpadding="20" cellspacing="0" border="1" |Orange |Apple |- |Bread |Pie |- |Butter |Ice cream |}

Tables using the wikitable class

One CSS attribute is class. A class named wikitable had been made to display tables in a common format.

• To use this format, add class="wikitable" to the table start tag.
• Most wiki edit windows (were the article data is entered) have a table button. This button will insert a wiki table with the class="wikitable" attribute.

Orange Apple Banana Bread Pie Cake Butter Ice cream Milk

{| class="wikitable" | Orange || Apple || Banana |- | Bread || Pie || Cake |- | Butter || Ice cream || Milk |}

Special wiki table elements

Table headings

Table headings are created by using "!" instead of "|". Headings are usually displayed bold and centered.

• Headings may be placed in any table row.
  • Headings are normally used at the beginning of a table.
• XHTML or CSS attributes and header text must be separated with the "|" character.

Item Amount Cost Apples 6 pieces 7.85 Bananas 5 pieces 4.92 Mandarins 8 pieces 8.55 Ice cream 2 pints 4.85 Total: 26.17

{| border="1" cellspacing="0" ! Item !! Amount !! Cost |- | Apples || 6 pieces || align="right" | 7.85 |- | Bananas || 5 pieces || align="right" | 4.92 |- | Mandarins || 8 pieces || align="right" | 8.55 |- | Ice cream || 2 pints || align="right" | 4.85 |- ! colspan="2" | Total: !! align="right" | 26.17 |}

Table headings with class "wikitable"

Item Amount Cost Apples 6 pieces 7.85 Bananas 5 pieces 4.92 Mandarins 8 pieces 8.55 Ice cream 2 pints 4.85 Total: 26.17

{| class="wikitable" ! Item !! Amount !! Cost |- | Apples || 6 pieces || align="right" | 7.85 |- | Bananas || 5 pieces || align="right" | 4.92 |- | Mandarins || 8 pieces || align="right" | 8.55 |- | Ice cream || 2 pints || align="right" | 4.85 |- ! colspan="2" | Total: !! align="right" | 26.17 |}

Table caption

A table caption can be added to the top of any table as follows

Food complements Orange Apple Bread Pie Butter Ice cream

{| border="1" cellpadding="20" cellspacing="0" |+Food complements |- |Orange |Apple |- |Bread |Pie |- |Butter |Ice cream |}

Attributes can be added to the caption as follows

Food complements Orange Apple Bread Pie Butter Ice cream

{| border="1" cellpadding="20" cellspacing="0" |+align="bottom" style="color:#e76700;"|''Food complements'' |- |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.

Yummiest Orange Apple Bread Pie Butter Ice cream

{| border="3" cellpadding="20" cellspacing="0" |colspan="2"| ===Yummiest=== |- |Orange |Apple |- |Bread |Pie |- |Butter |Ice cream |}

Caveat

Negative numbers

Negative value minus sign can break your table (it may display missing some values) if you start a cell on a new line with a negative number or a parameter that evaluates to a negative number (|-6) because that is the wiki markup for table row, not table cell. To avoid this, insert a space before the value (| -6) or use in-line cell markup (||-6).