Changes

Help:Tables

1,137 bytes added, 19:18, 19 November 2007
First stab at a page overhaul. Start by deleting nearly all references to html table commands
{{Help trail}}
'''Tables''' are commonly used on UESP to organize information into columns. Although traditional HTML tags can be used to create a table (<nowiki><table>, <tr>, <td></nowiki>, etc.), the wiki software introduces a new set of table markup tags. This article focusses solely on the wiki table markup tags.
This new table markup, developed by Magnus Manske, replaces the &lt;table&gt;, &lt;tr&gt;, &lt;td&gt;, &lt;th&gt;, and &lt;caption&gt; HTML tags. The HTML tags can still be used though.
 
==Introduction==
The tags below must start at the beginning of a new line (with one exception). The parameters are optional.
A simple table looks like:
{| class="wikitable"
! First Column !! Second Column
|-
| A cell || Another cell
|-
| More || ...and more
|}
 
The code used to produce this table is:
==Table==
<nowiki>
A table is defined by
{| class="wikitable"
<nowiki> {| </nowiki> ''params''
! First Column !! Second Column
<nowiki> |} </nowiki>
|-
which equals
| A cell || Another cell
&lt;table ''params''&gt;
|-
&lt;/table&gt;
| More || ...and more
|} </nowiki>
 
The basic parts used to construct tables (as shown in this example) are:
:''Careful'': You '''must include''' the '''space''' between <code>'''{|'''</code> and <code>''params''</code>, or the first parameter gets ignored.
* <code><nowiki>{|</nowiki></code>: creates the start of the table. The first line, following the <code><nowiki>{|</nowiki><code> tag, is used to [[#Definition|define]] the overall table.
* <code>class="wikitable"</code>: part of the table definition, this [[#Classes|class]] creates a table with a standard UESP appearance.
* <code>!</code> and <code>!!</code>: provide the text for the column [[#Header Cells|headers]].
* <code>|-</code>: defines the start of a new [[#Rows|row]].
* <code>|</code> and <code>||</code>: provide the text for individual [[#Cells|cells]] in the table.
* <code><nowiki>|}</nowiki></code>: marks the end of the table.
 
==Table Structure==
===Definition===
All tables must start with:
<nowiki>{|</nowiki>
The <code><nowiki>{|</nowiki></code> tag must be at the start of a new line.
 
Following the <code><nowiki>{|</nowiki></code> it is possible to provide any options that you wish to apply to the overall table. Common types of options include the table class, positioning the table on the page, and default text alignment for all cells.
 
One common mistake is to forget to close the table with:
|}
Although the wiki will try to fix the problem, the results are generally not what you wanted. If you find that parts of your table are showing up in strange places on the page, make sure that you have closed all of your tables. This <code>|}</code> tag must be at the start of a new line to be recognized.
 
===Rows===
To start a new row of the table use:
|-
The <code>|-</code> tag must be at the start of a new line. The contents of the row are '''not''' provided on the same row.
 
The only text that can be added following the <code>|-</code> tag are parameters to change the formatting of the row. For example:
* <code>|- style=text-align:left</code>
** This would make this one row all contain left-aligned text. "left" can be replaced by "right" or "center" for right-aligned or center-aligned text, respectively. This option applies only to the one row and will override any other options specified by the table's class or in the table's definition. However, individual cells may override the general row formatting.
* <code>|- valign=top</code>
** This makes all cells in the row be vertically "top-aligned", i.e., the text in the cells starts at the very top of the cell
 
===Cells===
Cells are generated either like this:
|cell1
|cell2
|cell3
or like this:
|cell1||cell2||cell3
 
===Header Cells===
Functions the same way as standard [[#Cells]], except "!" is used instead the opening "|". "!!" can be used instead of "||". Parameters still use "|", though!
 
===Captions===
Captions are not generally used with UESP tables. If you need to create one, however, use the tag:
|+ Caption
 
==ClassesOptions==
===Classes===
The CSS files on UESP provide several pre-formatted classes to make various tables. These are a quick way to get nice looking tables without needing to learn what all those other features do. The most commonly used ones are "wikitable", "greylapse", and "toc". In order to use them, add the parameter <code>class='''class'''</code> after the <code>{|</code> line in the chart. Examples:
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]].
 
{|
|}
Keep in mind that only ''one'' row can be bottom-sorted in this way, and there is no way to top-sort a row. Also, tables with row-spanning or column-spanning cells may not behave properly as sortable tables.
 
==TD==
Cells are generated either like this:
|cell1
|cell2
|cell3
or like this:
|cell1||cell2||cell3
which both equals
&lt;td&gt;cell1&lt;/td&gt;<td&gt;cell2&lt;/td&gt;&lt;td&gt;cell3&lt;/td&gt;
so "||" equals "newline"+"|"
 
Parameters in cells can be used like this:
|''params''|cell1
which will result in
&lt;td ''params''&gt;
 
==TH==
Functions the same way as TD, except "!" is used instead the opening "|". "!!" can be used instead of "||". Parameters still use "|", though!
 
==TR==
&lt;tr&gt; tags will be generated automatically for the first row. To start a new row, use
|-
which results in
&lt;tr&gt;
Parameters can be added like this:
|- ''params''
which results in
&lt;tr ''params''&gt;
 
Note:
* &lt;tr&gt; tags will be automatically opened at the first &lt;td&gt; equivalent
* &lt;tr&gt; tags will be automatically closed at &lt;tr&gt; and &lt;/table&gt; equivalents
 
==CAPTION==
Captions are not generally used with UESP tables. If you need to create one, however, &lt;caption&gt; tag is created by
|+ Caption
which generates
&lt;caption&gt;Caption&lt;/caption&gt;
Example:
{|class=greylapse
|+Caption
!1!!2!!3
|-
|Iron||Steel||Silver
|-
|Glass||Ebony||Daedric
|}
You can also use parameters:
|+ ''params''|Caption
which will generate
&lt;caption ''params''&gt;Caption
This can be used to among other things place the caption in a different location, e.g.:
{|width=100%
|-valign=top
|width=33%|
{|class=greylapse
|+align=left|Caption
!1!!2!!3
|-
|Iron||Steel||Silver
|-
|Glass||Ebony||Daedric
|}
|width=33%|
{|class=greylapse
|+align=bottom|Caption
!1!!2!!3
|-
|Iron||Steel||Silver
|-
|Glass||Ebony||Daedric
|}
|width=33%|
{|class=greylapse
|+align=right|Caption
!1!!2!!3
|-
|Iron||Steel||Silver
|-
|Glass||Ebony||Daedric
|}
|}
 
==Examples==
! RH 3 || ||
|}
 
== See Also ==
* [http://en.wikipedia.org/wiki/Help:Tables Wikipedia Help:Tables]