This package allows the manipulation of Wikidot's simple tables. This prevents users from resorting to the complex advance tables syntax or addition of [[span]] elements when they only need some simple adjustments to the tables.
Include files
| Simple Tables Include | By Fereal | 17 Dec 2009 12:38 |
Instructions
To install this package in your site, put the following code on pages with simple tables you want to modify. Possible attributes and values are discussed further down the page.
| This page | Contains these lines |
|---|---|
| Page with simple tables | [[include :css-competition:include:simpletables| attribute1 = value1 | attribute2 = value2 | ]] |
An example
You have a table of four columns. You want the table's width to span the entire page, and you want the columns divided evenly. You also want the headers to have a black background and white font. Additionally, you want the normal cell's content to be centered.
[[include :css-competition:include:simpletables |
table-width = 100% |
column-width = 25% |
header-bgcolor = black |
header-fontcolor = white |
cell-align = center |
]]
Be reminded that the attributes are always true for every header and cell. If you have a special cell that needs to be different from the rest, you can use the [[span]] tag to override some text attributes.
Attributes:
If you do not provide an attribute, it will take the default values of the active theme. If you know CSS, you can look at the "Actual CSS" section below to see which values are being modified.
"Headers" are the cells with a tilde (~).
Basic Attributes:
These are the basic attributes. Several attributes are also available for more specific customization. See "Actual CSS" section below to see every attribute declared and how.
| Attribute | Allowed Values | Description |
|---|---|---|
| table-width | px or em values, percentage | Table width, use exact px or em values for constant width or percentage for flexible width. |
| table-margin | px or em values | The margin of the entire table. |
| table-padding | px or em values | The padding of all cells, both header and normal cells. |
| column-width | px or em values, percentage | Column width, use percentages since this applies to all columns in the table. |
| header-bgcolor | Color values | Background color of header cells. |
| header-fontcolor | Color values | Font color of header cells. |
| header-align | center, left, right, justify | Horizontal alignment of headers' text. |
| header-padding | px or em values | The padding of header cells. Overrides table-padding declarations. |
| cell-bgcolor | Color values | Background color of normal cells. |
| cell-fontcolor | Color values | Font color of normal cells. |
| cell-align | center, left, right, justify | Horizontal alignment of normal cells' text. |
| cell-padding | px or em values | The padding of norma cells. Overrides table-padding declarations. |
Actual CSS
table.wiki-content-table{ width: {$table-width}; margin: {$table-margin}; margin-top: {$table-margintop}; margin-bottom: {$table-marginbottom}; margin-left: {$table-marginleft}; margin-right: {$table-marginright}; } table.wiki-content-table th { padding: {$table-padding}; padding-top: {$table-paddingtop}; padding-bottom: {$table-paddingbottom}; padding-left: {$table-paddingleft}; padding-right: {$table-paddingright}; padding: {$header-padding}; padding-top: {$header-paddingtop}; padding-bottom: {$header-paddingbottom}; padding-left: {$header-paddingleft}; padding-right: {$header-paddingright}; background-color: {$header-bgcolor}; text-decoration: {$header-decoration}; text-align: {$header-align}; vertical-align: {$header-valign}; width: {$column-width}; font-family: {$header-font}; color: {$header-fontcolor}; font-style: {$header-style}; font-weight: {$header-weight}; } table.wiki-content-table td { padding: {$table-padding}; padding-top: {$table-paddingtop}; padding-bottom: {$table-paddingbottom}; padding-left: {$table-paddingleft}; padding-right: {$table-paddingright}; padding: {$cell-padding}; padding-top: {$cell-paddingtop}; padding-bottom: {$cell-paddingbottom}; padding-left: {$cell-paddingleft}; padding-right: {$cell-paddingright}; background-color: {$cell-bgcolor}; text-decoration: {$cell-decoration}; text-align: {$cell-align}; vertical-align: {$cell-valign}; width: {$column-width}; font-family: {$cell-font}; color: {$cell-fontcolor}; font-style: {$cell-style}; font-weight: {$cell-weight}; }
Live example ?
Live example using the example above: http://monobook.wikidot.com/live-example:1