Add background for table header : th background « Tags « HTML / CSS






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

Add background for table 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">
  div {
    margin-bottom: 30px;
    }
  #divID table { 
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-collapse: collapse;
  } 
  
  #divID th, #divID td { 
    padding: 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  } 
    #divID caption {
    font-family: Arial, sans-serif;
    color: #993333;
    padding-bottom: 6px;
  }
  #divID th {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    background: #ccc;
  }
  </style>
</head>

<body>


<div id="divID">
<table summary="Summary goes here">
  <caption>This is the title of the table</caption>
  <tr>
    <th>Year</th>
    <th>Opponent</th>
    <th>Item 3</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 image for table header
3.Add different background images for each table column 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;