HTML tables are the traditional way of formatting text and graphics on a web page. Wizzypage uses a newer method called CSS (cascading stylesheet) positioning. While stylesheet positioning provides a more precise way of specifying web page layouts, there may be cases where a Wizzypage user wants to use tables to format presentation data within the defined content areas. Many web page design applications provide wysiwyg table editors that are awkward and clutter the application with additional submenus. Html tables are actually quite simple to create using a small number or html tags. This tutorial will explain the basics of creating html tables:
  1. < TABLE > and < /TABLE > tags - everything inside an html table must be sandwiched by the opening and closing table tags. The first TABLE tag can contain a number of formatting options:

    • ALIGN=CENTER - centers the table within the content area
    • WIDTH=70% - sizes the table to 70% of the size of the content area
    • BORDER=1 - creates a border around the table cells with a width of 1 pixel
    • CELLPADDING=5 - adds 5 pixels of padding within each data cell
    • CELLSPACING=5 - spaces all data cells 5 pixels apart
    • BORDERCOLOR=black - color of the border surrounding each cell

  2. < TR > and < /TR > tags - define a row of presentation data flowing left to right across the span of the table.
  3. < TD > and < /TD > - specifies an individual cell or column within a row of a table. Individual data cells can contain their own formatting options. Here are some examples:

    • ALIGN=CENTER / LEFT / RIGHT - positions data within the cell accordingly
    • BGCOLOR=YELLOW - sets the background color to yellow


Here is a complete listing of a simple 2 - row, 3 - column html table, followed by what the table would look like in a browser:

< TABLE ALIGN=CENTER BORDER=1 BORDERCOLOR=black CELLPADDING=5 CELLSPACING=5 WIDTH=70% >
< TR > < TD > row #1 cell #1 data < /TD > < TD ALIGN=CENTER> row #1 cell #2 data < /TD > < TD > row #1 cell #3 data < /TD > < /TR >
< TR > < TD > row #2 cell #1 data < /TD > < TD ALIGN=RIGHT > row #2 cell #2 data < /TD > < TD BGCOLOR=YELLOW > row #2 cell #3 data < /TD > < /TR >
< /TABLE >

 the table looks like this:


row #1 cell #1 data row #1 cell #2 data row #1 cell #3 data
row #2 cell #1 data row #2 cell #2 data row #2 cell #3 data

www.wizzypage.com

Html Tables Tutorial - How to add table formatting to Wizzypage text areas: