html table sizeThe 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>
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
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>
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>
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>
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 css tutorial javascript webmaster articles link exchange |
![]() html tutorial make money from your website |