I want to place two different segments of text on top a table. Both segments must be aligned at opposite borders (i.e. left align and right align). I don’t want them to be aligned with any column inside the table but just with the overall width of the table.
<HTML>
<BODY>
<div id=”container” style=”width:100%;”>
<table style=”width: 100%; border: 0px solid;”>
<tr>
<td align=left>Select all columns</td>
<td align=right>Number of Pages…1 2 3</td>
</tr>
</table><table style=”width: 100%; border: 1px solid;”>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>ColumnN</th>
</tr>
<tr>
<td>Data column 1</td>
<td>DATA column 2</td>
<td>Data COLUMN 3</td>
</tr>
</table>
</div></BODY>
</HTML>
Put the following in style.css:
div.row span.left {
float: left;
text-align: left;
font-weight: bold;
width: 49%;
}div.row span.right {
float: right;
text-align: right;
font-weight: bold;
width: 49%;
}Now put this in your html file (which is in the same folder as the CSS):
<html>
<body>
<link REL=StyleSheet HREF=”style.css” TYPE=”text/css”><div id=”container” style=”width:100%;”>
<div>
<span>Select all columns</span>
<span>Number of Pages…1 2 3</span><table style=”width: 100%; border: 1px solid;”>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>ColumnN</th>
</tr>
<tr>
<td>Data column 1</td>
<td>DATA column 2</td>
<td>Data COLUMN 3</td>
</tr>
</table>
</div>
</div></body>
</html>