HTML TABLES

The TABLE element defines a table for multi-dimensional data arranged in rows and columns. TABLE is commonly used as a layout device, but authors should avoid this practice as much as possible. Tables can cause problems for users of narrow windows, large fonts, or non-visual browsers, and these problems are often accentuated when tables are used solely for layout purposes.

Reasons for Using tables

- Display all sorts of Information
- Create news paper columns
- Control Web Page layout
- Create borders

Considerations

- Determine the maximum number of rows and columns you table will have
- Define your cells one by one
- Cells are defined from left to right in rows then from top to bottom

Parts of a table
a. Cells - basic unit of a table
b. Rows - horizontal combination of cells (defined with <tr> tag)
c. Columns - vertical combination of cells (defined with <td> tag)
d. Table - The whole table
e. Header - (defined with <th> tag)

<TABLE>...</TABLE>
- creates a table

Attribute Specifications

<TABLE WIDTH="%/px">
- sets the table width

<TABLE BORDER="[px]' >
- sets the border width

<TABLE BORDERCOLOR="color">
- used to change the border from its default 3D form to a line form.

<TABLE FRAME =[void | above | below | hsides | lhs | rhs | vsides | box | border]>
- sets the outer border

<TABLE RULES=[ none | groups | rows | cols | all ] >
- sets the inner borders

< TABLE CELLSPACING= "[px]">
-sets the spacing between cells

<TABLE CELLPADDING= "[px]">
-sets the spacing within cells

<TABLE ALIGN=[ left | center | right ] >
-sets the table alignment (horizontally)

<TABLE BGCOLOR="Color ">
- sets the table background color

<TABLE BACKGROUND="image.gif">
-sets the background image

A simple table could thus be expressed as follows:

Output:

CAPTION

<CAPTION>.....</CAPTION>
- it is the tag that is palced inside the <TABLE> tag so information within the container tag will not affect the whole table.

TABLE ROW

<TR>.....</TR>
- sets the row of table cells

TABLE DATA / TABLE HEADER

<TD> .... </TD>
-sets the table contents

<TH>...</TH>
-sets the table header

Attribute Specifications (for th and td tags only)

<TD ROWSPAN = "number of rows to span ">
-sets the number of rows spanned by the current cell.

<TD COLSPAN= " number of columns" >
-sets the number of columns spanned by the current cell.

<TD NOWRAP>
-used to disable automatic text wrapping for this cell.

Note: You can also customize your data cells (<td> and <th> tags) using the attributes of table.

CEDGE's Table Cheats

-top of page -