We use tables frequently on Nukapedia to help us organize information in a succinct way. You can use tables for a variety of data, including words, numbers, bulleted and numbered lists, images, or even templates and other tables.

Intro

The current way we create tables uses a standard table class called "va-table" which stands for "vault table." It was written by former b-crat Porter21 in 2011. Holds up pretty well, eh? I sure think so. I use these tables for all sorts of things, and think they make it easier to find and sort information while being so versatile. So off we go, to learn all about how to make tables.

One last thing, the content here is from a lesson written for Vault Academy's predecessor, the New User Network, which is why it looks much better than the lessons you are used to.

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:

Stupid stuff my dog does
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
Gametitle-FO3.png Gametitle-FO3 OA.png
Gametitle-FNV.png Gametitle-FNV DM.png

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
  1. Buy cigars
  2. Buy beer
  3. Buy ice cream
  • Buy Pizza
  • Feed the dog
  • Feed the kids

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:

  • mw-collapsed - adding this class makes the table collapsible so that only the first table row is visible.
  • mw-collapsible - 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



Kate's faves

A few other things that I use pretty often, I want to throw in here at the end.

Remember that if you use "!" on the left, it will be the darker shade. If you use "|" it will be lighter. And to make a line, use "|-"

{| class="va-table va-table-center"
! Action  
! Reaction  

|-
| Car  
| Chase  

|-
| Thunder
| Bark
|}

Renders:

Action Reaction
Car Chase
Thunder Bark

But if you flip them

{| class="va-table va-table-center"
| Action  
| Reaction  

|-
! Car  
! Chase  

|-
! Thunder
! Bark
|}

It looks like:

Action Reaction
Car Chase
Thunder Bark

Oh and if you want to change the width of the entire table, use this:

  • class="va-table va-table-center "style="width: 60%;" - add a percentage like this to make your entire table wider. The percentage equates to the page itself, so 30% means 30% across the page.
{| class="va-table va-table-center "style="width: 60%;"  
! Action  
! Reaction  

|-
| Car  
| Chase  

|-
| Thunder
| Bark
|}

This will render (I have 60, 40, and 20% below to show the difference):

Action Reaction
Car Chase
Thunder Bark
Action Reaction
Car Chase
Thunder Bark
Action Reaction
Car Chase
Thunder Bark


Ok, one more thing, I promise. If you have columns, you can make those percentages as well. Say you have an icon on one side and text on the other. You don't need them to be equal, so you can change up the widths. You can also add sub-headers this way (and make them bold or add icons!)

{| class="va-table va-table-center "style="width: 60%;"  
! style="width: 20%;" | '''Action''' {{removed}}
! style="width: 80%;" | ''Reaction'' {{Icon|FO76}}

|-
| Car  
| Chase  

|-
| Thunder
| Bark
|}

Renders like this (swapped to show what it looks it):

Action Fallout 76 removed content Reaction Fallout 76
Car Chase
Thunder Bark
Action Fallout 76 removed content Reaction Fallout 76
Car Chase
Thunder Bark




That was a lot, huh? Well it was for me anyway. Still is. But you are smart, so onward we go!


Quiz 5 (Tables)

Now it is quiz time!

Quiz time!
Click here to be quizzed!


Slot Blank.png All lessons Slot Blank.png


Community content is available under CC-BY-SA unless otherwise noted.