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 (specify pixels or percentage of window),
• align (alignment of table, not its contents),
• bgcolor,
• cellpadding (the space between cell contents and the four sides of the cell)
• cellspacing (the space between cells)

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).

Example 1. Changing border and alignment.

This markup:

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

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

Example 2. Changing color.

This markup:

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

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

Example 3. Changing width with percent.

This markup:

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

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

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 ||
    || c1 || cellcellcellcell2 || cell 3 ||

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

Example 5. Changing cellpadding.

This markup:

    
    || border=1 cellpadding=10 align=center
    || cell 1 || cell 2 || cell 3 ||
    || c1 || cellcellcellcell2 || cell 3 ||

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

Example 6. Changing cellspacing.

This markup:

    
    || border=1 cellspacing=10 align=center
    || cell 1 || cell 2 || cell 3 ||
    || c1 || cellcellcellcell2 || cell 3 ||

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

Example 7. Choosing background.

This markup: Needs fixing!!

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

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

while this:

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

creates this table:

cell 1	cell 2	cell 3
c1	cellcellcellcell2	cell 3

<< | PmWiki.Documentation Index? | >>