Background for table header row : th background « Tags « HTML / CSS






Background for table header row

     


<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css" title="text/css">
table {
  border-top: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9;
}

caption {
  padding: 0 0 10px;
  font: bold 120% Arial, sans-serif;
  text-transform: uppercase;
}

th {
  background: #bababa url(stripe.gif) 0 50% repeat-x;
  text-align: left;
  font-weight: bold;
}

th,td {
  border-bottom: 1px solid #c9c9c9;
  border-right: 1px solid #c9c9c9;
  font: 80% Verdana, Arial, sans-serif;
  padding: 2px 5px;
}

</style>
</head>
<body>
    <table width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist">
        <caption>
            A playlist of great music
        </caption>
        <thead>
            <tr>
                <th>S</th>
                <th>T</th>
                <th>A</th>
                <th>A</th>
                <th>P</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">Music</td>
            </tr>
        </tfoot>
        <tbody>
            <tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr>
            <tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr>
            <tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr>
            <tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr>            
            <tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr>
            <tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr>
            <tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr>
            <tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr>
            <tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr>
            <tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr>
            <tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr>
            <tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr>
        </tbody>
    </table>
</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.Add different background images for each table column header
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;