How to make tables[]
What is a table?[]
A table is basically a frame of cells that hold content, not too much unlike the cells of a spreadsheet or the squares on a piece of graph paper. The number of cells is only limited by the space available to display the table.
Tables are made up of three major components: the individual data cells themselves; rows of cells; and columns of cells. Table rows are horizontal groupings of data cells, table columns are vertical groupings of data cells. Here are a few simple tables, showing a cell in red, a row in blue, and a column in green:
| Data cell | Data cell |
| Data cell | Data cell |
| Data cell | Data cell |
| Data cell | Data cell |
| Data cell | Data cell |
| Data cell | Data cell |
There is also a special type of cell called a header cell. Header cells come with some standard styling: they are center aligned and are bolded automatically. Here's an example of a table with a header row:
| Header cell | Header cell |
|---|---|
| Data cell | Data cell |
How do you make a table?[]
To make a table, you have to use a few special mediawiki markup language characters:
{|Table start - A bracket followed by a pipe. This is the table start character. This tells the mediawiki software that you're starting a table.|+Caption - Adds a table caption before the first row of the table, outside the table boundary.!Header cell start - An exclamation point. This tells the mediawiki software that you are starting a new header cell.|-Row start - A pipe followed by a dash. This tells the mediawiki software that you are starting a new table row.|Data cell start - Single pipe. This tells the mediawiki software that you are starting a new table cell.|}Table end - A pipe followed by a bracket. This tells the mediawiki software that you are done with the table.
Let's look at that simple 4 cell table again, a 2 row, 2 column table. You'll need to start with the table start character, telling mediawiki "Let's make a table":
{| <--- this starts the table
Let's add a row of header cells at the top. All mediawiki table markup goes in order of rows, from the top to the bottom of the table. So we're going to need to tell it to make two header cells. We're going to fill those header cells with the words Action and Reaction by adding a space after the exclamation point that makes the header cell and typing the contents of the cell immediately following on the same line:
{|
! Action <--- this adds the first header cell in the header row, column 1
! Reaction <--- this adds the second header cell in the header row, column 2
Now we need to start the second row. You can add a line break so it's easy to see the different rows:
{|
! Action
! Reaction
|- <--- this tells mediawiki to start a new row
We are going to make the two cells in the top row of data cells next:
{|
! Action
! Reaction
|-
| Car <--- this adds the first table cell in row 2, column 1
| Chase <--- this adds the second table cell in row 2, column 2
Now let's add that second row of data cells. We'll fill those with Thunder and Bark:
{|
! Action
! Reaction
|-
| Car
| Chase
|- <--- this starts the third row
| Thunder <--- this adds the first table cell in row 3, column 1
| Bark <--- this adds the second table cell in row 3, column 2
Now all we have to do is end the table:
{|
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|} <--- this tells mediawiki to end the table
This is what that table will look like:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
If you want to add a caption to your table you'd do it like this:
{|
|+ Stupid stuff my dog does <--- add table caption here
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This is what that table will look like:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
What can I put in table cells?[]
You can fill the data cells with any content, including words, numbers, other mediawiki markup language styling like bulleted lists and numbered lists, images or even template and other tables. Here's a table filled with images:
{|
! Game
! Add-on
|-
| [[File:Gametitle-FO3.png]]
| [[File:Gametitle-FO3 OA.png]]
|-
| [[File:Gametitle-FNV.png]]
| [[File:Gametitle-FNV DM.png]]
|}
| Game | Add-on |
|---|---|
|
|
|
|
If you're going to use bulleted or numbered lists, mediawiki likes things like that to start on a new line. You'll have to place a line break after the data cell pipe like this:
{|
! To do
! Done
|-
| <--- starts the new cell, but start the list on a new line
# Buy cigars <--- start the list here
# Buy beer
# Buy ice cream
| <--- starts the new cell, but start the list on a new line
* Buy Pizza <--- start the list here
* Feed the dog
* Feed the kids
|}
| To do | Done |
|---|---|
|
|
How can I make a row or column span more than one cell?[]
Sometimes, you may want to make a row or column span more than one cell. Let's say you want to use a header to give a table a title. There are two commands you can use:
rowspan ="<-- insert number of cells to span in a column-->"colspan ="<-- insert number of cells to span in a row-->"
The rowspan command will merge any number of data cells together in a column. The colspan command will merge any number of data cells together in a row. Let's use colspan first.
{|
! colspan="3" | <--- this merges three data cells in the same row together.
You must place a pipe after the colspan command before the data content. After the pipe, you type the data for the three merged cells:
{|
! colspan="3" | Games <---this is row 1, columns 1, 2 & 3
Your table is now 3 cells wide, with a header row that spans 3 columns. Let's enter some data cells under that header row:
{|
! colspan="3" | Games
|- <--- this starts a new row
| FO1 <--- this is row 2, column 1
| FO2 <--- this is row 2, column 2
| Fo3 <--- this is row 2, column 3
|} <--- this ends the table
| Games | ||
|---|---|---|
| FO1 | FO2 | Fo3 |
You can do the same with rowspan:
{|
! rowspan="3" | Games <--- this is rows 1, 2 & 3, column 1
Since we've already got one column of cells, we only need to fill the second column for the other 3 rows:
{|
! rowspan="3" | Games <--- rows 1, 2 & 3, column 1
| FO1 <--- row 1, column 2
|- <--- starts a new row
| FO2 <--- row 2, column 2
|- <--- starts a new row
| FO3 <--- row 3, column 2
|}
| Games | FO1 |
|---|---|
| FO2 | |
| FO3 |
How to make tables sexy[]
Tables can be altered to look just about any way you want them to. You can change colors, fonts, borders, sizes, just about anything. There's two ways to do this, both a little more sophisticated than making that example table at top. You can use the site's custom style sheet (CSS) classes, which are preformatted styles that cover a lot of things you may want the tables to do, or you can use inline styling, which is adding the separate style elements to the table itself. Inline styling is more versatile, but you have to have a good understanding of html style commands. Using the site's predefined table classes is much easier, but they might not do exactly what you want your table to do. We'll cover CSS classes first.
Custom style sheet classes[]
All of the tables on this site use a uniform style that is defined in the site's CSS. This common styling is called a table "class". To make a Nukapedia style table, you simply declare the table class at the start of the table. Here's one of the tables we used above, but with the table class class="va-table" specified:
{| class="va-table" <--- this declares the table class and imports CSS styling
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Now it will have the standard Nukapedia table colors, sizes and borders. Here's the table with no styling at all on the left, standard wikitable styling in the center and Nukapedia "va-table" styling on the right:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
Notice how the tables don't line up? That's because each specific table class does a lot more than add background colors and borders. The table classes also define margins around the tables and spacing or padding (the extra room around the words) inside the tables, font sizes and lots more stuff. We'll get into that complicated stuff later.
Sub-classes[]
All tables on articles here use the va-table class. That's the standard class that controls the border color and size, font size and weight, line height, outside margins, cell padding and background colors. It does not control things like text alignment, table width, collapsing or row highlights. To change these, there are a certain number of table sub-classes you can also declare:
va-table-collapse- adding this class makes the table collapsible so that only the first table row is visible.va-table-highlight- adding this class to any specific table row makes that row a slightly darker color that the standard table background color, used to highlight a row.va-table-top- adding this class makes all text top aligned vertically.va-table-middle- adding this class makes all text middle aligned vertically.va-table-bottom- adding this class makes all text bottom aligned vertically.va-table-center- adding this class makes all text center aligned horizontally.va-table-left- adding this class makes all text left aligned horizontally.va-table-right- adding this class makes all text right aligned horizontally.va-table-full- adding this class makes the table a fixed width of 670px, a full article page wide.va-table-full-infobox- adding this class makes the table 380px wide to fit alongside an infobox.va-table-shaded- adding this class makes the table highlight every other row.
To add a sub-class, you simply add it after the main table class. Make sure you add a space in between each class class="va-table va-table-center va-table-full":
{| class="va-table va-table-center va-table-full" <--- add classes here
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
You can add classes to individual table rows, too:
{| class="va-table va-table-center va-table-full"
! Action
! Reaction
|- class="va-table-right" <-- adds a class to the second row only
| Car
| Chase
|- class="va-table-left" <-- adds a class to the third row only
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
There are also a few standard mediawiki table classes you can use to style your table that aren't specific to the site CSS:
sortable- this class makes the table columns sortable by clicking on the header cell.mw-collapsible- another way to make the table collapsible.mw-collapsed- used with the above to make the table collapsed on page load.
Add these classes just like our site CSS classes:
{| class="va-table sortable mw-collapsible mw-collapsed" <--- add classes here
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
Inline styling[]
There are many things you may want to do with your table that we don't have a predefined class for. Custom column widths, row heights, borders, background or text colors, font styling, etc. All these things can be done, but have to be done using inline styling commands. We'll cover a few of the most basic ones.
Colors[]
You can change the cell background color and text color, using inline styling. Inline styling can be applied to the entire table, a single row or a single cell. The command to apply inline styling is similar to applying classes. You insert style=" <--- insert style commands here ---> " at the table start, row start or data cell start. Each individual style command is separated by a colon ";". Background color and text color commands are:
background-color:color;- changes the background color of cells, where "color" is either a standard html color name, hex color value or RGB value.color:color;- changes the color of text, where "color" is either a standard html color name, hex color value or RGB value.
What are standard html color names, hex codes and RGB values? Glad you asked. You can find all the standard color names, hex codes or RGB values at http://www.w3schools.com/html/html_colors.asp. They even have a fancy convertor to convert from RGB to hex. Let's use some of them fancy colors and change the background color in out table:
{| class="wikitable" style="background-color:#FFDAB9" <--- add here to effect the entire table
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
That looks nice. But notice the header background color did not change. You have to change that separately. Let's change that on the header row:
{| class="wikitable" style="background-color:#FFDAB9"
! style="background-color:#FFA07A" | Action <--- add here to effect only the header
! style="background-color:#FFA07A" | Reaction <--- add here to effect only the header
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
You can change the background color of a single cell if you want:
{| class="wikitable" style="background-color:#FFDAB9"
! style="background-color:#FFA07A" | Action
! style="background-color:#FFA07A" | Reaction
|-
| Car
| Chase
|-
| Thunder
| style="background-color:#20B2AA" | Bark <-- changes only this cell
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
Now let's see about changing the color of the text. Remember to separate each style command with a colon (;):
{| class="wikitable" style="background-color:#FFDAB9; color:#167D77" <--- add here
! style="background-color:#FFA07A" | Action
! style="background-color:#FFA07A" | Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
This will render:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
Just like background color, you can change the text color of any individual cell also.
Borders[]
OK. Things are starting to get a little complex. Let's talk about borders. There's two kinds of borders you can use on a table. Collapsed and separate. Here's what they look like, the separate on the left, the collapsed on the right:
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
| Action | Reaction |
|---|---|
| Car | Chase |
| Thunder | Bark |
All of our tables here use border-collapse:collapse</code, inherited from the CSS. If you are building a table from scratch, not using the va-table class, you may want to change the borders. Here's a quick example of how to do that:
{| style="border:1px solid black"
! style="border:1px solid black" | Action
! style="border:1px solid black" | Reaction
|-
| style="border:1px solid black" | Car
| style="border:1px solid black" | Chase
|-
| style="border:1px solid black" | Thunder
| style="border:1px solid black" | Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
With collpased borders:
{| style="border:1px solid black; border-collapse:collapse"
! style="border:1px solid black" | Action
! style="border:1px solid black" | Reaction
|-
| style="border:1px solid black" | Car
| style="border:1px solid black" | Chase
|-
| style="border:1px solid black" | Thunder
| style="border:1px solid black" | Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
You can also make a table without border by simply not declaring any:
{|
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
Formatting text[]
You can change to text size, font, weight and style. Here's an example:
{| class="wikitable" style="font:15px arial; font-style:italic; font-weight:bold"
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
For more on styling fonts, see http://www.w3schools.com/css/css_font.asp
Widths and heights[]
You can use styling commands to set the width and height of you table. Let's set the table to 300 pixels wide:
{| class="wikitable" style="width:300px" <--- sets the width of the entire table
! Action
! Reaction
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
You can set individual columns to any width also:
{| class="wikitable"
! style="width:100px" | Action <--- sets the width of the first column
! style="width:200px" | Reaction <--- sets the width of the second column
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
You can do this either by using a fixed width (in pixels or ems) or by percentages. To use percentages, you must first set a fixed table width, then set each column width by percentage:
{| class="wikitable" style="width:300px"
! style="width:25%" | Action <--- sets the width of the first column
! style="width:75%" | Reaction <--- sets the width of the second column
|-
| Car
| Chase
|-
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
You can also set the height of the entire table, or just one row:
{| class="wikitable" style="height:100px" <--- sets the height of the entire table
! Action
! Reaction
|-
| Car
| Chase
|- style="height:50px" <--- sets the height of just this row
| Thunder
| Bark
|}
Renders:
Action
Reaction
Car
Chase
Thunder
Bark
More help[]
For further help and examples, see http://meta.wikimedia.org/wiki/Help:Table and http://www.mediawiki.org/wiki/Help:Tables