Best Front Page and Web Design
Forum
ScriptFX - Web page design help Best Web Graphic program
here
 

Tables
trailing element and width measurements

 

Home    Front Page Index

Tables - Trailing element

Older versions of IE do not recognise a <br> or <p> at the end of a table cell. However, this is one instance that NS does recognise the code. You might use this, for example, to give extra space between the last line of text and the next cell, so text is not sitting on top of the text in the cell below. Or you may have coloured cells above and below to highlight some text. The first table show you how you would like it to look. You have space before and after the text, keeping it off the coloured cells below.

 


This is the look you want & how modern browsers will see it
spacer

 

This next table show you how some older browsers will view the above table. The space after the last word is missing, cramping the look of the table.

 


This is how older browsers will see this table

 

Using the <br> or <p> at the end is known as "trailing format element". The code for the middle cell would look like this (I have omitted the usual <td> width, etc for simplicity)

<td><br>This is how older browsers will see this table<br></td>

 

There are two ways to rectify this

First way, you can use a transparent gif

To make sure all browsers view it as you would like replace the <br> or <p> tag with a spacer image. A spacer image is a small transparent gif image of fixed size. Because it is transparent it will not be seen, regardless of what colour your background is. You can set the size to whatever you like in the picture properties menu. It is best to have a transparent gif of about 10x10 pixels to start off with, otherwise it is hard to actually highlight it to set the properties. The one I have used in the first table, started off at 10x10 then I set its size to 5 wide and 15 high. If you cant get the gif size to match the space at the top of the cell, then replace the top <br> with gif as well. There is no need to resample the image as the file size is so small anyway to bother about. Also by resampling you will then change the size of every transparent gif you have used throughout your pages!!  If you haven't already got a transparent gif you can use the one here. It is in a table with coloured border so you know where to find it (transparent remember!). Just click inside the red square below and save image as you normally would.

transparent gif 10x10

Second and correct way

Set your <td> height, this will be interpreted by all browsers and give you the extra space you require. You can then set your cell alignment to be in the middle of the cell.

 

back to top

 

SETTING TABLE WIDTH

By setting the table measurements correctly, not only will they view correctly in browsers, but will also help the page to load quicker. The viewer's browser will read the code, if it does not see any table measurements, it will not know how much room to leave, so will not carry on loading the rest of the page until the whole table and its contents have been loaded.

Both IE and NS interpret TD cell width differently. Say you have a table which you have set at 400 pixels wide. You have two columns. The left is going to be your navigation column and must be 145 pixels. So you set the TD width to 145 pixels. You don't bother setting the width of the main column as it is pretty obvious that the cell will occupy the remaining pixels. Not true! IE interprets TD width as absolute width and your cell of 145 will be just that. NS, on the other hand, interprets TD width as being the MINIMUM width for the cell. Setting the table measurements also helps the page to load quicker. The browser will come across the code, if it knows how many pixels to allow for the table (this goes for images as well), then it will continue loading other parts of the page, while the table is loading. If the measurements have not been set correctly, then the browser will wait until the table and contents has been loaded, before progressing to the rest of the page.

Check both the two below tables in IE and NS and you will see what I mean. For those of you without NS the third table is what it could look like. (This has been done using IE5.5 and NS4.7)

Table width 400 pixels. Left cell 145 pixels. Right cell no width set

145 pixels wide no width set

Table width 400 pixels. Left cell 145 pixels. Right cell 255 pixels

145 pixels wide width set at 255

This is for those without NS.
Your table could look like this if you do not set both cell widths.

145 pixels wide no width set

 

 

Discount Templates Discount Domains Domain Reseller  Template-Layouts 
Sponsor a child    Living Kidney Donation