tables

previous | index | next

Now that we have established the essentials of getting content on a page, marking it up a bit, and providing links to related material, it's about time to discuss some additional tags that help structurize the material. One of the most powerful tags to this purpose in HTML 3.2 is the table. Tables do not only provide a mechanism for listing data, but they also can be used to lay out a page. The following tags are used in the definition of tables:

The <TABLE> tag is of course used to start and end a table. It can take quite a few attributes to modify its appearance.

BORDER=pixels

the thickness of the table border. Not including this attribute, or setting it to 0 will result in invisible borders. Including the attribute without a value will result in tables with border thicknesses defaulting to 2.

CELLSPACING=pixels

the room between table cells

CELLPADDING=pixels

the room inside a table cell, around the content

WIDTH=pixels|percentage

the width of a table in pixels, or in the percentage of the window width

ALIGN=LEFT|CENTER|RIGHT

the horizontal alignment of the table on the page

BGCOLOR=color

This attribute is not in the HTML 3.2 specification. the background color of the entire table. Most browsers will correctly interprete this attribute. Colors will be discussed later in this course.

The other tags must be contained within the table. The <CAPTION> tag can take an ALIGN attribute, which is either TOP or BOTTOM. This tag must be terminated by its matching closing tag, but the tags that are used to order material within the table do not have to be closed, since the appearance of one implies the close of the previous. Material is arranged vertically with the <TR> tag, for table row. It can handle the following attributes

ALIGN=LEFT|CENTER|RIGHT

horizontal alignment of the material within the row

VALIGN=TOP|MIDDLE|BOTTOM

vertical alignent within the row

BGCOLOR=color

This attribute is not in the HTML 3.2 specification. the background color of the row. Most browsers will correctly interprete this attribute. Colors will be discussed later in this course.

Ordering material within a table row is done by either the <TH> (table header) or <TD> (table data) tag, the sole difference being that a browser may display text contents differently. The attributes these tags take override the row settings in as far as they conflict.

ALIGN=LEFT|CENTER|RIGHT

horizontal alignment of material within the table cell

VALIGN=TOP|MIDDLE|BOTTOM

vertical alignment of material within the table cel

COLSPAN=number

the number of table columns a cell spans horizontally

ROWSPAN=number

the number of table row a cell spans vertically

WIDTH=pixels|percentage

the width of a cell in pixels, or in the percentage of the table width

BGCOLOR=color

This attribute is not in the HTML 3.2 specification. the background color of the cell. Most browsers will correctly interprete this attribute. Colors will be discussed later in this course.

The width attributes for tables and table cells are a mere advice to a browser, and are likely to be ignored if the material in the table exceeds the requested dimensions.

examples

In order to illustrate the application of tables and the attributes, it is best to give a code example, and the end result. A table defined as

  <TABLE ALIGN=CENTER WIDTH=50% BORDER=5>
  <TR>
    <TH WIDTH=50%> cell 1
    <TH COLSPAN=2> cell 2
  <TR>
    <TD> left
    <TD ALIGN=CENTER> center
    <TD ALIGN=RIGHT> right
  </TABLE> 

appears as

cell 1	cell 2
left	center	right




When using tables that do not span the width of the text, the material following the table may be aligned to the side the table. If this is not desired, the CLEAR attribute of the <BR> tag can be used, which takes LEFT, RIGHT or ALL as a value.

Use 'invisible' tables as an alignment tool for objects that should appear side by side, such as text columns.

It is allowed to nest tables, which can be used to even further control page layout.

The best way to get a grip on tables, is to try out various combinations of the attributes.

previous | index | next

---

I will not guarantee that any of these pages will exist indefinately, so please only bookmark the top page.