Tables: Backgrounds and Color

Now that you understand the basics of building tables, it is time to add some color and backgrounds.

You can add color to the table border and the cell borders by adding bordercolor="x". The cell borders will default to the same color as your table border, but you can add a border color to the individual cells to make them different colors. Setting a border color will eliminate the 3-D effect in Internet Explorer.

My Text 1	My Text 2
My Text 3	My Text 4

<table width="300" align="center" border="4" cellspacing="6" cellpadding="6" bordercolor="#7b7e00">
  <tr>
    <td width="20%" bordercolor="#7b7e00">My Text 1</td>
    <td width="80%">My Text 2</td>
  </tr>
  <tr>
    <td width="20%" bordercolor="#7b7e00">My Text 3</td>
    <td width="80%">My Text 4</td>
  </tr>
</table>

To add color to the table or cells you use the attribute bgcolor="x".

My Text 1	My Text 2
My Text 3	My Text 4

<table width="300" align="center" border="4" cellspacing="6" cellpadding="6" bordercolor="#7b7e00">
  <tr>
    <td width="20%" bordercolor="#7b7e00">My Text 1</td>
    <td width="80%" bgcolor="#d4dda6">My Text 2</td>
  </tr>
  <tr>
    <td width="20%" bordercolor="#7b7e00">My Text 3</td>
    <td width="80%" bgcolor="#d4dda6">My Text 4</td>
  </tr>
</table>

You can also use background images in your tables. To add a background image to the table or cells you use the attribute background="x".

My Text 1	My Text 2
My Text 3	My Text 4

<table width="300" align="center" border="4" cellspacing="6" cellpadding="6" bordercolor="#7b7e00"  background="img/back_1.gif">
  <tr>
    <td width="20%" bordercolor="#7b7e00" background="img/back_2.gif">My Text 1</td>
    <td width="80%" bgcolor="#d4dda6">My Text 2</td>
  </tr>
  <tr>
    <td width="20%" bordercolor="#7b7e00" background="img/back_2.gif">My Text 3</td>
    <td width="80%" bgcolor="#d4dda6">My Text 4</td>
  </tr>
</table>

You can also specify how your text is positioned within the cells by adding align="x" using left, center or right. Vertical position of the text is controlled by adding valign="x" using top, middle or bottom.

My Text 1	My Text 2
My Text 3	My Text 4

<table width="300" align="center" border="4" cellspacing="6" cellpadding="6" bordercolor="#7b7e00"  background="img/back_1.gif">
  <tr>
    <td width="10%" bordercolor="#7b7e00" background="img/back_2.gif">My Text 1</td>
    <td width="90%" align="center" bgcolor="#d4dda6">My Text 2</td>
  </tr>
  <tr>
    <td width="10%" bordercolor="#7b7e00" background="img/back_2.gif">My Text 3</td>
    <td width="90%" align="right" valign="bottom" bgcolor="#d4dda6">My Text 4</td>
  </tr>
</table>

To make full page color backgrounds or backgrounds with images for your eBay pages or auctions, you would use a table to enclose your text. Do not use the <body> tag to add background color or images on eBay.

IMPORTANT: If you check this page for HTML Validation, you will find that we have used some code that does not validate. We have done this solely for the purpose of demonstrating the results of the HTML code. Although the code works fine, it is not HTML 4.01 transitional.

To Top TO TOP