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 | »
Page mise à jour le 10 juillet 2005 à 18h34.