Add different background images for each table column header

Add different background images for each table column header : table header : Table Style HTML CSS TUTORIALS


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  #divID th {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    background: url(image/th_stripe.gif);
  }
  #divID #year {
    padding-left: 26px;
    background: #ccc url(img/icon_year.gif) no-repeat 10px 50%;
  }
  
  #divID #opponent {
    padding-left: 26px;
    background: #ccc url(img/icon_opp.gif) no-repeat 10px 50%;
  }
  
  #divID #record {
    padding-left: 26px;
    background: #ccc url(img/icon_rec.gif) no-repeat 10px 50%;
  }
  </style>
</head>

<body>


<div id="divID">
<table summary="Summary goes here">
  <caption>This is the title of the table</caption>
  <tr>
    <th id="year">Year</th>
    <th id="opponent">Opponent</th>
    <th id="record">Season Record (W-L)</th>

  </tr>
  <tr>
    <td>1918</td>
    <td>Item A</td>
    <td>75-51</td>
  </tr>
  <tr>
    <td>1916</td>
    <td>Item B</td>
    <td>91-63</td>
  </tr>
  <tr>
    <td>1915</td>
    <td>Item C</td>
    <td>101-50</td>
  </tr>
  <tr>
    <td>1912</td>
    <td>Item D</td>
    <td>105-47</td>
  </tr>
</table>
</div>

</body>
</html>

HTML code for linking to this page:

Add different background images for each table column header : table header : Table Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Table Style » table header »

Add different background images for each table column header

HTML CSS TUTORIALS