Help:Wiki Table Style Guide  

ZAM Network Wikibase™ Guides

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)

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

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

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.

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.

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

• rom-quest, rom-mob, rom-item, rom-object: The main table styling for ROM Quest, ROM Mob, ROM Item and ROM Object
• rom-common, rom-superior, rom-rare: item colorization

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.