Help:Tables

Writing tables in wiki code is difficult from the get-go, but it is significantly easier if you have experience with creating tables using HTML. On that note, HTML can also be used to create tables within the wiki. In this tutorial, we will be using HTML along side the wiki code to provide a better understanding of both.

Note on HTML

Throughout this article, HTML and Wiki Code are shown side by side. The reason for this is twofold: So those experienced with HTML can look at the HTML code and have a better idea of what is going on, and so those who don't know HTML table code can learn both.

It has been mentioned that some examples of the HTML tables may include deprecated code. If you notice specific cases, or any other errors, please point them out.

The Basic Structure

Building Blocks

In HTML, table tags are used to begin and end a table. A similar idea is present in wiki code, using the curled bracket and pipe to begin and end a table. Note that these have to be the first characters on a line, or they will be ignored by the wiki. Examples:

• HTML
  • Open table: <table>
  • Close table: </table>
• WIKI
  • Open table: {|
  • Close table: |}

This forms the containing body of the table.

Next is the rows. In HTML, a opening and closing tag is required to begin and end a row. This is different in Wiki code, as a single set of a pipe and dash (followed by hitting enter once) and is needed only at the start of a new row. Note: The pipe-dash is not needed on the first row of a wiki table, unless setting attributes for said row. Examples:

• HTML
  • Begin row: <tr>
  • End row: </tr>
• WIKI
  • Begin row: |-

Rows contain the cells.

Finnally, of the basic structure, there are cells. In HTML, a cell is defined by it's opening and closing tags. As with rows, the wiki equivalent is also fairly different using a simple pipe to begin a cell, and a double pipe to separate cells on the same line. Example:

• HTML
  • Begin cell: <td>
  • End cell: </td>
• WIKI
  • Begin cell: |
  • Separate cells: || (or press enter)

Cells contain the table's actual content.

Putting Them Together

HTML TABLE	WIKI TABLE
Step 1 - Starting the table
To begin our basic HTML table, we start with the opening tag, <table>. I perfer to hit enter immediately after this tag so it's easier to find the beginning of the table. <table>	To begin our basic wiki table, we start with the opening characters, {|. Unless you are putting tags here, hitting enter is necessary. {|
Step 2 - Starting a row
Next, we have to add our first row, by using the <tr> tag. <table> <tr>	Next, we have to add our first row, by using the characters |-. Again, unless you are putting tags here, hitting enter is necessary. While this is not necessary for the first row in most cases, it is included here for demonstration purposes. {| |-
Step 3 - Adding a cell
Next, we have to add our first cell, by using the <td> and </td> tags. We'll also be putting some content between them. <table> <tr> <td>This is content</td>	Next, we have to add our first cell, by using the| character. Unless you are putting tags here, the content come immediately after. No closing "tag" is needed. {| |- | This is content
Step 4 - Adding another cell. Note: If you do not wish to add another cell, skip this step.
Next, we will add our second cell, by using the <td> and </td> tags again. We'll be putting some content between them as well. <table> <tr> <td>This is content</td> <td>This is more content</td>	Next, we will add our second cell, by pressing enter, and using the | character again. We'll be putting some content here as well. Alternatively, instead of pressing enter and adding a new |, you can instead simply add || on the same line, and add the content there. The example to the right uses the former method. {| |- | This is content | This is more content
Step 5 - Finishing off the row.
To end the row, simply add the </tr> tag. <table> <tr> <td>This is content</td> <td>This is more content</td> </tr>	This step is not needed using wiki table code. {| |- | This is content | This is more content
Step 6 - Adding another row. Note: If you do not wish to add another row, skip this step.
To add another row, repeat steps 2 Thru 5. <table> <tr> <td>This is content</td> <td>This is more content</td> </tr> <tr> <td>This is even more content</td> <td>This is EVEN MORE content</td> </tr>	To add another row, repeat steps 2 Thru 5 . {| |- | This is content | This is more content |- | This is even more content | This is EVEN MORE content
Step 7 - Finishing the table.
Put </table> at the end and you're done! Hit preview to look at your work. <table> <tr> <td>This is content</td> <td>This is more content</td> </tr> <tr> <td>This is even more content</td> <td>This is EVEN MORE content</td> </tr> </table>	Put |} at the end and you're done! Hit preview to look at your work.. {| |- | This is content | This is more content |- | This is even more content | This is EVEN MORE content |}
Step 8 - The finished product. Following the steps above, the table should look similar to these. It may be wider, filling the entire page, and it might different from browser to browser.
This is content This is more content This is even more content This is EVEN MORE content	This is content This is more content This is even more content This is EVEN MORE content

Advanced Formatting

Generally, the exact same attributes can be added to both HTML Table Tags and Wiki Tables to produce the same, or similiar results.

Background Color

The syntax is
bgcolor="#00ff00"	-or-	bgcolor="green"
The following can also be used on HTML and Wiki tables, and uses "style" statements (preferred)
style="background:#00ff00"	-or-	style="background:green"

The above will change the background color of an entire table, row or a single cell, depending on where it is put. Note that either Hexadecimal Color Codes or Color Names can be used. Using names is highly encouraged. Row's color overrides table's color, and cell's overrides row's color. To color a column, you have to set every cells's color invidually.

Example:

HTML Code (top) and Wiki Code (Bottom)	Result
<table> <tr bgcolor="#bbbbbb"> <td>The cells in this row</td> <td>are light grey</td> </tr> <tr style="background:grey"> <td>The cells in this row</td> <td>are simply grey</td> </tr> </table>	The cells in this row are light grey The cells in this row are simply grey
{| |-bgcolor="#bbbbbb" | The cells in this row | are light grey |-style="background:grey" | The cells in this row | are simply grey |}
<table style="background:yellow"> <tr> <td>This table is yellow</td> <td bgcolor="green" >But this cell is green</td> </tr> <tr bgcolor="blue"> <td>This row is blue</td> <td style="background:red">And this cell is red</td> </tr> </table>	This table is yellow But this cell is green This row is blue And this cell is red
{| style="background:yellow" |- | This table is yellow | bgcolor="green" | But this cell is green |- bgcolor="blue" | This row is blue | style="background:red" | And this cell is red |}

Color; scope of parameters

Two ways of specifying color of text and background for a single cell are as follows. The first form is preferred:

Wiki markup {| | style="background:red; color:white" | abc | def | bgcolor="red" | <font color="white"> ghi </font> | jkl |} What it looks like in your browser abc def ghi jkl Like other parameters, colors can also be specified for a whole row or the whole table; parameters for a row override the value for the table, and those for a cell override those for a row: Wiki markup {| style="background:yellow; color:green" |- | abc || def || ghi |- style="background:red; color:white" | jkl || mno || pqr |- | stu || style="background:silver" | vwx || yz |} What it looks like in your browser abc def ghi jkl mno pqr stu vwx yz

Width and height

You can set the width and height of the whole table, and width of a column and height of a row. To set the width of a column, you must specify width of a single cell on that column.

The syntax is
width="80%" height="100px"	-or-	style="width:80%; height:100px"

Either of these would create a table that fills 80% of the screen horizontally, and is exacly 100 pixels high.

Wiki markup {| style="width:80%; height:100px" border="1" |- | This table fills 80% of the space available to it, | and is 100 pixels high |- style="height:50px" | style="width:75%" |This column takes 75% of the table | and this row is 50 pixels high |- | I'm really running out of | things to say |} What it looks like in your browser This table fills 80% of the space available to it, and is 100 pixels high This column takes 75% of the table and this row is 50 pixels high I'm really running out of things to say

Cell Spacing and Padding

Cell padding and spacing are two mostly overlooked features of tables. Cellpadding is the margins of a cell, and cellspacing is the distance between them. Observe the following.

Cellspacing		Cellpadding
Normal	Cellspacing of 10 pixels	Normal	Cellpadding of 10 pixels
Cell X Cell Y Cell Z Cell Q	Cell X Cell Y Cell Z Cell Q	Cell X Cell Y Cell Z Cell Q	Cell X Cell Y Cell Z Cell Q
Wiki Code for the Above
{| border="1px" cellspacing="10" |- |Cell X |Cell Y |- |Cell Z |Cell Q |}		{| border="1px" cellpadding="10" |- |Cell X |Cell Y |- |Cell Z |Cell Q |}
HTML Code for the Above
<table border="1px" cellspacing="10"> <tr> <td>Cell X</td> <td>Cell Y</td> </tr> <tr> <td>Cell Z</td> <td>Cell Q</td> </tr> </table>		<table border="1px" cellpadding="10"> <tr> <td>Cell X</td> <td>Cell Y</td> </tr> <tr> <td>Cell Z</td> <td>Cell Q</td> </tr> </table>

Positioning

You can position the whole table, content of a single row or content of a single cell. You can define positioning in either horizontal or vertical direction.

Align

---

Align keyword controls the horizontal positioning. Normally everything is positioned to the left. Align has two possible values: right and center.

The location of align word controls the word's scope. See following examples for clarification.

Whole table, right - Wiki markup {| border="1" align="right" |- |text||text||text |- |long text||longer text||even longer text |- |medium||large||extra large |} What it looks like in your browser text text text long text longer text even longer text medium large extra large Note: that aligning tables to right might cause unexpected results with some browsers. In some cases the table will overlap other elements on the page. (just right here). Whole table, center - Wiki markup {| border="1" align="center" |- |text||text||text |- |long text||longer text||even longer text |- |medium||large||extra large |} What it looks like in your browser text text text long text longer text even longer text medium large extra large Row, right - Wiki markup {| border="1" |- align="right" |text||text||text |- |long text||longer text||even longer text |- |medium||large||extra large |} What it looks like in your browser text text text long text longer text even longer text medium large extra large Row, center - Wiki markup {| border="1" |- align="center" |text||text||text |- |long text||longer text||even longer text |- |medium||large||extra large |} What it looks like in your browser text text text long text longer text even longer text medium large extra large Notice that in both examples only the first row was affected. To align also the other rows to the right you would need to put align to every row, or alternatively use text-align with style: Text-align - Wiki markup {| border="1" style="text-align:center" |- |text||text||text |- |long text||longer text||even longer text |- |medium||large||extra large |} What it looks like in your browser text text text long text longer text even longer text medium large extra large Cells follow the same principle, align will only affect one cell. They will otherwise work as rows.

Valign

---

Valign, or vertical align, controls the vertical position of the text. Valign can have to values, top or bottom.

Compare these two examples. On the first, no valign tags are used. On the second, both top and bottom tags are used, top for the middle row and bottom for the bottom row. As you can see on the first one, the default for vertical alignment is middle.

Wiki markup {| border="1" |- |text||text||text |- |min||max||some<br>really<br>long<br>text |- |medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large |} What it looks like in your browser text text text min max some really long text medium large large extra large extra large extra large Wiki markup {| border="1" |- |text||text||text |- valign="top" |min||max||some<br>really<br>long<br>text |- valign="bottom" |medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large |} What it looks like in your browser text text text min max some really long text medium large large extra large extra large extra large

Row and Column Span

There are two attributes, rowspan and colspan, that can expland cells accross rows and columns, respectively.

The syntax is
rowspan="3"	-and-	colspan="5"

These are placed where the cell's attributes would go, as show in the examples below.

HTML Code (top) and Wiki Code (bottom)	Result
<table border="1"> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> <td>Row 1, Col 3</td> <td>Row 1, Col 3</td> </tr> <tr> <td colspan="3">Row 2, Col 1-3</td> <td>Row 2, Col 4</td> </tr> </table>	Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 2, Col 1-3 Row 2, Col 4
{| border="1" |- | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 | Row 1, Col 4 |- | colspan="3" |Row 2, Col 1-3 | Row 2, Col 4 |}
<table border="1"> <tr> <td rowspan="2">Row 1-2, Col 1</td> <td>Row 1, Col 2</td> <td>Row 1, Col 3</td> <td>Row 1, Col 3</td> </tr> <tr> <td>Row 2, Col 2</td> <td>Row 2, Col 3</td> <td>Row 2, Col 3</td> </tr> </table>	Row 1-2, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
{| border="1" |- | rowspan="2" |Row 1-2, Col 1 | Row 1, Col 2 | Row 1, Col 3 | Row 1, Col 4 |- | Row 2, Col 2 | Row 2, Col 3 | Row 2, Col 4 |
<table border="1"> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> <td>Row 1, Col 3</td> <td>Row 1, Col 4</td> </tr> <tr> <td rowspan="2" colspan="2">Row 2-3, Col 1-2</td> <td>Row 2, Col 3</td> <td>Row 2, Col 3</td> </tr> <tr> <td>Row 3, Col 3</td> <td>Row 3, Col 3</td> </tr> </table>	Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 2-3, Col 1-2 Row 2, Col 3 Row 2, Col 4 Row 3, Col 3 Row 3, Col 4
{| border="1" |- | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 | Row 1, Col 4 |- | rowspan="2" colspan="2" |Row 2-3, Col 1-2 | Row 2, Col 3 | Row 2, Col 4 |- | Row 3, Col 3 | Row 3, Col 4 | |}

Rounded corners

The syntax is
for all corners	style="{{border-radius|20px}}"
for specific corners	style="-moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em;" style="-moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em;" style="-moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em;" style="-moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em;"

All corners rounded Wiki markup {| style="border:1px; {{border-radius|2em}} padding: 2em;" |- |Cool rounded corners |} What it looks like in your browser Cool rounded corners Specific corners rounded Wiki markup {| style="border:1px; -moz-border-radius-bottomright: 2em; -webkit-border-bottom-right-radius: 2em; padding: 2em;" |- |Cool rounded corners |} What it looks like in your browser Cool rounded corners

Note: Rounded corners work in most modern browsers (except Internet Explorer 8 and lower), though the code used here for individual corners will not work in all browsers.

Editing Help Basic Editing Creating Pages Creating Group or Character Pages Basic Formatting Links Lists Ignoring Formatting Wikipedia's Cheat Sheet Advanced Editing Tables Images and other Media Categories Web Colours Advanced Timesavers Magic Words Quick Reference Page Tricks Redirection Templates Moving Pages Communicating your Edits Edit Summaries Minor Edits Edit Conflicts Miscellaneous User Preferences Special Case Workarounds Good Editing Practices Signatures Templated Signatures Tracking Changes

Policies and Guidelines Guidelines Style Guide Location Style Guide Block Style Guide Category Style Guide Policy Documents Namespaces Specific Case Editing Guidelines Vandalism Policy Dicussion