TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
<TR>
<TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
</TR>
<TR>
<TD>
<TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
<FORM NAME="spaceform">
<TR>
<TD ALIGN="RIGHT">Username:</TD>
<TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Password:</TD>
<TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Now, experienced web designers and developers will quickly notice that though the code above does its job well, IT IS NOT VALID HTML!. The HTML validator is located at W3C web site. According to HTML validation rules, the HTML <FORM> element cannot be enclosed between the <TABLE> and <TR> tags. But we can still achieve our goal with the help of Style Sheets. Now CSS (Cascading Style Sheets), allow us to set the margins and padding properties around HTML elements and we employ these two properties to remove the extra space and padding around the <FORM> element. Our code thus becomes:
<TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
<TR>
<TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
</TR>
<TR>
<TD>
<FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
<TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
<TR>
<TD ALIGN="RIGHT">Username:</TD>
<TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Password:</TD>
<TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
</TR>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Note how we have taken the FORM tags from inside the second table and placed them around it... and we have also specified the margin and padding style sheet properties to have a value of zero (0) pixels (px). The result is below:
The purpose of the first TABLE (the one that encloses the FORM and the second table) is ONLY to build a thin grey colored border. Most web developers and designers used this technique because it was cross-browser compatible. However, with the important browsers (Internet Explorer, Mozilla, Netscape, Opera...) now supporting style sheets and (imp) with equivalent results, we can again employ style sheets to create a 1 pixel thin border and do away with our outermost TABLE. Check the code below:
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 1px solid #878787">
<TR>
<TD STYLE="background-image: url('greygrad.gif');"><B>
Member login</B></TD>
</TR>
<TR>
<TD>
<FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
<TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
<TR>
<TD ALIGN="RIGHT">Username:</TD>
<TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Password:</TD>
<TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
</TR>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>
The code in blue reflects three cascading style sheets properties that I have introduced. These Style Sheet properties are placed inside the STYLE attribute of an HTML element (the <TABLE> and <TD> elements in our case). You will notice that each of the three properties (background-color, border and background-image) is given certain values. Before I detail each of the style sheets properties and their values, let us first check up how our form looks with this new code:
Style sheets can be included in an HTML document in three ways - External Styles, Embedded Styles and Inline Styles. We don't have to go into those "gory" details for now, but just for your information, we are including styles sheets in our document as Inline Styles - Styles placed inline with the HTML code.
The Style sheets background-color property
The property simply specifies the background color of the HTML element. I am a fan of Hexadecimal color codes, so I have used the hexadecimal code for light grey - #EEEEEE. Note, the value of the style sheet property is separated from its name with a color - :
The Style sheets background-image property
This property specifies the background image to be used for that HTML element. The image is refered by its URL which can be a absolute or a relative URL. I have used a relative URL here.
The Style sheets border property
The way I have used this style sheet property is more complex that the above two. Here I have specified 3 values to it - 1px, solid and #878787. Note, there are no commas separating the three values. So what I have essentially done is to direct the element to have a 1px (one pixel) thin #878787 colored solid border. Taking a step further in our understanding, let us create the same table with a 2 pixel thick, orange (#FF9900) colored border with dashes.
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 2px dashed #FF9900">
<TR>
<TD STYLE="background-image: url('greygrad.gif');"><B>
Member login</B></TD>
</TR>
<TR>
<TD>
<FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
<TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
<TR>
<TD ALIGN="RIGHT">Username:</TD>
<TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Password:</TD>
<TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
</TR>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>