Add different background images for each table column header : th background « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. th background

Add different background images for each table column header

     


<!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>








Related examples in the same category

1.th background-color: gold;
2.Add background for table header
3.Add background image for table header
4.Background for table header row
5.table header background-color: #cccccc;
6.th background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x;
7.th background: #882D2D;
8.th background: #F3F3F3;
9.th background-color:#d6d6d6;
10.th background-color: #CDC1A7;
11.th background: lightsteelblue;