Style for table footer : table footer : Table Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Table Style » table footer »

 

Style for table footer


 


<!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 {
  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;
}

tfoot {
  background-color: #666666;
  color: #dddddd;
  font-size: 80%;
}

table {
  border: 1px solid #666666;
}

tfoot td {
  border-bottom: 0;
  border-right: 0;
}
</style>
</head>
<body>
    <table width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist">
        <caption>
            A list
        </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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Table Style
» table footer