Editing/Basics of Tables

Tables are effective ways to display information and position content. Tables are simple to build. This guide will show you the parts of a table and how to put them together.

This table displays the different pieces of a table.

Mark-up	What it is
{\|	Table Openning tag - This is the first piece of a table. This must appear as the first thing on the line of code.
\|-	Row Divider - This defines the end of a row and the beginning of a new row. This must appear as the first thing on the line of code.
\|	Cell - This creates a cell in the table. This must appear as the first thing on the line of code.
!	Header Cell - This creates a cell that is styled as a header. This must appear as the first thing on the line of code.
\|\|	Cell - This creates a cell in the table. This does not appear as the first thing on the line of code. It comes after another cell or header cell on the line of code.
!!	Header Cell - This creates a cell that is styled as a header. This does not appear as the first thing on the line of code. It comes after another cell or header cell on the line of code.
\|}	Table Closing tag - This is the last piece of a table. This must appear as the first thing on the line of code.

These pieces are put together to create a table. The following are some examples to help you familiarize yourself with basic tables. Note that the "wiktable" class is added to each example. This gives the table its borders and background styling. Without the class, there would be no borders or background colors by default. Learn more about table classes in the Table Guide.

This is the code and result for a basic table:

{| class="wikitable"
| Cell Left
| Cell Right
|-
| Cell Bottom Left
| Cell Bottom Right
|}

Result:

Cell Left	Cell Right
Cell Bottom Left	Cell Bottom Right

This table uses header cells. The text in header cells is center aligned and bolded by default. With the "wikitable" class, the background of the header cell is also slightly darkened.

{| class="wikitable"
! Header One
! Header Two
|-
| Cell Left
| Cell Right
|-
| Cell Bottom Left
| Cell Bottom Right
|}

Result:

Header One	Header Two
Cell Left	Cell Right
Cell Bottom Left	Cell Bottom Right

This table uses the other method of cell separation. Notice it produces the same result as the above example

{| class="wikitable"
! Header One !! Header Two
|-
| Cell Left || Cell Right
|-
| Cell Bottom Left || Cell Bottom Right
|}

Result:

Header One	Header Two
Cell Left	Cell Right
Cell Bottom Left	Cell Bottom Right

Tables can contain almost anything including images, templates, and HTML elements. Example:

{| class="wikitable"
|-
| [[File:Gold.png|center|40px]]
| {{Like}}
|-
| <div style="width: 40px; border: red solid 3px; background-color: gold;">Hi</div>
| '''Bold'''
|}

Result:


Hi	Bold

Back

Return to Editing Guide List