Changes

Help:Tables

1,738 bytes removed, 23:35, 19 November 2007
expanding some sections; updating classes to match new proposals; deleting unnecessary examples and making remainder use wikitable format
or like this:
|cell1||cell2||cell3
The two types can be combined in various ways, e.g.
|cel11||cell2
|cell3
 
Any formatting options for the cell are supplied before the cell contents and separated from the contents using a <code>|</code> tag. Adding alignment options to the previous examples would be done as:
|style="text-align:left"|cell1
|style="text-align:center"|cell2
|style="text-align:left"|cell3
Or
|style="text-align:left"|cell1 |style="text-align:center"|cell2 |style="text-align:left"|cell3
Or
|style="text-align:left"|cell1 |style="text-align:center"|cell2
|style="text-align:left"|cell3
 
===Header Cells===
Header cells are used to provide the column titles, and generally have bold text and a different background color for emphasis. They are
Functions the same way as standard [[#Cells]], except "!" is used instead the opening "|". "!!" can be used instead of "||". Parameters still use "|", though!
specified similarly to standard [[#Cells]], except <code>!</code> or <code>!!</code> is used instead the opening <code>|</code> or <code>||</code>. When formatting is being provided for a header cell, one <code>!</code> and one <code>|</code> must be combined:
!style="text-align:left"|cell1
 
Header cells can be specified anywhere in a table if desired, for example the fourth column in every row could be made into a "header" format.
 
===Captions===
===Classes===
UESP has several pre-defined classes that provide the tables on the site with a uniform appearance and allow editors to quickly and easily create tables without learning detailed table formatting commands. These classes are defined in the site's CSS files and can only be modified by the site's [[UESPWiki:Administrators|Administrators]].
 
The three classes used to specify overall table layout are:
* '''<code>class="wikitable"</code>''': The standard table layout used for nearly every table on UESP.
* '''<code>class="hiddentable"</code>''': For tables that are used solely for organizing information where no table borders, margins, or backgrounds are desired. In many cases, this format of table is possible simply by omitting the class option from the table definition. However, there are situations such as nested tables where the hiddentable class is necessary.
* '''<code>class="toc"</code>''': For manually created tables of contents.
 
{|
|-valign=top
|
<nowiki>{|</nowiki>
<nowiki>!Header 1!!Header 2</nowiki>
<nowiki>|-</nowiki>
<nowiki>|abcde||fghij</nowiki>
<nowiki>|-</nowiki>
<nowiki>|klmno||pqrst</nowiki>
<nowiki>|}</nowiki>
|
<nowiki>{| class=wikitable</nowiki>
<nowiki>|}</nowiki>
|
<nowiki>{| class=greylapsehiddentable</nowiki>
<nowiki>!Header 1!!Header 2</nowiki>
<nowiki>|-</nowiki>
<nowiki>|}</nowiki>
|-
|
{|
!Header 1!!Header 2
|-
|abcde||fghij
|-
|klmno||pqrst
|}
|
{| class=wikitable
|}
|
{| class=greylapsehiddentable
!Header 1!!Header 2
|-
|}
|}
 
The "wikitable" clsss is generally the preferred format for most charts, though "greylapse" is also acceptable in cases where space is a premium, as it uses slightly less space. The "toc" class is usually reserved for creating a custom Table of Contents on pages where the default Table of Contents is not wanted.
Additional classes exist that can be used to provide other formatting details. These classes are designed to be used in conjuction with one of the basic layout classes. For example, <code>class="wikitable vtop compress"</code>. The available options are:
* '''<code>compress</code>''': Eliminates all padding and margins to create smaller tables.
* '''<code>vtop</code>''': Sets all cells in the table to have valign=top (i.e., for the content is all aligned vertically at the top of the cell).
* '''<code>firstleft</code>''': First column is left-aligned, the rest of the table is center-aligned.
 
===Sortable Tables===
Another setclass of tablesthat can be usedadded whichfor allowsextra youtable tofeatures make tablesis <code>sortable by the values in the columns</code>. TheyWith arethis "sortable"option, "wikitablean sortable",icon "greylapseis sortable",added andto "tocthe sortable".header of Noteeach thatcolumn; forclicking on the lattericon three,causes youthe willentire needtable to putbe sorted quotesbased aroundupon the class-name,values sincein they are now twothat wordscolumn.
 
{|
{| width=100%
|-valign=top
|-valign=top
|
|width=50%|
<nowiki>{|class=sortable</nowiki>
<nowiki>!Name!!Value!!Price</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Alpha||42||$500.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Beta||27||$2000.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Gamma||3||$10.00</nowiki>
<nowiki>|}</nowiki>
|
<nowiki>{| class="wikitable sortable"</nowiki>
<nowiki>!Name!!Value!!Price</nowiki>
<nowiki>|Gamma||3||$10.00</nowiki>
<nowiki>|}</nowiki>
|width=50%|
|
<nowiki>{| class="greylapse sortable"</nowiki>
<nowiki>!Name!!Value!!Price</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Alpha||42||$500.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Beta||27||$2000.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Gamma||3||$10.00</nowiki>
<nowiki>|}</nowiki>
|
<nowiki>{| class="toc sortable"</nowiki>
<nowiki>!Name!!Value!!Price</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Alpha||42||$500.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Beta||27||$2000.00</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Gamma||3||$10.00</nowiki>
<nowiki>|}</nowiki>
|-
|
{|class=sortable
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|}
|
{| class="wikitable sortable"
!Name!!Value!!Price
|Gamma||3||$10.00
|}
|
{| class="greylapse sortable"
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|}
 
|
You can remove the sort icon from a column by giving the header the "unsortable" class, like so:
{| class="toc sortable"
{| width=100%
!Name!!Value!!Price
|-valign=top
|width=50%|
<nowiki>
{| class="wikitable sortable"
!Name!!Value!!Price!!class=unsortable|Notes
|-
|Alpha||42||$500.00||Found under the bed
|-
|Beta||27||$2000.00||Hiding in the closet
|-
|Gamma||3||$10.00||Above the dresser
|}</nowiki>
|}
|width=50%|
|}
 
You can exlcude a column from sorting by giving the header the "unsortable" class, like so:
{|
|-valign=top
|
<nowiki>{| class="wikitable sortable"</nowiki>
<nowiki>!Name!!Value!!Price!!class=unsortable|Notes</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Alpha||42||$500.00||Found under the bed</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Beta||27||$2000.00||Hiding in the closet</nowiki>
<nowiki>|-</nowiki>
<nowiki>|Gamma||3||$10.00||Above the dresser</nowiki>
<nowiki>|}</nowiki>
|
{| class="wikitable sortable"
!Name!!Value!!Price!!class=unsortable|Notes
 
You can also exclude a bottom row from sorting by giving it the "sortbottom" class:
{| width=100%
 
{|
|-valign=top
|width=50%|
|
<nowiki>
<nowiki>{| class="wikitable sortable"</nowiki>
{| class="wikitable sortable"
<nowiki>!Name!!Value!!Price</nowiki>
!Name!!Value!!Price
<nowiki>|-</nowiki>
|-
<nowiki>|Alpha||42||$500.00</nowiki>
|Alpha||42||$500.00
<nowiki>|-</nowiki>
|-
<nowiki>|Beta||27||$2000.00</nowiki>
|Beta||27||$2000.00
<nowiki>|-</nowiki>
|-
<nowiki>|Gamma||3||$10.00</nowiki>
|Gamma||3||$10.00
<nowiki>|-class="sortbottom"</nowiki>
|-class="sortbottom"
<nowiki>|'''Totals:'''||'''72'''||'''$2510'''</nowiki>
|'''Totals:'''||'''72'''||'''$2510'''
<nowiki>|}</nowiki>
|}</nowiki>
|
|width=50%|
{| class="wikitable sortable"
!Name!!Value!!Price
===Simple example===
 
{| width=100%
<nowiki> {| </nowiki>
|- valign=top
<nowiki> | Cell 1, row 1 </nowiki>
|width=50%|
<nowiki> | Cell 2, row 1 </nowiki>
<nowiki> |- </nowiki><br />
{| class="wikitable"
<nowiki> | Cell 1, row 2 </nowiki>
<nowiki> | Cell 2, row 2 </nowiki>
<nowiki> |}</nowiki>
 
''generates''
{|
| Cell 1, row 1
| Cell 2, row 1
| Cell 1, row 2
| Cell 2, row 2
|}</nowiki>
|width=50%|
{| class="wikitable"
| Cell 1, row 1
| Cell 2, row 1
|-
| Cell 1, row 2
| Cell 2, row 2
|}
|}
 
===AdvancedFloating ExamplesTable===
{| width=100%
<nowiki>{| align=right border=1</nowiki>
|- valign=top
<nowiki>| Cell 1, row 1 </nowiki>
|width=50%|
<nowiki>|rowspan=2| Cell 2, row 1 (and 2) </nowiki>
<nowiki>| Cell 3, row 1 </nowiki>
{| class="wikitable" align=right
<nowiki>|- </nowiki>
<nowiki>| Cell 1, row 21 </nowiki>
<nowiki>|rowspan=2| Cell 32, row 1 (and 2) </nowiki>
| Cell 3, row 1
<nowiki>|}</nowiki>
|-
''Note the floating table to the right.''
| Cell 1, row 2
{| align=right border=1
| Cell 3, row 2
|}</nowiki>
|width=50%|
{| class="wikitable" align=right
| Cell 1, row 1
|rowspan=2| Cell 2, row 1 (and 2)
| Cell 1, row 2
| Cell 3, row 2
|}
Note that this is a "floating" table therefore subsequent text will be displayed next to the table instead of after it.
|}
 
===Nested Table===
{| width=100%
<nowiki>{| border=1</nowiki>
|- valign=top
<nowiki>| blabla</nowiki>
|width=50%|
<nowiki>|</nowiki>
<nowiki>
<nowiki>{| bgcolor=#ABCDEF border=2</nowiki>
{| class="wikitable"
<nowiki>|nested</nowiki>
<nowiki>|-</nowiki>
<nowiki>|table</nowiki>
<nowiki>|}</nowiki>
<nowiki>|the original table again</nowiki>
<nowiki>|}</nowiki>
''gives a nested table''
{| border=1
| blabla
|
|}
|the original table again
|}</nowiki>
|}
|width=50%|
 
{| class="wikitable"
===Caption &amp; Multi-Cell-Lines===
| blabla
<nowiki>{| border=1</nowiki>
|
<nowiki>|+ '''This is the caption.''' Example taken from Afghanistan table.</nowiki>
{| bgcolor=#ABCDEF border=2
<nowiki>|[[Independence]]||[[August 19]], [[1919]]</nowiki>
|nested
<nowiki>|-</nowiki>
<nowiki>|[[Currency]]||[[Afghani]]</nowiki>
<nowiki>|-</nowiki>
<nowiki>|[[Time zone]]||[[UTC]]+4:30</nowiki>
<nowiki>|-</nowiki>
<nowiki>|[[National anthem]]||[[Sououd-e-Melli]]</nowiki>
<nowiki>|-</nowiki>
<nowiki>|[[Top-level domain|Internet TLD]]||.AF</nowiki>
<nowiki>|}</nowiki>
''becomes''
{| border=1
|+ '''This is the caption.''' Example taken from Afghanistan table.
|[[Help:Independence|Independence]]||[[Help:August 19|August 19]], [[Help:1919|1919]]
|-
|table
|[[Help:Currency|Currency]]||[[Help:Afghani|Afghani]]
|-}
|the original table again
|[[Help:Time zone|Time zone]]||[[Help:UTC|UTC]]+4:30
|-
|[[Help:National anthem|National anthem]]||[[Help:Sououd-e-Melli|Sououd-e-Melli]]
|-
|[[Help:Top-level domain|Internet TLD]]||.AF
|}
 
 
===Header Test===
<nowiki>{| border=1</nowiki>
<nowiki>! Header1!! Header2</nowiki>
<nowiki>|-</nowiki>
<nowiki>| Cell1|| Cell2</nowiki>
<nowiki>|}</nowiki>
 
''looks like this''
{| border=1
! Header1!! Header2
|-
| Cell1|| Cell2
|}
 
===TR Test===
<nowiki>{|</nowiki>
<nowiki>| cell1 || cell2</nowiki>
<nowiki>|- bgcolor=#abcdef</nowiki>
<nowiki>| cell3 || cell4</nowiki>
<nowiki>|}</nowiki>
''makes''
{|
| cell1 || cell2
|- bgcolor=#abcdef
| cell3 || cell4
|}
 
===Headers===
===Test for rows with mixed headers and body text===
{| width=100%
 
|- valign=top
<nowiki>{| border=1 cellspacing=0</nowiki>
|width=50%|
<nowiki>! </nowiki>
<nowiki>! col Header 1 </nowiki>
{| class="wikitable"
<nowiki>! ch 2 </nowiki>
<nowiki>|-</nowiki>
<nowiki>! row header 1</nowiki>
<nowiki>| abc def ghi </nowiki>
<nowiki>| gchf ghh dfgh</nowiki>
<nowiki>|-</nowiki>
<nowiki>! RH 2</nowiki>
<nowiki>| gfbb gbgbds </nowiki>
<nowiki>| dfgsdsdg</nowiki>
<nowiki>|}</nowiki>
 
''makes''
 
{| border=1 cellspacing=0
!
! col Header 1
| gfbb gbgbds
| dfgsdsdg
|}</nowiki>
|width=50%|
{| class="wikitable"
!
! col Header 1
! ch 2
|-
! row header 1
| abc def ghi
| gchf ghh dfgh
|-
! RH 2
| gfbb gbgbds
| dfgsdsdg
|}
|}
 
'''but:'''
 
{| width=100%
<nowiki>{| border=1 cellspacing=0</nowiki>
|- valign=top
<nowiki>! &amp;nbsp; !! col Header 1 !! ch 2 </nowiki>
|width=50%|
<nowiki>|-</nowiki>
<nowiki>
<nowiki>! row header 1 || abc def ghi || gchf ghh dfgh</nowiki>
{| class="wikitable"
<nowiki>|-</nowiki>
<nowiki>! RH 2 || gfbb gbgbds || dfgsdsdg</nowiki>
<nowiki>|-</nowiki>
<nowiki>! RH 3 || || </nowiki>
<nowiki>|}</nowiki>
 
''makes''
 
{| border=1 cellspacing=0
! &nbsp; !! col Header 1 !! ch 2
|-
|-
! RH 3 || ||
|}</nowiki>
|width=50%|
{| class="wikitable"
! &nbsp; !! col Header 1 !! ch 2
|-
! row header 1 || abc def ghi || gchf ghh dfgh
|-
! RH 2 || gfbb gbgbds || dfgsdsdg
|-
! RH 3 || ||
|}
|}