suv4x4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table linearization experiment</title>
<style>
	table {
		table-layout:fixed;
		padding:0;
		margin:0;
		border-width:0;
		border-collapse:collapse;
		width:100%;
	}
	td {
		padding:0;
		margin:0;
	}
	
	#header { background-color: pink }
	#sideMenu {background-color:orange; width:100px}
	#content, #pan {background-color:blue; }
	#pan {background-color:red;}
	#footer {background-color:green}
</style>
</head>

<body>
	<p>
		Linearize those two and notice they are the same to a screen reader:
</p>
	<table>
		<tr>
			<td colspan="2" id="header">h</td>
		</tr>
		<tr>
			<td id="sideMenu"><p>
				m
			</p>
				<p>
					o
				</p></td>
			<td id="content">c</td>
		</tr>
		<tr>
			<td colspan="2" id="footer">f</td>
		</tr>
	</table>
	
	<p></p>
	
	<table>
		<tr>
			<td colspan="2" id="header">h</td>
		</tr>
		<tr>
			<td id="pan"></td>
			<td id="sideMenu" rowspan="2">m</td>
		</tr>
		<tr>
			<td id="content">c</td>
		</tr>		
		<tr>
			<td colspan="2" id="footer">f</td>
		</tr>
	</table>
	
</body>
</html>