Table test 09

Example 1

This example uses headers and IDs to avoid repeating information on subsequent rows.

Account name	Account number	Account details
Bankwest account	39 045 912	Jeff
		Peter
		Mary

<table>
	<thead>
		<tr>
			<th id="th1">Account name</th>
			<th id="th2">Account number</th>
			<th id="th3">Account details</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="r2c1" headers="th1">Bankwest account</th>
			<th id="r2c2" headers="th2">39 045 912</th>
			<td headers="th3 r2c1 r2c2">Jeff</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td headers="th3 r2c1 r2c2">Peter</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td headers="th3 r2c1 r2c2">Mary</td>
		</tr>
	</tbody>
</table>

Example 2

This example places the repeated information in each row, but it is hidden when repeated.

Account name	Account number	Account details
Bankwest account	39 045 912	Jeff
Bankwest account	39 045 912	Peter
Bankwest account	39 045 912	Mary

<table>
	<thead>
		<tr>
			<th scope="col">Account name</th>
			<th scope="col">Account number</th>
			<th scope="col">Account details</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Bankwest account</td>
			<td>39 045 912</td>
			<td>Jeff</td>
		</tr>
		<tr>
			<td><span class="ally-context">Bankwest account</span></td>
			<td><span class="ally-context">39 045 912</span></td>
			<td>Peter</td>
		</tr>
		<tr>
			<td><span class="ally-context">Bankwest account</span></td>
			<td><span class="ally-context">39 045 912</span></td>
			<td>Mary</td>
		</tr>
	</tbody>
</table>

Support chart
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	x	x
Windows 7	IE 8	x	x
Windows 7	Chrome 39	x	x
Windows 7	Firefox 34	x	x
OSX 10.9	Chrome 39			x
OSX 10.9	Firefox 34			x
OSX 10.9	Safari 7			x

Bottom of page - Back to home