Help:Table examples

Please do not edit this page. Comments should go on my talk page. Thanks.

Refs:

Pipe syntax for tables

The character sequences below control the layout of tables.

**Table markup (pipe syntax)**
`{\|`	left brace, vertical bar	begin table
`\|+`	vertical bar, plus sign	begin table caption
`\|`	vertical bar	begin cell
`\|\|`	2 vertical bars	separate cells on same line
`!`	exclamation mark	begin header cell
`!!`	2 exclamation marks	separate header cells on same line
`\|-`	vertical bar, hyphen	separate rows of table
`\|}`	vertical bar, right brace	end table

With the exception of "!!" and "||" (and a special use of "|" discussed below), each of the above must appear at the beginning of a line.

Simple examples

Table in default style

header A	header B	header C
item 1A	item 1B	item 1C
item 2A	item 2B	item 2C
item 3A	item 3B	item 3C

{|
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}

Table with caption, border and grid lines in default style

**Example Table**
header A	header B	header C
item 1A	item 1B	item 1C
item 2A	item 2B	item 2C
item 3A	item 3B	item 3C

{| border="1"
|+ '''Example Table'''
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}

The caption is rendered in a plain font by default; if you want it to be bold or italicized, you must use wiki markup. Note that for the previous two examples the "default style" may differ across browsers.

Controlling the border and grid lines

header A	header B	header C
item 1A	item 1B	item 1C
item 2A	item 2B	item 2C
item 3A	item 3B	item 3C

{| border="4"  cellpadding="2" cellspacing="8"
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}

header A	header B	header C
item 1A	item 1B	item 1C
item 2A	item 2B	item 2C
item 3A	item 3B	item 3C

{| border="4"  cellpadding="8" cellspacing="2"
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}

A simple grid style

header A	header B	header C
item 1A	item 1B	item 1C
item 2A	item 2B	item 2C
item 3A	item 3B	item 3C

{| border="1" cellpadding="4" cellspacing="0"
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}

A larger table

For most tables, using a single line for each row is impractical. Instead, you can use one line per cell, as in this example:

table header cell one	table header cell two	table header cell three	table header cell four
first item in row 1	second item in row 1	third item in row 1	fourth item in row 1
first item in row 2	second item in row 2	third item in row 2	fourth item in row 2
first item in row 3	second item in row 3	third item in row 3	fourth item in row 3

{| border="1" cellpadding="4" cellspacing="0"
! table header cell one
! table header cell two
! table header cell three
! table header cell four
|-
| first item in row 1
| second item in row 1
| third item in row 1
| fourth item in row 1
|-
| first item in row 2
| second item in row 2
| third item in row 2
| fourth item in row 2
|-
| first item in row 3
| second item in row 3
| third item in row 3
| fourth item in row 3
|}

Newlines and line breaks in tables

In fact, any row or cell of the table can be spread over any number of lines. However, care must be taken when using newlines within table cells.

Multi-line Header Cell
This text is all on one line. This text follows a single newline. This text follows two newlines (i.e., a blank line). This text again follows a single newline.
This is row two, which ends with a blank line.
Row three begins with two newlines.
Line four contains a forced line break.

{| border="1"
! Multi-line<br>Header Cell
|-
| This text is all on one line.
This text follows a single newline.

This text follows two newlines (i.e., a blank line).
This text again follows a single newline.
|-
| This is row two, which ends with a blank line.

|-
|

Row three begins with two newlines.
|-
| Line four contains a<br>forced line break.
|}

Note that the newline separating the first and second lines of a multi-line cell are significant, unlike in normal text where a single newline has no effect. Blank lines (two newlines in a row) are ignored when placed immediately before or after a row separator, but have the usual effect within cell contents.

To force a line break with no additional vertical space between lines, use "<br>".

Line wrapping

By default cell contents are wrapped into multiple lines when necessary. In some applications it may be desirable to prevent line breaking in cell text. To accomplish this, use nonbreaking spaces: " " or " " (more browsers understand the latter version, but human editors might prefer the former).

0.007 297 352 568

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

{| border="1" cellpadding="4" cellspacing="0"
| 0.007&nbsp;297&nbsp;352&nbsp;568
| [[Lorem ipsum]] dolor sit amet... consequat.
|}

Please use this technique sparingly, as it may cause an overwide page on some browsers (which is why an ellipsis is used in the wikicode version of the table above).

Using row and cell formatting parameters

Besides the table layout parameters "border", "cellpadding" and "cellspacing", the pipe syntax also permits row- and cell-level formatting options. Some of these are better supported among browsers than others. On Wikipedia, it's generally best to be conservative when formatting tables.

Colspan and rowspan

To allow cell contents to expand across columns or rows, use "colspan" and "rowspan", respectively. These parameter settings are separated from the corresponding cell contents by a single pipe character (|), which may or may not be surrounded by spaces (note that the pipe character cannot begin a new line since it would then be interpreted as starting a new cell).

The lack of space around the parameter settings in the source of the table below is intended to help editors distinguish them from cell contents.

The quick	brown fox jumped
over the
slow lazy dog.

{| border="1" cellpadding="4" cellspacing="0"
| The quick
|rowspan="2"| brown<br>fox<br>jumped
|-
| over the
|-
|colspan="2"| slow lazy dog.
|}

Alignment, width and height

For most tables, the width and height of cells should not be set explicitly. In special cases, however, the parameters "width" and "height" may be necessary to acheive a desired effect (for an example, see the twin-towers effect on the homepage of the September 11th memorial wiki).

Typically widths are specified in percents and heights in pixels. Care should be used to avoid dimensions that are either too small or too large, as this can confuse some browsers. Also, note that not everyone uses the same size fonts, so avoid trying to optimize the look of a table by setting widths and heights in pixels.

foo	bar
baz	bat quux

{| border="1" cellpadding="4" cellspacing="0" width="100%"
! foo !! align="right" | bar
|- valign="bottom" align="center" height="80"
| baz || bat<br>quux
|}

Note that a single pipe character (|) is used between the cell-level parameter setting and the cell contents even when the cell is a header (indicated by "!" or "!!").

Color

The use of color can make tables easier for people to parse, but when used recklessly (as, for example, in the table below) can ruin an otherwise acceptable table. Caveat editor.

Cell color pink	Aqua color inherited from table
Row color #CCFFCC;	Entire row affected
Aqua inherited	Cell color #FFFFFF; (white)

{| border="1" cellpadding="4" cellspacing="2" style="background:aqua"
! style="background:pink" | ''Cell'' color pink
! Aqua color inherited from table
|- style="background:#CCFFCC;"
| ''Row'' color #CCFFCC;
| Entire row affected
|-
| Aqua inherited
| style="background:#FFFFFF;" | Cell color #FFFFFF; (white)
|}

For a list of color names and codes (which can be used interchangeably) please see Web colors.

Nested tables

Side-by-side tables

The "quick brown fox" example above was displayed using the following code. The line numbers are included for reference only.

01. {| border="0" cellpadding="0" cellspacing="16"
02. | 
03. {| border="1" cellpadding="4" cellspacing="0"
04. | The quick
05. |rowspan="2"| brown<br>fox<br>jumped
06. |-
07. | over the
08. |-
09. |colspan="2"| slow lazy dog.
10. |}
11. | 
12. <pre><nowiki>
13. {| border="1" cellpadding="4" cellspacing="0"
14. | The quick
15. |rowspan="2"| brown<br>fox<br>jumped
16. |-
17. | over the
18. |-
19. |colspan="2"| slow lazy dog.
20. |}
21. </nowiki></pre>
22. |}

Note that this is one table (lines 1, 2, 11 and 22) containing a second table in its first cell (lines 3–10) and the code for the second table in its second cell (lines 12–21).