Row Level with Summary Table

**Row level with summary Table example**
With a "`td`" layout cell at the top left corner and "`hassum`" option set.
Row Group Heading
	Header	Header	Header	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Summary	Data	Data	Data	Data	Data	Data	Data	Data	Data
Row Group Heading
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Summary	Data	Data	Data	Data	Data	Data	Data	Data	Data
Row Group Heading
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Summary	Data	Data	Data	Data	Data	Data	Data	Data	Data
Row Group Heading
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Summary	Data	Data	Data	Data	Data	Data	Data	Data	Data
Summary	Data	Data	Data	Data	Data	Data	Data	Data	Data

Table Source Code



<table class="wet-boew-zebra hassum">
	<caption>
		<strong>Row level with summary Table example</strong>
		<p>With a "<code>td</code>" layout cell at the top left corner and "<code>hassum</code>" option set.</p>
	</caption>
	<thead>
		<tr>
			<td></td>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th colspan="10">Row Group Heading</th>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th>Summary</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="10">Row Group Heading</th>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th>Summary</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="10">Row Group Heading</th>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th>Summary</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="10">Row Group Heading</th>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th>Summary</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th>Summary</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Note:

For that kind of table, the recommandation is to use the technique H43: Using id and headers attributes to associate data cells with header cells in data tables. A short way to assign id/headers is to use the HTML Table Validator.

Header bar

Search

Row Level with Summary Table