Code complex tables Tables

How to code complex table. As presented at the Web Experience Toolkit Codefest 4.

HTML5 reading order for table

<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>
ID Measurement Average Maximum
Cats
93 Legs 3.5 4
10 Tails 1 1
English speakers
32 Legs 2.67 4
35 Tails 0.33 1
Reading order with scope

Sodoku

1 3 6 4 7 9
2 9 1
7 6
2 4 3 9 8
 
5 9 7 1
6 5 2
7
9 8 2 5
View code 
<table class="wb-zebra wb-zebra-col-hover table table-bordered table-hover">
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
		<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
		<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<td>1</td>
			<td></td>
			<td>3</td>
			<td>6</td>
			<td></td>
			<td>4</td>
			<td>7</td>
			<td></td>
			<td>9</td>
		</tr>
		<tr>
			<td></td>
			<td>2</td>
			<td></td>
			<td></td>
			<td>9</td>
			<td></td>
			<td></td>
			<td>1</td>
			<td></td>
		</tr>
		<tr>
			<td>7</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>6</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>2</td>
			<td></td>
			<td>4</td>
			<td></td>
			<td>3</td>
			<td></td>
			<td>9</td>
			<td></td>
			<td>8</td>
		</tr>
		<tr>
			<td>&#160;</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>5</td>
			<td></td>
			<td></td>
			<td>9</td>
			<td></td>
			<td>7</td>
			<td></td>
			<td></td>
			<td>1</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>6</td>
			<td></td>
			<td></td>
			<td></td>
			<td>5</td>
			<td></td>
			<td></td>
			<td></td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>7</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>9</td>
			<td></td>
			<td></td>
			<td>8</td>
			<td></td>
			<td>2</td>
			<td></td>
			<td></td>
			<td>5</td>
		</tr>
	</tbody>
</table>

Positive / Negative

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing 
<table class="table">
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

Dice possibility

1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12 
<table class="table">
 <tbody>
  <tr><th>  </th><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th><th> 6 </th></tr>
  <tr><th> 1 </th><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td></tr>
  <tr><th> 2 </th><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td></tr>
  <tr><th> 3 </th><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td></tr>
  <tr><th> 4 </th><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td></tr>
  <tr><th> 5 </th><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11 </td></tr>
  <tr><th> 6 </th><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11 </td><td> 12 </td></tr>
 </tbody>
</table>
Date modified: