Table Attributes

Posted by stacita on 02 Aug 2009 15:12, last edited by taltamir on 10 Feb 2011 05:47

Tags: table

rating: +3+x
This page is a stub. You can help us improve Wikidot by expanding it.

Table Style Attributes

Customise advanced tables using inline CSS.

attribute similar attributes required allowed values default description
background-color N/A no Any colour (e.g. name blue or HEX #F0F0F0) transparent Used to define the background color of a table, row or cell
border border-top
border-right
border-bottom
border-left
no Three space-separated values
(e.g. 1px solid black)
none Used to define the border style of a table, row or cell
margin margin-top
margin-right
margin-bottom
margin-left
no auto
px, em, %
auto Used to define the amount of space between the table and outside content
padding padding-top
padding-right
padding-bottom
padding-left
no px, em, % 0px Used to define the amount of space between the table and inside content
width N/A no px, em, % matches content Used to define the width of a table, row or cell
vertical-align N/A no top
bottom
center Most commonly used to make text remain at the top of a cell that is bigger than the content needs it to be (adjacent cells in the same row can cause this to happen)
Float N/A no right
?
? Floats a table "on top" of the page so to speak, it is useful for relocating a table to the top right and not losing lines. It can end up covering other items. Floating a second item to the right places it to left of the first one, not below it.

border attribute

Three space-separated values are used to define the border's style.

Example:

[[table style="border: 1px solid black;"]]
      [!-- TABLE CONTENTS --]
[[/table]]

1. First value defines the border's width:

  • Two formats supported: px, em
  • e.g. 3px or 1.5em

2. Second value is style

  • Several styles are available:
    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
    • inherit

3. Third value is color

  • Two formats supported: color name, or a HEX value
  • e.g. blue or #F0F0F0

Syntax

  • Attributes must be enclosed within the quotes of the style="" parameter.
  • Separate each attribute with a semi-colon.

Table syntax is shown below. Each style parameter is optional.

[[table style="attribute1; attribute2; attribute3 ..."]]
[[row style="attribute1; attribute2; attribute3 ..."]]
[[cell style="attribute1; attribute2; attribute3 ..."]]

Content goes into cells
Attempting to insert text into a table or row directly will cause errors

[[/cell]]
[[/row]]
[[/table]]

Example:

Layout with Tables

Related


Please edit and develop me!

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.