Table Attributes

line.gif

Cell Padding

If you look at the tables of the previous two exercises, you will notice that they look a little cramped. In particular, each entry is quite close to the surrounding cell border. The attribute cellpadding of the tag <table> may be used to add space surrounding the data contained each table cell. For example, if a table was coded as:

<table cellpadding=5 border=2>
<tr> <td> a11 <td> a12
<tr> <td> a21 <td> a22
</table>

then the result would be as follows.

a11 a12
a21 a22

Cell Spacing

In addition to cell padding, the attribute cellspacing of the tag <table> may be used to separate the cells of a table. Note that cell padding affects the internal portion of the cell whereas cell spacing separates the cells but does not affect the internal area of the cells. Both effects can be combined, as shown in the HTML code below.

<table cellpadding=5 cellspacing=5 border=2>
<tr> <td> a11 <td> a12
<tr> <td> a21 <td> a22
</table>

The result of the above code is shown below.

a11 a12
a21 a22

Table Alignment

Tables can be aligned to the left or right margin of the browser. For example, the following code causes subsequent text to flow to the left.

<table cellpadding=5 cellspacing=5 border=2 align=right>
<tr> <td> a11 <td> a12
<tr> <td> a21 <td> a22
</table>

a11 a12
a21 a22
This text should be to the left of the table just defined. The text would normally continue to flow except for the <br clear=right> that is placed right here ==>.
As you can see, this text resumes below the table.

If the table's alignment was specified as left then the text would have flowed to the right. The tag <br> was used to cause a break in the text flowing to the left of the table. After the break is encountered, the rendering of text is resumed below the table.

Table Frames and Rules

Both the frame surrounding a table and the internal rules in the table can be adjusted (see attributes of the tag <table>). The following example includes only the top and bottom of the table border and only rules between rows.

<table cellpadding=5 border=1 frame=hsides rules=rows
       bordercolor=#00ff00 bordercolordark=#000000 bordercolorlight=#007f00>
<tr> <td> a11 <td> a12
<tr> <td> a21 <td> a22
</table>

The inclusion of the frame and rule attributes changes the appearance of the table to that shown below (browser support for these attributes varies).

a11 a12
a21 a22

Table Colors

The above example included color specifications. Color specifications in tables are extensions to the HTML 3.2 definition. Possible color attributes are as follows.

background The URL of an image to be used as the background of the table.
bgcolor The RGB color value of the table's background.
bordercolor The RGB color value of the table's border.
bordercolordark The RGB color value of the dark portion of the 3-D shadowing in the table's border.
bordercolorlight The RGB color value of the light portion of the 3-D shadowing in the table's border.

The following applies to the color attributes for tables.

Table Width

The width attribute of the tag <table> may be used to restrict or expand the width of a table. Tables are naturally formatted to a width adequate to accommodate the items. By specifying a width greater than the natural width of the table, each cell in the table can be widened. Conversely, if cells within the table are such that they cause the table to occupy the entire width of the browser window, the width attribute may be used to force the table to terminate short of the right margin of the browser. Consider the following table specification.

<table width=90% cellpadding=5 cellspacing=5 border=1>
....
</table>

Using the above specification, the table below was produced. Note how the resultant table does not extend all the way to the right border of the window.

Definition HTML stands for Hypertext Markup Language and it is the language of the Internet. Many of today's young people should learn HTML as a matter of course.

The next section next.gif discusses the row attributes.