How to make a table that looks like this in html or make a tableless one
- by Sithelo
I have a to present data in html with headers. Below is the image of part of the header which i am struggling with.
I have managed to rotate the text but the problem is there overlap.
This is the code of the whole structure.
<style type="text/css"> .text-rotation {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
height:inherit;
}
</style>
</head>
<body>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1">
<tr>
<td rowspan="5"> </td>
<td rowspan="5" align="center" valign="bottom">Code</td>
<td rowspan="5" align="center" valign="bottom">Change</td>
<td rowspan="5" align="center" valign="bottom">Description</td>
<td colspan="6" align="center" bgcolor="#FF6666">STOCK RANGE</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#66CC00" >SPHERICAL</td>
<td colspan="2" align="center" bgcolor="#FFCC00" >SPH/CYL-/-</td>
<td colspan="2" align="center" bgcolor="#0066CC">SPH/CYL+/-</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">MINUS</td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">MINUS</td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">MINUS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
