View source for 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 [[User talk:Dcljr|my talk page]]. Thanks.'''

Refs:
*[[Wikipedia:How to use tables]]
*[[m:Help:Table]]

== Pipe syntax for tables ==

The character sequences below control the layout of tables.

{| border="1" cellpadding="6" cellspacing="0"
|+ '''Table markup (pipe syntax)'''
| <tt><nowiki>{|</nowiki></tt>
| [[Bracket#Curly brackets or braces &#123; &#125;|left brace]], [[vertical bar]]
| begin table
|-
| <tt><nowiki>|+</nowiki></tt>
| vertical bar, [[plus sign]]
| begin table caption
|-
| <tt><nowiki>|</nowiki></tt>
| vertical bar
| begin cell
|-
| <tt><nowiki>||</nowiki></tt>
| 2 vertical bars
| separate cells on same line
|-
| <tt><nowiki>!</nowiki></tt>
| [[exclamation mark]]
| begin header cell
|-
| <tt><nowiki>!!</nowiki></tt>
| 2 exclamation marks
| separate header cells on same line
|-
| <tt><nowiki>|-</nowiki></tt>
| vertical bar, [[hyphen]]
| separate rows of table
|-
| <tt><nowiki>|}</nowiki></tt>
| vertical bar, [[Bracket#Curly brackets or braces &#123; &#125;|right brace]]
| end table
|}

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

=== Simple examples ===

==== Table in default style ====

{| border="0" cellpadding="0" cellspacing="16"
| 
{|
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}
| 
<pre><nowiki>
{|
! header A !! header B !! header C
|-
| item 1A || item 1B || item 1C
|-
| item 2A || item 2B || item 2C
|-
| item 3A || item 3B || item 3C
|}
</nowiki></pre>
|}

==== Table with caption, border and grid lines in default style ====

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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
|}
| 
<pre><nowiki>
{| 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
|}
</nowiki></pre>
|}

The caption is rendered in a plain font by default; if you want it to be bold or italicized, you must use [[Wikipedia:How to edit a page#Character formatting|wiki markup]]. Note that for the previous two examples the "default style" may differ across browsers.

==== Controlling the border and grid lines ====

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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
|}
| 
<pre><nowiki>
{| 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
|}
</nowiki></pre>
|}

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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
|}
| 
<pre><nowiki>
{| 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
|}
</nowiki></pre>
|}

==== A simple grid style ====

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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
|}
| 
<pre><nowiki>
{| 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
|}
</nowiki></pre>
|}

==== 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"
| 
{| 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
|}
|-
| <pre><nowiki>
{| 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
|}
</nowiki></pre>
|}

==== 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 [[newline]]s within table cells.

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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.
|-
| Row four contains a<br>forced line break.
|}
|-
| <pre><nowiki>
{| 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.
|-
| Row four contains a<br>forced line break.
|}
</nowiki></pre>
|}

Note that the newline separating the ''first'' and ''second'' lines of a multi-line cell '''are significant''', [[Wikipedia:How to edit a page#Sections, paragraphs, lists and lines|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 "<tt>&lt;br></tt>".

==== Line wrapping ====

By default cell contents are [[Line wrap and word wrap|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 space]]s: "<tt>&amp;nbsp;</tt>" or "<tt>&amp;#160;</tt>" (more browsers understand the latter version, but human editors might prefer the former).

{| border="0" cellpadding="0" cellspacing="16"
| 
{| border="1" cellpadding="4" cellspacing="0"
| 0.007&nbsp;297&nbsp;352&nbsp;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.
|}
|-
| 
<pre><nowiki>
{| border="1" cellpadding="4" cellspacing="0"
| 0.007&amp;nbsp;297&amp;nbsp;352&amp;nbsp;568
| [[Lorem ipsum]] dolor sit amet... consequat.
|}
</nowiki></pre>
|}

'''Please use this technique sparingly,''' as it may cause an [[Page widening|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 "<tt>border</tt>", "<tt>cellpadding</tt>" 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"
| 
{| border="1" cellpadding="4" cellspacing="0"
| The quick
|rowspan="2"| brown<br>fox<br>jumped
|-
| over the
|-
|colspan="2"| slow lazy dog.
|}
| 
<pre><nowiki>
{| border="1" cellpadding="4" cellspacing="0"
| The quick
|rowspan="2"| brown<br>fox<br>jumped
|-
| over the
|-
|colspan="2"| slow lazy dog.
|}
</nowiki></pre>
|}

==== 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 [[World Trade Center|twin-towers]] effect on the homepage of the [http://sep11.wikipedia.org/ September 11th memorial] wiki).

Typically widths are specified in [[percent]]s and heights in [[pixel]]s. ''Care should be used'' to avoid dimensions that are either too small or too large, as this can confuse some [[web browser|browser]]s. 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"
| 
{| border="1" cellpadding="4" cellspacing="0" width="100%"
! foo !! align="right" | bar
|- valign="bottom" align="center" height="80"
| baz || bat<br>quux
|}
|-
|<pre><nowiki>
{| border="1" cellpadding="4" cellspacing="0" width="100%"
! foo !! align="right" | bar
|- valign="bottom" align="center" height="80"
| baz || bat<br>quux
|}
</nowiki></pre>
|}

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 [[parsing|parse]], but when used recklessly (as, for example, in the table below) can ruin an otherwise acceptable table. ''[[Caveat emptor|Caveat editor]].''

{| border="0" cellpadding="0" cellspacing="16"
| 
{| 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)
|}
|-
| 
<pre><nowiki>
{| 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)
|}
</nowiki></pre>
|}

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.

<pre><nowiki>
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. |}
</nowiki></pre>

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

== HTML syntax for tables ==

== See also ==

== External links ==