Simple Tables Manipulation
nav_first.pngFirst: package:1
Easy Logo and Header
Edited: 04 Jan 2010 13:54 by: pieterh
Comments: 7
Tags: prize-winner
nav_prev.pngPrevious: package:2
Themes
Edited: 26 Dec 2009 06:39 by: tsangk
Comments: 1
Tags:
Last: package:17
Mobile iPod
Edited: 02 Feb 2010 17:15 by: pieterh
Comments: 2
Tags:
nav_last.png
Next: package:4
"Fonting" a Page!
Edited: 04 Jan 2010 13:55 by: pieterh
Comments: 3
Tags: prize-winner
nav_next.png

Simple Tables Manipulation
Package submitted by Fereal
1261053418|%e %B %Y, %H:%M

rating: 0+x

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

Comments: 2

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License