Irregular Headers Table With Sum Of Column Values

Trang chủ » Html Table Scope Colgroup » Irregular Headers Table With Sum Of Column Values

Có thể bạn quan tâm

This blog show the tables with header cells that merge multiple columns and/or rows with total of column values at bottom table footer. Different attributes and elements can be used to define the structure.

For example, three columns can be merged or span to form a single data cell. This can be done by using scope attribute and column group. Same process would be followed for merging header cell to combine them as single row.

The structure of groups of rows and columns required to defined withing table.

  • <colgroup> for grouping multiple columns.
  • <rowspan> for combine multiple rows
  • scope="colgroup"
  • scope="row"

table-column-group

<table class="table table-bordered table-item-sales data" id="tableItemSalesData"> <thead> <tr> <th rowspan="2">Location</th> <!-- merge two rows --> <th colspan="4" scope="colgroup">This Month</th> <!-- merge four columns --> <th colspan="4" scope="colgroup">Last Month</th> <th colspan="4" scope="colgroup">This Year</th> </tr> <tr> <th scope="col">$Basket</th> <th scope="col">$Ticket</th> <th scope="col">Qty</th> <th scope="col">$Items</th> <th scope="col">$Basket</th> <th scope="col">$Ticket</th> <th scope="col">Qty</th> <th scope="col">$Items</th> <th scope="col">$Basket</th> <th scope="col">$Ticket</th> <th scope="col">Qty</th> <th scope="col">$Items</th> </tr> </thead> <tr> <td>Store 1</td> <td>30</td> . . <td>900.00</td> </tr> <tr> <td>Store 2</td> <td>40</td> . . <td>200.00</td> </tr> <tfoot> <tr class="total"> <td><span>4</span> Locations</td> <!-- empty cells fill data dynamically for column total --> <td></td> . . <td></td> <!-- / --> </tr> </tfoot> </table>

Function to calculate sum :

<script type="text/javascript"> // Calculate tableItemSalesData column total var calculateColumnTotal = (function(){ //loop for number of clumns for(var i = 2; i <= 13; i++ ) { var value, theTotal = 0; // nth child selector iterate table body td's $("#tableItemSalesData tbody td:nth-child(" + i + ")").each(function () { value = $(this).html(); theTotal += parseFloat(value); // nth child selector iterate table footer td's $("#tableItemSalesData tfoot td:nth-child(" + i + ")").text( theTotal); }); } }); calculateColumnTotal(); </script>

table-irregular-header

To crate irregular header use scope="colgroup" and scope="row"

<table class="table table-bordered table-item-sales data irregular-header"> <col> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <thead> <tr> <td></td> <th colspan="1" scope="colgroup">$Basket</th> <th colspan="1" scope="colgroup">$Ticket</th> <th colspan="1" scope="colgroup">Qty</th> <th colspan="1" scope="colgroup">$Items</th> </tr> </thead> <tbody> <tr> <th scope="row">This Month</th> . . <td>1200</td> </tr> . . <tr> <th scope="row">Last year</th> <td>60</td> . <td>200</td> </tr> </tbody> <tfoot> <tr> <th scope="row">Total</th> . . <td>200</td> </tr> </tfoot> </table>

Từ khóa » Html Table Scope Colgroup