Changing the Table Background Color

Try It Out!
If you would like to try out these HTML tags quickly, use the Try It! page. Simply type (or cut-and-paste) any piece of HTML code into the window and immediately see how it will look. Try It!
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>

This table has a cellpadding of "5"

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

This table has a cellpadding of "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>

This table has a cellspacing of "5"

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

This table has a cellspacing of "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>

This is how it looks:

Column 1 Column 2
A B
C D

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