Help:Table

From the Pokémon Wiki, a Pokémon encyclopedia
Jump to navigationJump to search

Tables can be used for displaying data and for creating box-type designs for pages on this wiki.

Markup[edit]

There are many ways to create a table. Below shows the most basic example of creating a table, but users are asked to add either class="table" (for black borders) or class="wikitable" (a predetermined format by the MediaWiki software that gives it gray borders and headers) after the {|.

  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

You can add "sortable" within the class (e.g. class="wikitable sortable) to add arrows, allowing you to sort certain table columns.

Sample tables[edit]

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
|}

With the "table" class applied:

1 2
3 4

With the "wikitable" class applied:

1 2
3 4
Table Wikitable
{| class="table"
| 1 || 2
|- 
| 3 || 4
|}
{| class="wikitable"
| 1 || 2
|- 
| 3 || 4
|}

Notes[edit]

  • 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)[edit]

This advanced example shows some of the options available for making tables. Users are advised to not add this in articles, as several of these options are already incorporated in the "table" class (which is has been defined in Common.css). 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
Example.png Example.png
Welcome gamers

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[edit]

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
Example.png Example.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:Example.png]]
  || [[File:Example.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
Example.png Example.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:Example.png]]
  || [[File:Example.png]]
  |}

Don't use table for simple box[edit]

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

layout code
Example.png Example.png

Welcome gamers

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

You may use

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

The complete code[edit]

An example layout
First header Second header
upper left   right side
lower left lower middle
Example.png Example.png
Welcome gamers
{| 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:Example.png]]
|| [[File:Example.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Welcome gamers</div>
|}

Attribution[edit]

The original policy page was from Wikia Central.