Table with subtotoal row : tr « Tags « HTML / CSS






Table with subtotoal row

    



<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Table Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}

td {
  border: solid 1px black;
  width: 100px;
  empty-cells: hide;
}
</style>
</head>

<body>

<table>
  <tr>
    <td></td>
    <th id="">Receipts</th>
    <th id="">tax</th>
    <th id="">Costs</th>
    <th id="">Balance</th>
  </tr><tr>
    <td id="Q1">Quarter 1</td><td></td><td></td><td></td><td></td>
  </tr><tr>
    <th id="">Store A</th>
    <td headers="">12,585</td>
    <td headers="">2,202</td>
    <td headers="">4,155</td>
    <td headers="">6,228</td>
  </tr><tr>
    <th id="">Store B</th>
    <td headers="">15,221</td>
    <td headers="">2,663</td>
    <td headers="">5,320</td>
    <td headers="">7,238</td>
  </tr><tr>
    <th id="">Subtotal</th>
    <td headers="">42,806</td>
    <td headers="">4,865</td>
    <td headers="">9,475</td>
    <td headers="">13,466</td>
  </tr><tr>
    <td id="Q2">Quarter 2</td><td></td><td></td><td></td><td></td>
  </tr><tr>
    <th id="StoreAQ2">Store A</th>
    <td headers="">14,682</td>
    <td headers="">2,569</td>
    <td headers="">4,650</td>
    <td headers="">7,463</td>
  </tr><tr>
    <th id="">Store B</th>
    <td headers="">21,166</td>
    <td headers="">6,704</td>
    <td headers="">6,240</td>
    <td headers="">11,222</td>
  </tr><tr>
    <th id="">Subtotal</th>
    <td headers="">35,848</td>
    <td headers="">6,273</td>
    <td headers="">10,890</td>
    <td headers="">18,685</td>
  </tr>
</table>

</body>
</html>

   
    
    
  








Related examples in the same category

1.'tr' Example
2.table row with class
3.Table style for even rows
4.Set different colors for even and odd table row
5.table row background
6.table row hover
7.stripe table with Javascript
8.Coloring Rows in a Table
9.Selecting cells in row
10.Alternating Row Background
11.Alternating row colors
12.Hiding row
13.tr height: 30px;
14.tr background: #EFEFEF;
15.tr background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
16.tr color: #505050;
17.tr padding: 7px;
18.tr text-align: left;
19.Highlighting rows with mouse move