tfoot th, tfoot td {border-top: 2px solid #666; color: #363;} : tfoot « Tags « HTML / CSS






tfoot th, tfoot td {border-top: 2px solid #666; color: #363;}

  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="all">
body {margin: 2em 5%;}
table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0.25em 0.75em;}

thead th {border-bottom: 1px solid #333; text-align: center; font-weight: bold;}
tfoot th, tfoot td {border-top: 2px solid #666; color: #363;}

</style>
</head>
<body>

<table>
<thead>
<tr>
  <th></th>
  <th scope="col">Q1</th>
  <th scope="col">Q2</th>
  <th scope="col">Q3</th>
  <th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr>
  <th>#207-B34</th>
  <td>$11,940</td>
  <td>$12,348</td>
  <td>$14,301</td>
  <td>$17,208</td>
</tr>
<tr>
  <th>#207-B35</th>
  <td>$9,345</td>
  <td>$9,834</td>
  <td>$10,035</td>
  <td>$9,672</td>
</tr>
<tr>
  <th>#207-B36</th>
  <td>$2,787</td>
  <td>$3,123</td>
  <td>$4,137</td>
  <td>$3,711</td>
</tr>
<tr>
  <th>#208-A07</th>
  <td>$1,657</td>
  <td>$3,003</td>
  <td>$2,882</td>
  <td>$2,690</td>
</tr>
<tr>
  <th>#208-A11</th>
  <td>$8,947</td>
  <td>$7,249</td>
  <td>$8,102</td>
  <td>$7,821</td>
</tr>
<tr>
  <th>#208-A12</th>
  <td>$9,034</td>
  <td>$11,027</td>
  <td>$11,793</td>
  <td>$10,283</td>
</tr>
<tr>
  <th>#208-A13</th>
  <td>$10,633</td>
  <td>$12,574</td>
  <td>$12,834</td>
  <td>$11,568</td>
</tr>
<tr>
  <th>#208-A23</th>
  <td>$15,856</td>
  <td>$16,239</td>
  <td>$16,057</td>
  <td>$15,712</td>
</tr>
<tr>
  <th>#209-C17</th>
  <td>$8,245</td>
  <td>$6,929</td>
  <td>$6,498</td>
  <td>$5,016</td>
</tr>
<tr>
  <th>#209-C55</th>
  <td>$4,896</td>
  <td>$4,869</td>
  <td>$4,383</td>
  <td>$6,808</td>
</tr>
</tbody>
<tfoot>
<tr>
  <th>Total</th>
  <td>$83,340</td>
  <td>$87,195</td>
  <td>$91,022</td>
  <td>$90,489</td>
</tr>
</tfoot>
</table>

</body>
</html>

   
    
  








Related examples in the same category

1.'tfoot' defines table footer
2.table header foot
3.Style for table footer
4.Table footer style
5.Only header and footer have border
6.Add extra row to the footer
7.tfoot tag is the last section of a table, which formats the table footer
8.Style for table footer: background, color and font
9.Selecting cells in foot
10.tfoot td border: thin solid black;text-align: center;font-weight: bold;