Help:Tables
From SWGames, the Star Wars Games Wiki, currently editing over 2,066 articles
Here's how to create a table:
[edit] Code
To create a table, you will first need to understand what the symbols mean:
- {| - Signifies the start of a table.
- |} - Signifies the end of a table.
- |+ - Signifies the caption of a table; what text will appear above it, labeling it.
- |- - Signifies the start of a table row.
- | - Signifies the start of a regular table cell.
- ! - Signifies the start of a header table cell. The text within a header cell is boldfaced.
- || - Signifies the switch to a new cell within a row.
- !! - Signifies the switch to a new header cell within a row.
[edit] Usage
Here is how you would use these symbols appropriatly:
{|
|+ This is the caption for my table.
|-
! These !! are !! my !! table !! headers
|-
| These || are || my || regular || cells
|}
[edit] Styling
To modify a specific cell, a row, or the entire table, you would use the style attribute:
Placing the style attribute after the {| symbol alters the entire table:
{| style="font-family: (a font family);border: (a thickness)"
Placing the style attribute after the |+ symbol alters the table's caption. Use the pipe symbol to divide it from the text:
|+ style="font-family: (a font family);color: (# a color)" | This is the caption for my table.
Placing the style attribute after the |- symbol alters the entire row that follows it:
|- style="font-family: (a font family);color: (# a color)"
Placing the style attribute after the | symbol alters a single cell. Use the pipe symbol to divide it from the text:
| style="font-family: (a font family);color: (# a color)" | These || are || my || regular || cells
Please note that styling a single cell has the most precedence. This means that if you style the table's background red, and style a single cell black, the single cell will appear black, rather than red.
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
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 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.
| First header | Second header | |
|---|---|---|
| upper left | right side | |
| lower left | lower middle | |
|
|
|
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 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{| 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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
{| 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 | ||||
|---|---|---|---|---|---|
|
{| 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 | ||||
|---|---|---|---|---|---|
|
{| 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
| First header | Second header | |
|---|---|---|
| upper left | right side | |
| lower left | lower middle | |
|
|
|
|
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
