Help:Tables

All NeoWikis use tables. These provide an easy way to organize data and other information that might need to be showcased, and most are extremely customizable. They can be used with Parser Functions and other extensions to create Templates for use on the NeoWiki.

Contents

[edit] Basic Table

{| Beginning of a Table (required)
|+ Table Caption (not required)
! Table Header (not required) - makes the text in the cell / row bold
|- Table Row (required on all but first row)
| Table Cell (required) - must be used, can be placed on a new line or using the || syntax (as seen below)
|} End of a Table (required)

[edit] Table Classes

No Class No borders, columns / rows only
.table Provides horizontal borders between rows
.table-bordered Provides rounded edges and borders for every cell
.table-striped Adds light-gray stripes on every odd numbered row
.table-condensed Reduces table size vertically


The table above is written with class="table table-bordered" to provide borders for every data cell. Table classes must be stated at the beginning of a table ({| class="table table-bordered"). These work towards designing the table instead of leaving it with a simple code.

[edit] Example Tables

[edit] table-bordered

Basic Table with classes
Header Cell New Column
Data Cell New Cell
New Row New Row


{| class="table table-bordered"
|+ Basic Table with classes
! Header Cell
! New Column
|-
| Data Cell
| New Cell
|-
| New Row
| New Row
|}

[edit] table-striped

Basic Table with classes
Header Cell New Column
Data Cell New Cell
New Row New Row


{| class="table table-striped"
|+ Basic Table with classes
! Header Cell
! New Column
|-
| Data Cell
| New Cell
|-
| New Row
| New Row
|}

[edit] Formatting a Table

Tables are used to organize data into what could be called a rough chart. A table can be stylized to appeal to the readers using many different elements. Table classes, which have already been demonstrated, are possibly the most important formatting tool on tables. However, there are many others that can make a table look great.

[edit] Colspan and Rowspan

When using colspan and rowspan, a user is able to shape a table in any form that they might like. These allow for fluid movement and overlay of different cells.

{| class="table table-bordered"
! colspan="2"| Header <-- elements must always go before the table content
|-
| rowspan="2"| Large Cell || Small Cell
|-
| Small Cell
|}
Header
Large Cell Small Cell
Small Cell


colspan and rowspan can be applied to any individual cell to make it a certain way. However, as seen in the above example, there are a few other things that must be done before a table can look truly professional.

[edit] Text Formatting

There are quite a few different styles that may be used to format the text to move it in different positions or to change the color. All of them can be mixed together to create a very specific layout for a table. They are all called using the style="xx" code in the same area as rowspan and colspan.

width Defines a specific width in percentages for each specified cell - carried over until stated otherwise
vertical-align Allows a user to align text vertically - top, middle or bottom
text-align Allows the user to align text horizontally - left, center, right
color Colors the text content inside the cells - can use hex codes and HTML color names
font-style Changes font style within the cells - italics, bold, et cetera
background-color Changes background color of cells - accepts hex or HTML color names


Combining all of these elements provides a strong table. For example:

{| class="table table-bordered"
! style="text-align:center; background-color: lightblue;" colspan="3"| Example Table
|- style="text-align:center;"|
| rowspan="2" style="vertical-align:middle; text-align:center;"| Example Cell || Example Cell || Example Cell
|-
| Example Cell || Example Cell
|}


Example Table
Example Cell Example Cell Example Cell
Example Cell Example Cell