User:Dcljr/Tables

I really want to create a completely new how-to for tables in Wikipedia.

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

Refs:
 * How to use tables
 * m:Help:Table

Pipe syntax for tables
The character sequences below control the layout of tables.

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

Table in default style
{| border="0" cellpadding="0" cellspacing="16"


 * }

Table with caption, border and grid lines in default style
{| border="0" cellpadding="0" cellspacing="16"


 * }

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.

A simple grid style
{| border="0" cellpadding="0" cellspacing="16"


 * }

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:

{| border="0" cellpadding="0" cellspacing="16"


 * }

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.

{| border="0" cellpadding="0" cellspacing="16"


 * }

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 "&lt;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: "&amp;nbsp;" or "&amp;#160;" (more browsers understand the latter version, but human editors might prefer the former).

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 "<tt>cellspacing</tt>", 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 "<tt>colspan</tt>" and "<tt>rowspan</tt>", respectively. These parameter settings are separated from the corresponding cell contents by a single pipe character (<tt>|</tt>), 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.

{| border="0" cellpadding="0" cellspacing="16"


 * }

Alignment, width and height
For most tables, the width and height of cells should not be set explicitly. In special cases, however, the parameters "<tt>width</tt>" and "<tt>height</tt>" 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.

{| border="0" cellpadding="0" cellspacing="16"


 * }

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

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.

{| border="0" cellpadding="0" cellspacing="16"


 * }

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

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&lt;br>fox&lt;br>jumped 06. |- 07. | over the 08. |- 09. |colspan="2"| slow lazy dog. 10. |} 11. | 12. &lt;pre>&lt;nowiki> 13. {| border="1" cellpadding="4" cellspacing="0" 14. | The quick 15. |rowspan="2"| brown&lt;br>fox&lt;br>jumped 16. |- 17. | over the 18. |- 19. |colspan="2"| slow lazy dog. 20. |} 21. &lt;/nowiki>&lt;/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).