How Web Pages Work

Change the color of entire table background by using the "bgcolor" tag within the initial "table" tag:

Example: <table bgcolor="yellow">

A colored background can also be assigned to a row or a cell within a table. Just add bgcolor="color" to either the <tr> or <td> tag to color that specific portion of the table.

Example: <tr bgcolor="yellow">

Table Size

The width and height of rows and columns in a table will expand automatically to fit the length of data and/or the space of the browser window. To specify a width and height, include either pixels or percentage values within the starting "table" tag:

Example: <table width=300 height=400>

Width and height can also be specified for an individual data cell, as opposed to the table as a whole. To do this, add width="value" to the <tr> or <td> tag in question.

Again, it's a good idea to simply experiment with pixel and percentage values to find out what they look like in a browser.

Cellpadding

The "cellpadding" tag specifies (in pixels) the amount of space between the edges of each cell and the data inside each cell. Use it within the starting "table" tag:

Example 1: <table border=1 cellpadding=5>

Example 2: <table border=1 cellpadding=15>

Cellspacing

The "cellspacing" tag specifies (in pixels) the amount of space between each cell. Use it within the "table" tag:

Example 1: <table border=1 cellspacing=5>

Example 2: <table border=1 cellspacing=15>

Table Headings

To create a bold and centered "heading" for a column or row within a table, use the <th> tag in place of a <td> tag in the coding for your first row.

Example:

<table border=1>
<tr><th>Column 1</th>    
<th>Column 2</th></tr>   
<tr><td>A</td>    
<td>B</td></tr>   
<tr><td>C</td>    
<td>D</td></tr>  
</table>

In the next section, we'll look at alignment and cell padding.