This tip concerns removing the extra padding or space before and after the <FORM> tag. Let us suppose that you have to constrain two text fields and a submit button/image in a limited vertical space. In order to layout the form fields and the button/image, you would place them in table cells (as we do with most other HTML elements). However, you will notice that there is extra space (vertical space) or padding before <FORM> occurs and after the end of the tag.
Now for an example. Below is issue which we are taking about.
Do you notice the extra space after the login button? Good. Now, let us see how we can remove this space. First check the incorrect code. The code for the above form is:
<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">
<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>
Notice the <FORM> tag surrounds the table in which the form fields occur.
In order to remove the extra space/padding, place the form tags INSIDE the table - just after and before the <TABLE> and </TABLE>. This way you get no space! Check the result and the code below
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:
Don't go away yet - there is more.
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>
That was a glimpse of what style sheets can do to your HTML document. Not only can they help you in creating those visuals which we either not possible with HTML or just too painful and complicated to implement, but they also help in segregating design and content which is what all web developers should strive for. Style sheets are the future so eventhough you might feel that their implementation is not the same across different browsers, it is a good idea to get a grasp their essence quickly.
