Help:Tables

Tables are a fundamental aspect of several HabboxWiki pages - primarily the ones for Furniture Ranges, Campaigns, and Rares. This page will introduce you to tables, how to create them, and how to format them.

If you simply need to create the ideal table to use on the aforementioned pages, use the table code from Consecutive Tables section, but replace style="wikitable" with style="wikitable" width="50%". You can increase or decrease the percentage if necessary.

Creating A Table

The most common and equally most simple type of table used is typed as follows:

{| class="wikitable"
|-
! header/column1
! header/column2
! header/column3
|-
| row1 cell1
| row1 cell2
| row1 cell3
|-
| row2 cell1
| row2 cell2
| row2 cell3
|}

• class="wikitable" adds some standard formatting to the table; namely a border, center-alignment, and bold headers.
• {| represents the start of the table.
• |- represents the start of a new row. This is optional for the header row underneath {|, but recommended.
• ! represents a header cell.
• | represents a table data cell.

This code would produce the following table:

header/column1	header/column2	header/column3
row1 cell1	row1 cell2	row1 cell3
row2 cell1	row2 cell2	row2 cell3

Cells can contain almost anything; images and links included. Alongside this basic table, there are many other options available when creating tables which can all be found below.

Consecutive Tables

Instead of having to use a new line to insert a new row cell or header, we can instead use !! and ||. An example using the same table as above would be typed as follows:

{| class="wikitable"
|-
! header/column1 !! header/column2 !! header/column3
|-
| row1 cell1 || row1 cell2 || row1 cell3
|-
| row2 cell1 || row2 cell2 || row2 cell3
|}

The above is much more compact and produces the same result as the most basic table mentioned earlier:

header/column1	header/column2	header/column3
row1 cell1	row1 cell2	row1 cell3
row2 cell1	row2 cell2	row2 cell3

Adding Captions

You are able to add a caption above your table by using the |+ characters. This must be placed between your {| and your first |- characters. An example would be:

{| class="wikitable"
|+ Help I've been capt-ured!
|-
! header/column1 !! header/column2 !! header/column3
|-
| row1 cell1 || row1 cell2 || row1 cell3
|-
| row2 cell1 || row2 cell2 || row2 cell3
|}

Which produces this result:

Help I've been capt-ured!

header/column1	header/column2	header/column3
row1 cell1	row1 cell2	row1 cell3
row2 cell1	row2 cell2	row2 cell3

Adding Row Headers

To add a header to a row, simply use the ! character directly above your row-cell-data. Like so:

{| class="wikitable"
|-
! header/column1 !! header/column2 !! header/column3
|-
! row header
| row1 cell1 || row1 cell2 || row1 cell3
|-
! row header
| row2 cell1 || row2 cell2 || row2 cell3
|}

Which produces the following result:

header/column1	header/column2	header/column3	header/column4
row header	row1 cell1	row1 cell2	row1 cell3
row header	row2 cell1	row2 cell2	row2 cell3

Scoping

You are able to clearly define where your column and row headers are in your table by adding scope="col" | or scope="row" | before your headers. The former can only work in tables without consecutive headers - an example would look like so:

{| class="wikitable"
|-
! scope="col" | header/column1
! scope="col" | header/column2 
! scope="col" | header/column3 
! scope="col" | header/column4
|-
! scope="row" | row header
| row1 cell1 || row1 cell2 || row1 cell3
|-
! scope="row" | row header
| row2 cell1 || row2 cell2 || row2 cell3
|}

Which would produce an identical result to the table in Adding Row Headers:

header/column1	header/column2	header/column3	header/column4
row header	row1 cell1	row1 cell2	row1 cell3
row header	row2 cell1	row2 cell2	row2 cell3

Adding Images

You are able to add images into tables as if you were placing an image anywhere on a HabboxWiki page. Simple type [[File:FILENAME.png/.jpg/.gif]] plus any other styling you need - see the Help:Images page - into your cell. For example:

{| class="wikitable"
|-
! Image Header
|-
| [[File:Adzeh.png|frameless]]
|}

Would produce:

Image Header

Styling Tables

In order to style any element of a table you need to use the attribute="value" format. Every section of the table can be styled, but this is achieved differently depending on whether you're aiming to blanket-style one cell/caption or an entire row/table.

To style either a cell or caption, type style="x: y;" | before the cell/caption text you wish to style. An example with x being color: and y being red; would be typed like so:

{| class="wikitable"
|+ style="color: red;" | I'm red-y!
|-
! scope="col" | header/column1
! scope="col" | header/column2 
! scope="col" style="color: red;" | header/column3
! scope="col" | header/column4
|-
! scope="row" | row header
| row1 cell1 || style="color: red;" | row1 cell2 || row1 cell3
|-
! scope="row" | row header
| style="color: red;" | row2 cell1 || row2 cell2 || row2 cell3
|}

Which would produce the result:

I'm red-y!

header/column1	header/column2	header/column3	header/column4
row header	row1 cell1	row1 cell2	row1 cell3
row header	row2 cell1	row2 cell2	row2 cell3

To style either a table or row, simply add attribute="value" after |{ for an entire table, or |- for an entire row. Do not add another | after your styling as it is unnecessary. The first example shown below regards styling a whole row, the second example regards styling a whole table:

{| class="wikitable"
|-
! scope="col" | I am a normal header.
|- style="color:red;"
| I am a red cell || because this entire row || has been set to red.
|}

{| class="wikitable" style="color:red;"
|-
! scope="col" | I am now red.
|-
| This is because || the entire table || has been set to red.
|}

Both of these produce the according results:

I am a normal header.
I am a red cell	because this entire row	has been set to red.

I am now a red header.
We're all red now	because this tableeee	has been set to redd.

Following from this, we can now see various options you have available when styling tables.

Height And Width

As a general rule, you ought to express these in percentages or ems (especially width) due to varying screen sizes, but it is not compulsory to do so. The first example shows width/height applied to an entire row, whereas the second example shows them applied to the entire table:

{| class="wikitable" style="width: 60%; height: 200px;"
|-
! scope="col" | This entire table has height/width specified
|- 
| Cowabunga || Cowabunga || Cowabunga
|}

{| class="wikitable"
|-
! scope="col" | I'm not included :(
|- style="width: 60%; height: 200px;"
| We have || Cowabunga || Cowabunga
|}

Both of these produce the according results:

This entire table has height/width specified
Cowabunga	Cowabunga	Cowabunga

I'm not included :(
Only this row	Has its height/width	specified!

Span

If necessary, you can adjust the span of data cells so that they either occupy more rows or columns. Unlike most other styling options, you do not type style= before specificying col/rowspan. Instead you type colspan="x" | or rowspan="x" | before the data in the cell you wish to edit; be aware of how this affects other cells. An example of this would be:

{| class="wikitable"
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G
|-
| colspan="3" style="text-align: center;" | H
|}

Which produces the following result:

Column 1	Column 2	Column 3
A	B
	C	D
E	F
G
H