Intent
Use tables to provide page layouts for master pages on web sites. Although divs with CSS is preferred there are some issues that I am not happy about using CSS
- Really hard and sometimes just not possible to create a nice grid layout using just divs on a screen
- You have to worry about so many different browsers in the field
Remedy
I have started toying with tables again to see if they do a better job of page lay outs. Althought it is easy to draw a grid with tables, it is relatively harder to control the cell content to hug each other.
The hugging problem
Consider the following table definition
<table width="100%">
<tr><td>This is the heading row</td></tr>
<tr><td><hr></td></tr>
<tr><td>This is the bottom cell</td></tr>
</table>
This code divides the screen into three physical rows and two logical rows. The divider between the two rows is provided by the
<hr>
you will see that the second row will not hug the horizontal line even if you do the following
<table width="100%" border="0" padding="0">
<tr><td>This is the heading row</td></tr>
<tr><td><hr></td></tr>
<tr><td>This is the bottom cell</td></tr>
</table>
Use the border-top property of the cell for hugging
To accomplish the two horizontal rows with a hugging effect you have to remove the second physical row that contains the horizontal line and provide a border-top property for the second row-cell. Here it is with those changes
<table width="100%" border="0" padding="0">
<tr><td>This is the heading row</td></tr>
<tr><td><hr></td></tr>
<tr><td style="border-top:2px solid green;">This is the bottom cell</td></tr>
</table>
>> Tuesday, November 15, 2005 11:56:12 AM - Comments by satya
Aligning a header text to the left
TH.your-class { font-weight: bold; background-color: Gainsboro; text-align:left; }