Like HowStuffWorks on Facebook!

How Web Pages Work

Changing the Table Background Color

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.


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>


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.


<table border=1>
<tr><th>Column 1</th>    
<th>Column 2</th></tr>   

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