Site hosted by Angelfire.com: Build your free website today!
 

html table size

The size of a table

height and width attributes can be added to the <TABLE> tag as well as the <TD> tag
<TABLE width=300 height=100>
my first table

the table above is set to a width of 300 pixels and a height of 100 pixels
the problem is that the height attribute is not recognised by certain browsers, so we have to cheat by employing the 1 x 1 pixel trick

the 1 x 1 pixel trick is commonly used by webmasters to control the size of tables and table cells, a transparent gif image measuring 1 pixel x 1 pixel is stretched to 100 pixels in height, the width remains set to 1 and the image is aligned to the left

<TABLE border=1 width="300">
<TR>
<TD>
<img width="1" height="100" align="left" src="invisible.gif">
</TD>
</TR>
</TABLE>

transparent gif - save this to your harddrive rightclick on it and select 'save image as' from the popup menu
  the transparent 1 x 1 pixel gif
it has been stretched to 100 x 100 pixels so that users can rightclick on it an save it
transparent gif
  

The importance of width

setting the width of the table can present a problem if the width is specified as an absolute size, for example if the width were set to 800 users with monitors of 640x480 pixels will be forced to scroll sideways, which can be an annoyance.
if it is to be of importance that no-one be excluded, the width should not be set greater than 540 pixels
setting the width so rigidly does not leave much scope for creativity and does not look very appealing on large monitors to get around this we can (thankfully) set the width as a percentage of the screen width
<TABLE width=50% height=100>
my first table

the beauty of setting the width attribute as a percentage is that the tables become stretchy, resize your browser now and see for yourself
<TABLE width=80% height=100>
my first table

whatever the screensize, a table with its width attribute set at 50% will always be half the width of the window it is veiwed in, and of course a table with its width attribute set at 100% will always stretch the full width of the window it is veiwed in.

height and width in cells

in this example a width of the table is set at 80% of the screen width, the cells are set at widths of 60% and 40% of the table width
<TABLE width=80%> <TD width=60% height=100>
cell 1
<TD width=60% height=100> 		cell 2
<TD width=40%>

since the height attibute is set in the first table definition tag there is no need to add it to the <TABLE> tag or the second <TD>.
the height attribute is included in this example for the sake of clarity and completeness, the attribute could be ommited since the invisible gif has been used to provide the height.

html tutorial    html tutorial    html tables tutorial    next :
previous : 		html tables td tag
table border


html tutorial css tutorial javascript webmaster articles link exchange
html tutorial

make money
from your website