157.56.93.202 
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
| 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
| 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 | |
