1

Help:Wiki Table Style Guide  

ZAM Network
Wikibase™
Guides
Change skin to: ZAMAionDAoCEQEQ2EVEFFXIFFXIVFRGW2LONLotRORiftTERATORWARWAR40KWoWWWW

This page is an attempt to give some direction and information about available classes that can be applied to tables in the wiki. Some of them are game-specific and are always prefaced with the gameid, such as sto-panel or aion-q0.

A table with no class and no styling is invisible and is used to containerize output.

If you are familiar with MediaWiki the datatable class here is roughly equivalent to "wikitable".

A class can be applied to a table in HTML or wiki-code. Here are two examples of the common classes, "datatable autowidth", which is defined in every game skin. (This used to be called "infobox", which is DEPRECATED and should no longer be used)

HTML table with .datatable and .autowidth
<table class="datatable autowidth">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
 </tr>
 <tr>
  <td>Cell One</td>
  <td>Cell Two</td>
 </tr>
</table>
Header One Header Two
Cell One Cell Two
Wikicode table with .datatable and .autowidth
{| class="datatable autowidth"
!Header One
!Header Two
|-
|Cell One
|Cell Two
|}
Header OneHeader Two
Cell OneCell Two

The following are other common ways of using datatable with classes.

datatable
Header OneHeader Two
Cell OneCell Two
datatable sortable
Header OneHeader Two
29
17
34
datatable using .lr and .dr
.lr and .dr are classes that are applied to the rows as follows:
|- class="lr"
Header OneHeader Two
27
14
39
datatable center-th
Center-aligns all headers in the table without having to style each cell individually
Header OneHeader Two
27
14
39
datatable center-td
Center-aligns all non-header cells in the table without having to style each cell individually
Header OneHeader Two
27
14
39
datatable center-cells
Center-aligns all cells in the table (header and non-header) without having to style each cell individually
Header OneHeader Two
27
14
39

Notes

  • datatable sets width to 100% by default. To make a datatable that is not set to 100% add autowidth to the class. class="datatable autowidth".
  • To make a box that hangs on the right side, add '''style="float:right;" after the class element
  • To make text flow around a table try style="float:left;"
  • By default, datatable clears formatting above and below the box. To prevent this add "no-clear" to the class list.
  • To apply styling to a cell you add it after the | (pipe), and another | following the styling. (i.e. |colspan="2"|This is a 2-column cell )
    • On a header cell you still use | following the styling, not ! (i.e. !colspan="2"|This is a 2-column header )
  • center-th, center-td and center-cells can be used on ANY table, not just datatables, and the centering can still be over-ridden for a specific cell. If you are overriding a cell format, you must add !important after the alignment (such as |style="text-align:left !important;" so the browser knows)
  • There are a few other global classes worth noting
    • autowidth: By default, datatable sets width to 100%. This prevents it. Width can then be set explicitly if you wish (using width="200px" or style="width:200px;").
    • no-clear: By default, datatable does a clear before the table. This prevents it.
    • no-margin-lists: This sets the margin on all ordered and un-ordered lists in the table to zero so that there is no blank line above or below the list. An example of this is shown below.

Ordered and Unordered Lists

By default all lists have a top and bottom margin which can cause some spacing issues with lists inside tables. Fortunately, this can be over-ridden! You can either do the list manually in HTML and use, for instance, <ul style="margin:0;"> or you can apply a class, no-margin-lists, to the cell that disables the margins.

with marginswithout margins
list title line
  • list item 1
  • list item 2
  • list item 3
list title line
  • list item 1
  • list item 2
  • list item 3

You can also apply this technique outside of a table using a <div> tag to wrap the list and add the class to the div tag.

CodeOutput
<div class="no-margin-lists">
list title line
* list item 1
* list item 2
* list item 3 </div>
list title line
  • list item 1
  • list item 2
  • list item 3

Game-Specific Classes

This list will probably never be up-to-date as new classes are added as the need arises, but here is a good starting point. Also, there will be some classes that were defined ONLY to be in a specific template for a single object and are not listed here.

Aion

  • aion-q0 to aion-q5: used to colorize item links by quality
  • aion-quest: The main table styling for Aion Quest

EverQuest II

  • eq2-quest: The main table styling for EQ2 Quest
  • eq2-mob: The main table styling for EQ2 Mob
  • eq2-item: The main table styling for EQ2 Item

Runes of Magic

Star Trek Online

  • sto-panel: Table styling for most boxes in the STO Wiki. Intended to mimic in-game colors.
  • sto-q0 to sto-q5: used to colorize item links by quality
  • sto-lcars: sto-panel with LCARS flavoring (Library Computer Access and Retrieval System)

This is a work in progress as I need to comb through all the .css files to find all the major classes.

This page last modified 2012-08-22 16:32:12.