Help:Creating and formatting tables
From CurriculumWiki
Hint: You can open a new web browser window to create your account and leave this window opened to this Help page. In Internet Explorer, you can open a new window by pressing and holding ctrl and then pressing the n key. In Safari, you can open a new window by pressing command-n or a new tab by pressing command-t.
Pipe syntax
Wikitext uses the pipe character "|" to create tables.
- A table begins and ends with curly brackets and a pipe: "
{|" <---between those---> "|}". - An optional table caption is included with a line "
|+caption " after "{|". - To start a new table row, type a line and a dash: "
|-", press Enter (to skip down a line), and type the codes for each cell in that row, separated by newline or "|" - Column headings are identified by using "!" instead of "|", except for the separator between a cell parameter and a value; the difference with a normal row depends on the browser, column headings are often rendered in a bold font.
- The first cell of a row is identified as row heading by starting the line with "!" instead of "|", and starting subsequent data cells on a new line.
Most parameters for formatting tables and cells work the same in HTML and Wikitext. You can find more information about the table element from the World Wide Web Consortium and Wikipedia. However, the thead, tbody, tfoot, colgroup, and col elements are not recognized in Wikitext.
| What it looks like | What you type | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Here are two simple ways to create a basic table:
|
Here are two simple ways to create a basic table:
{|
| Col 1, row 1
| Col 2, row 1
|-
| Col 1, row 2
| Col 2, row 2
|}
{|
|+'''Second Table'''
!Column 1 || Column 2
|-
| Col 1, row 1 || Col 2, row 1
|-
| Col 1, row 2 || Col 2, row 2
|}
| ||||||||||||||||||||
|
Here are two tables with some basic formatting:
|
Here are two tables with some basic formatting:
<br>
'''First Table'''
{| width="50%" border="1" cellpadding="2" cellspacing="0"
| Col 1, row 1
| Col 2, row 1
|-
| Col 1, row 2
| Col 2, row 2
|}
<br>
{| width="100%" border="3" cellpadding="5" cellspacing="5"
|+'''Second Table'''
!Column 1 || Column 2
|-
| Col 1, row 1 || Col 2, row 1
|-
| Col 1, row 2 || Col 2, row 2
|}
| ||||||||||||||||||||
|
You can specify background and font colors for tables and cells.
|
You can specify background and font colors for
tables and cells.
'''Table Colors'''
{| style="background:red; color:white" |
| Col 1, row 1 || Col 2, row 1
|-
| Col 1, row 2 || Col 2, row 2
|}
{| align="center" cellpadding="5" cellspacing="5"
|+'''Cell Colors'''
| bgcolor="red" | Col 1, row 1 |
| bgcolor="blue" | <font color="white"> Col 2, row 1
|-
| bgcolor="yellow" | Col 1, row 2 |
| bgcolor="green" | <font color="white"> Col 2, row 2
|}
| ||||||||||||||||||||
|
There are sixteen named colors you can use. It is usually wise to employ these colors sparingly. It is a good rule of thumb to use color only when it is necessary to make a distinction or the color itself conveys important information.
|
There are sixteen named colors you can use. It is
usually wise to employ these colors sparingly. It
is a good rule of thumb to use color only when it
is necessary to make a distinction or the color
itself conveys important information.
{| style="width:100%; border:0; text-align:center"
|style="background:black; color:white" |Black
|style="background:silver; color:black" |Silver
|style="background:maroon; color:white" |Maroon
|style="background:red; color:white" |Red
|-
|style="background:navy; color:white" |Navy
|style="background:blue; color:white" |Blue
|style="background:purple; color:white" |Purple
|style="background:fuchsia; color:white" |Fuchsia
|-
|style="background:green; color:white" |Green
|style="background:lime; color:black" |Lime
|style="background:olive; color:white" |Olive
|style="background:yellow; color:black" |Yellow
|-
|style="background:teal; color:white" |Teal
|style="background:aquamarine; color:black" |Aquamarine
|style="background:gray; color:black" |Gray
|style="background:white; color:black" |White
|-
|style="width:25%" |
|style="width:25%" |
|style="width:25%" |
|style="width:25%" |
|}
| ||||||||||||||||||||
|
Sometimes it is convenient to use a table to create a text box. You can use the "align" attribute to position the text box.
You can also use colors that are not predefined if you know their hexadecimal code. Here is a text box created from a table that uses the CurriculumWiki color scheme. |
Sometimes it is convenient to use a table to create a
text box. You can use the "align" attribute to position
the text box.
{| align="right" style="background:#FFEFCF;border:#F7941D"
!Text Box
|-
|
*Here's a fact.
*Another fact.
*One last fact.
|}
You can also use colors that are not predefined if you
know their hexadecimal code. Here is a text box created
from a table that uses the CurriculumWiki color scheme.
|
