Irregular Headers Table with Sum of Column Values

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 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>

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>