tables are very important in professional web design. You will need them for holding pictures, buttons, text etc. In this chapter we will cover more options about table cells, cell padding, cell spacing and finally we will learn how to link different parts of an image to different locations on the web.
Cell Width (Column Width)
In previous lesson we learned how we can determine width and height of a table.
<HTML>
<HEAD>
<TITLE>Table: Column widths not specified</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above table we have not determined sizes for two cells in first row. In this way you will not be able to say how will these cells display in different browsers and different screen modes. You can determine width of each column in your table by specifying width of cells in first row. Just be careful about correctness of sizes you specify. For example if your table width is 200 pixels sum of cell widths must be exactly 200.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can also determine cell widths in percent. Sum of cell width percentages must be 100%.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=35%>TOP LEFT</TD>
<TD WIDTH=65%>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
When you determine sizes of first row cells you will not need to determine widths for second row cells. If you want a cell to be empty, you cannot omit definition for that cell. Insert cell definition, and enter a between <TD></TD> tags .As we told in later lessons this means a space character. You must enter at least a space in this form if you need an empty cell.Otherwise area of that cell will not apear like an empty cell.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260> </TD>
</TR>
<TR>
<TD> </TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above example we have two empty cells but as we have specified both table and cell sizes, table will not lose it’s shape. If we remove sizes, we cannot guarantee how it will be displayed on different browsers and screen modes. For the above reason we suggest you to determine table sizes in every table you use. Using fixed sizes is not a good idea. Use percent sizes instead of fixed sizes. 6-3 Cell padding You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
Cell padding effect : <BR><BR>
<TABLE BORDER=3 CELLPADDING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Default value for this option is 1. It means that contents of a cell will have a distance of one pixel with borders. If you don’t want any space between object inside the cells and its borders you can determine the value of 0 for this option.
Cell spacing
Cell spacing parameter determines the space between inner and outer parts of a table. In fact a table is constructed form two borders . A border area and a cell area. There is a space between cell area and outer border. We call this “cell spacing”. If you increase this value you will have a thick border. Default value for this property is 2. If you specify 0 for
it, you will have a very thin border.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
Cell spacing effect : <BR><BR>
<TABLE BORDER=3 CELLSPACING=10>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can also mix cell spacing and cell padding options to make specific tables that you need.