Formatting tables

Table attributes: Any line that begins with || but doesn't have a closing || sets the table formatting attributes for any tables that follow. These attributes can control formatting such as border, width, alignment, bgcolor, cellpadding and cellspacing. Width may be specified in percent or in pixels. Colors may be specified either as named colors or #rrggbb codes (hint: always use lowercase letters for rgb values--i.e., #ff0000 and not #FF0000 for red). Cellpadding is the space between cell contents and the sides of the cell; cellspacing is the space between cells.

Example 1. Changing border and alignment.

This markup:

    
    || border=10 align=center
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 2. Changing color.

This markup:

    
    || border=1 bgcolor=red align=center
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 3. Changing width with percent.

This markup:

    
    || border=1 width=100% bgcolor=yellow
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 4. Changing width with pixels and color with HTML.

This markup:

    
    || border=1 width=350 bgcolor=#cccccc align=center
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 5. Changing cellpadding.

This markup:

    
    || border=1 width=350 cellpadding=10 align=center
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 6. Changing cellspacing.

This markup:

    
    || border=1 width=350 cellspacing=10 align=center
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

Example 7. Choosing background.

This markup: Needs fixing!!

    
    || style='background-image=url(/grape/in-grape2.gif)'
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

while this:

    
    || style=background-image=url(/grape/in-grape2.gif)
    || cell 1 || cell 2 || cell 3 ||
    || cell 1 || cell 2 || cell 3 ||

creates this table:

<< Simple tables | PmWiki.DocumentationIndex | Advanced tables >>