Gaming
 

Help:Table

From WoWWiki

HELP CONTENTS · Getting Started · New to WoWWiki · Editing WoWWiki · Editing WoWWiki (advanced) · The WoWWiki Community · Additional Help
See Wikia Help for general Wikia- and wiki- related help. See http://meta.wikimedia.org/ Meta-Wiki HelpIntro for basic MediaWiki usage!

MediaWiki supports different types of table syntax:

  1. Limited HTML syntax
  2. Pipe syntax (which this article covers)

See the Wikipedia article on HTML elements for notes on traditional HTML. Note, however, that the thead, tbody, tfoot, and colgroup elements are currently not supported in MediaWiki.[1]

The pipe syntax substitutes pipes (|) for HTML. The pipes must start at the beginning of a new line, except when separating optional parameters from content or when using || to separate cells on a single line.

Contents

Example table

{|
|-
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}

Would look like this:

header 1 header 2 header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3


Tables

Use {| to open a table. This is equivalent to <table> in HTML. Likewise, |} closes a table and is equivalent to </table> in HTML.

Parameters (such as align, style, and other properties) can be assigned with by adding them after the opening brackets.

For example: {| class="tableExample" would align the table to the center of the page.

Rows

To start a new row, use |- which is equivalent to <tr> in HTML. It is not necessary to close a row (nor is there any syntax to do so); merely start a new row or end the table.

Parameters can be added in the same manner: |- class="tableExample" would align the content inside the row to the center of the row.

Cells

Cells (<td></td> in HTML) are generated in one of two ways.

On separate lines:

|cell1
|cell2
|cell3

Or all on one line:

|cell1||cell2||cell3

These are both equivalent to <td>cell1</td><td>cell2</td><td>cell3</td>.

Parameters in cells can be used like this:

|class="tableExample"|cell1
|class="tableExample"|cell2
|class="tableExample"|cell3

Or in one line:

|class="tableExample"|cell1||class="tableExample"|cell2||class="tableExample"|cell3

It is, again, not necessary or possible to close a cell, simply start a new row or close the table.

Headers

Headers (cells at the top of tables which indicate what the cells below contain) function the same way as cells, except ! is used instead of the opening |. Parameters still use "|", though. For example:

!class="tableExample2"|cell1

Headers are equivalent to <th></th> in HTML.

Multiple header cells on one line:

!cell1!!cell2

Multiple header cells with cell modifications:

!class="tableExample3"|cell1!!style="background-color:gray;"|cell2!!width="30px"|cell3

Captions

Captions are hardly ever used. However, should it be necessary to create one, it is possible in pipe syntax.

An HTML <caption> tag is created by |+ You can also use parameters. |+ class="tableExample"|Caption

Cosmetic formatting

When possible tables should use the WoWwiki style. To create such a table the first line should read:

{| class="darktable"

This makes the table match the style of WoWwiki, rather than generic HTML. (see example under "Sorting" below)

Sorting

Some wikis support automatic addition of sort buttons to column headers using special CSS classes on the table.

For example: {| class="sortable" would add sort buttons to column headers, and {| class="sortable darktable" is used in the following example:

Example Sortable Table
Alphabetical Numerical Reputation Surname
A 4 2 Revered Kir James T Kirk
C 3 3 Honored Rod Gene Roddenberry
B 2 4 FriendlyAnd John Anderson
D 1 1 Exalted Aze Bill Azeroth

Vic The Reputation column uses hidden, non-displaying numbers to determine sort order:

<span style="display:none">#</span>

Non-displaying letters can also be used to sort a list by surname if desired. For long list you should include at least the first few letters for subsorting names that start with the same letter.

<span style="display:none">Aze</span> Bill Azeroth

Striped tables

In long tables, or in tables with multi-line rows, it may be desirable to visually distinguish rows. This is accomplished by making every other row use a different background with class="zebra" at the start, for example as follows:

{| class="darktable zebra"

This also works for sortable tables. The zebra tag ensures that the rows have alternating colors, even when the order of the rows is changed by sorting.

Example Striped Table
Alphabetical Numerical Reputation Surname
A 4 2 Revered Kirk
(James T.)
C 3 3 Honored Roddenberry
(Gene)
B 2 4 Friendly Anderson
(John)
D 1 1 Exalted Azeroth
(Bill)

If desired, you can manually control the striping by using class="alt" at the beginning of the desired rows, as follows:

|-class="alt"

Rows with this tag will have the alternative color. This method is only advisable for non-sortable tables.

References

External links

Tables can be used for displaying data, and also for creating box-type designs for pages on your Wikia.

Some HTML table tags are currently supported by MediaWiki, but there is no guarantee these will not be deprecated. For this reason, you are advised to use the wiki syntax, which is described on this page.

Note, the following information does not apply to the WYSIWYG mode of the new editor, though you will notice the syntax when in source mode

Contents

Markup

  XHTML Wiki syntax
Table <table></table>
{| params 
|}
Caption <caption></caption>
|+ caption
Row <tr></tr>
|- params 
Data cell <td>cell1</td>

<td>cell2</td>

| cell1
| cell2
Data cell <td>cell1</td> <td>cell2</td> <td>cell3</td>
|cell1||cell2||cell3
Header cell <th></th>
! heading

See also MetaWikipedia:Help:Table on Meta-Wiki for more markup information, including how to make tables sortable.

Sample table

1 2
3 4
XHTML Wiki syntax
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}

Notes

  • The entire table begins with {| and ends with the required |}.
  • A caption is a succinct way to describe your table, and can be included with |+ on the line after {|.
  • Table rows are horizontal groups of cells in the table. A row begins with |- and ends at the next row.
  • Table headings are cells with headings in them, and are often rendered in a bold font. They begin with !. Note that parameters are still separated from the actual content of the cell with |, however
  • Table data cells fill out the rest of the table. A cell begins with | or || and ends at the next cell.

Each row must have the same number of cells as the other rows, so that the number of columns in the table remains consistent (unless there are cells which span several columns or rows, but this is not discussed here). For empty cells, use the non-breaking space &nbsp; as content to ensure that the cells are displayed.

Complex layout (made simple)

This advanced example shows some of the options available for making tables. You can play with these settings in your own table to see what effect they have. Not all of these techniques may be appropriate in all cases; just because you can add colored backgrounds, for example, doesn't mean it's always a good idea. Try to keep the markup in your tables relatively simple — remember, other people are going to be editing the page too.

An example layout
First header Second header
upper left   right side
lower left lower middle
File:Wiki.png File:Wiki.png
Welcome to the twin cities

Your table code reflect the table structure. Although it is possible to compose complex layout as one table, it is generally not advisable. For simplicity, it is best to split the layout into small units.

Split it up

While you can nest table

layout code
An example layout
First header Second header
upper left   right side
lower left lower middle
A table in a table
File:Wiki.png File:Wiki.png
  {| border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" width="330"
  |+'''An example layout'''
  |-
  ! First header
  ! colspan="2" | Second header
  |-
  | upper left
  |  
  | rowspan=2 | right side
  |-
  | | lower left
  | | lower middle
  |-
  | colspan="3" align="center" |
  {| border="0"
  |+''A table in a table''
  |-
  || [[File:Wiki.png]]
  || [[File:Wiki.png]]
  |}
  |}

It may be better to split the tables up:

layout code
An example layout
First header Second header
upper left   right side
lower left lower middle
File:Wiki.png File:Wiki.png
  {| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
  |+'''An example layout'''
  |-
  ! First header
  ! colspan="2" | Second header
  |-
  | upper left
  |  
  | rowspan=2 | right side
  |-
  | | lower left
  | | lower middle
  |}

  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[File:Wiki.png]]
  || [[File:Wiki.png]]
  |}

Don't use table for simple box

Table code should be used for tables only. For simple boxes, use <div></div> instead. For example, instead of:

layout code
File:Wiki.png File:Wiki.png

Welcome to the twin cities

  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[File:Wiki.png]]
  || [[File:Wiki.png]]
  |-
  | align="center" colspan="2" style="border-top:1px solid red;"|
  Welcome to the twin cities
  |}

You may use

layout code
File:Wiki.png File:Wiki.png
Welcome to the twin cities
  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[File:Wiki.png]]
  || [[File:Wiki.png]]
  |-
  | align="center" colspan="2"|
  <div style="border:1px solid red;">Welcome to the twin cities</div>
  |}

The complete code

An example layout
First header Second header
upper left   right side
lower left lower middle
File:Wiki.png File:Wiki.png
Welcome to the twin cities
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''An example layout'''
|-
! style="background:#efefef; color:#000;" | First header
! colspan="2" style="background:#ffdead; color:#000;" | Second header
|-
| upper left
|  
| rowspan=2 | right side
|-
| | lower left
| | lower middle
|}

{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Welcome to the twin cities</div>
|}

See also

  • MetaWikipedia:Help:Table on Meta-Wiki, upon which this page was based. This page has more detailed information, and also has a number of external links to sites offering HTML-to-wiki-conversion.
  • Help:Editing

External links