User:BELATHUS/Table

If you are seeking a basic understanding of piped tables within MediaWiki, see Help:Table on Wikipedia, as this article assumes you've a basic understanding of tables already.

Style Attributes

Tables can often define many of their attributes without using a style tag, however, the style tag often applies itself differently, or in a more powerful manner.

More units of measure

For example, when using the width attribute, it only accepts values in percentage or in pixels. Using the width attribute within the style attribute, however, allows for the use of the "em", the "ex", or the "en". The advantage of using ems, ens, or exs is that they scale with the size of the font. Ems are always equal to the point size of the font, ens are always half the point size of the font. The size of the ex depends on the font used. Since the en is always half the width of an em, it is not widely supported where the em can be defined as 0.5 ems, which would be identical to the en.

• "width:100%;" "width:100px;" "width:100em;" "width:100ex;"

There are advantages and disadvantages to each unit used, as differing resolutions and font sizes can cause these tables to look vastly different. However, the em unit is better capable to account for such changes. Also, it is interesting to note that values can be defined in inches ("in") or centimeters ("cm").

Border options

Style tags allow for increased manipulation of the borders of a table. Borders may be defined for every individual cell within a table, although, if borders are collapsed, only the most eye-catching border will be seen. Borders can be defined for text by setting the style between <span> tags. Unfortunately, if only using style tags, only the outside border of a table will be shown, unless the value border=<value> is set, externally to the style tag, or each cell's border is defined using a style tag. If the border-collapse: collapse; attribute is not used, the border must be at least 3 pixels wide to be visible.

Usage

• border: <width> <line style> <color>; - width can be thin, medium, thick, or a value in pixels. There are a number of line styles, such as solid, double, dotted, dashed, inset, outset, groove, and ridge.
• borders-collapse: collapse; - combines borders into a single line. Where individual cell border styles may be defined, the most eye-catching border will be shown, with the exception of the hidden border style, which will always hide the border.
• borders-collapse: separate; - separates borders. This is the HTML default. Additionally, to see the border, you'd need a width of at least 3 pixels.
• -moz-border-radius: <value>; - a Mozilla specific (and therefore Firefox specific) command that rounds border corners. The value can either be in percentage or pixels. If four values are inputted, each value will define a different corner.
  • -moz-border-radius-topleft:; -moz-border-radius-topright:; -moz-border-radius-bottomleft:; -moz-border-radius-bottomright:;

Margin options

• margin: <value>; - defines all margins as entered value.
• margin: <top/bottom> <left/right>; - if only two values are entered, each value defines two margins -- top and bottom, then left and right.
• margin: <top> <right/left> <bottom>; - if three values are entered, the middle value defines the left and right margins.
• margin: <top> <right> <bottom> <left>; - if four values are entered, each value defines one margin.
• margin-top: <value>; - defines the top margin.
• margin-right: <value>; - defines the right margin.
• margin-bottom: <value>; - defines the bottom margin.
• margin-left: <value>; - defines the left margin.

Caption options

Using caption-side: with the style template allows for the relocation of the caption from the top to the left, right, or bottom. If aligning to the left or right, the caption can be aligned to the left, right, or center using text-align: and can be vertically aligned to the top, middle, or bottom using vertical-align:. Additionally, unless a width is set for the caption being to the left or right, the browser will automatically choose a width, which might not be desired. After the |+ line, one can specify the caption's width and alignment.

Padding options

Padding under the style attribute does not apply to every cell in a table -- the padding must be defined for every individual cell if using this method. Typically, it is better to define padding using the cellpadding="<value>" attribute, outside of the style attribute. Unfortunately, using this attribute does not allow for the use of the em or ex units.

Example

This is an edited copy of the Skill template. It utilizes the inset and outset border types with border-spacing, and the caption-side setting and defines the alignment of that caption under the caption's header. It also utilizes the em and ex units to some degree. Notice that the caption ignores the margins of the table (1em), following only its own margin of one ex.

This is a right-sided, bottom-left-aligned caption with a width of 10ems and a margin of 1ex.

Type	Square		Semi				Pure
Profession	Rogue	Warrior	Bard	Monk	Paladin	Ranger	Cleric	Empath	Savant	Sorcerer	Wizard
Max Ranks Per Level	-	-	-	-	-	-	-	-	-	-	-
Training point Cost	-	-	-	-	-	-	-	-	-	-	-