Background Color for the Tables

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<style>
  table  { border:solid  5px;
          background-color:#FF0000; width: 200px;}
  td { vertical-align: top; text-align:center;}
</style>
.....

<table>
   <tr>
     <td>1 </td>
     <td>2 </td>
     <td>3 </td>
  </tr>
  <tr>
     <td>4</td>
     <td>5</td>
     <td>6</td>
  </tr>
  <tr>
     <td>7</td>
     <td>8</td>
     <td>9</td>
  </tr>
</table>

Background property in XHTML Pages

for the named color
body { background-color:red;}

for the RGB Value
body { background-color: rgb(255, 0, 0);}

for the Hex Color
body { background-color: #FF0000;}

Background Color for Individual Cells or Rows

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<style>
  table { border:solid 5px; width: 200px;
           margin-left: auto; margin-right: auto;}
table td { border:inset 1px }
table tr#ROW1  { background-color:red;
             color:white; vertical-align: top;
             text-align:  center;}
table tr#ROW2;{ background-color:green; vertical-align: top; text-align: center;}
table tr#ROW3  { background-color:blue;
             color:white; vertical-align: top;
             text-align: center; }
table td#CELL9 { background-color:navy;              vertical-align: top; text-align: center;}
</style>

................

<table>
<tr id="ROW1">
  <td></td>
  <td>2 </td>
  <td>3 </td>
</tr>
<tr id="ROW2">
  <td>
  <td>5 </td>
  <td>6 </td>
</tr>
<tr id="ROW3">
  <td>7 </td>
  <td>8 </td>
  <td id="CELL9"></td>
</tr>
</table>

Colors for Rows

Name the Row (ie: ROW1)
table tr#ROW1 { background-color:red; }

To call it on the page
<tr id="ROW1">

Colors for Cells

Name the Row (ie: ROW1)
Table td#CELL9 { background-color:navy;}
- or - <td style="background-color:navy;">

To call it on the page
<td id="CELL9">

Background Images

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<style>
  table.graphic { border:solid 5px;
              margin-left: auto; margin-right: auto;
              background-image:url(images/bg.png) }
  table.graphic td { border:inset 1px;
................

<table class="graphic" style="margin-left: auto; margin-right: auto; width: 200px; text-align: left;"
border="1" cellpadding="2" cellspacing="2">
<tr>
<td>1</td>
<td>2</td>
<td >3</td>
</tr>
<tr>
<td >4</td>
<td>5</td>
<td >6</td>
</tr>
<tr>
<td >7</td>
<td >8</td>
<td >9</td>
</tr>
</table>

Background Image for Page

body {
  background-image:url(images/bg.png);
        }