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

1. Really hard and sometimes just not possible to create a nice grid layout using just divs on a screen
2. 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;
}