Tables DeMystified: The Tables Trauma Tips Page

Troubleshooting

back to the menu

Those White Lines

Add a non-breaking space ( ) to every empty table cell in order to render a background for a table cell (Netscape).
Add both bgcolor="#hexhex" and background="images/background.gif" to properly render the table cell backgrounds in Netscape.
Set the table border to zero -- ** border=0 is NOT A VALID ATTRIBUTE for <TD> or <TR> tags. It will unnecessarily complicate your code and add to your load time WITH NO EFFECT! **
Remove all hard returns and spaces between the elements in a <td> cell. See the code above for an example. ** You do NOT need to string all your code together in one big line in order to prevent gaps in the table! Just within the outside <td> cells. REALLY! **
Not having the cells properly coded will cause the white lines as well. Try marking them out using graph paper and crossing out the ones you have coded. Any duplications (or omissions) will cause fine white lines to appear between cells.
Make sure your spacer.gif is actually transparent, or actually there!
Validate that HTML using the free HTML Validator LITE or their full commercial version.

Graphics That Don't Line Up

Make sure the center cell contains at least 110 continuous characters of text -- line breaks and images will not be enough.
Add width="100%" to the middle cell. ** this will only work if the margins of the page are set to zero.
In your graphics program, lay out the images on a contrasting background in order to see if they are cut properly.
Add 'topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"' to the <body> tag if your images should be flush with the window and are spaced away from it ('rightmargin="0"' and 'bottommargin="0"' can be used if necessary to reach the right and bottom of the window).
Validate that HTML using the free HTML Validator LITE or their full commercial version.

Special Circumstances (not necessarily full-bordered tables)

General Advice If you can't see the problem, try turning your table borders on. Then you can see where the cells are or aren't that are causing the troubles.
When using multiple stacked tables and your middle row won't work, add spacers to any cells that aren't held open by text or images. Remember, you must have at least 110 characters in a cell in order for it to be held open. For cells that won't have text, use a spacer.gif the correct width or height. Using the clear.gif set to a specific height and width is ideal.

Sample Code: <img src="images/spacer.gif" height=1 width=1 hspace=50 vspace=1 alt=""> will give you a spacer 101 pixels wide. Another way to write it would be <img src="images/spacer.gif" height=1 width=101 alt=""> which actually stretches the transparent image to fill the stated height and width and will force the cell to that width.

Take this image:
Three row, one column tables often have few difficulties, but are not resizeable. The biggest difficulty is the text jamming up against the side of the table edge. To solve this, add a nested table in the middle row at 80% or something smaller than 100% to add padding without messing up the outer table.
Multiple Tables no matter how many, whether stacked or nested, you MUST include the table width for precise layouts. If you are using images and backgrounds together, this is doubly important.
Repeating elements or Half-elements at different resolutions Wow, is this one common. Here is a rule of thumb that will save you headaches: if your table is relative, the images must expand and contract; if your table is absolute, they must not. Conversely, if your graphics are expandable, you can use a relative table set up; if your graphics are not, you MUST use an absolute table.
- absolute means that you use the exact pixel width in the code, as in width="150"
- relative means that you use the relational width in percents in the code, as in width="10%"
Double-bordered pages These three column tables are easy to set up (margins to zero, one row, three columns) but I have seen lots of conflicting advice on how to keep the outside columns from collapsing, the most amazing to me being setting the spacer.gif to 'height=1100' -- what??!! Please, if you are using this method, just use the width -- there is NO point to using the height as the text in the middle column will do that for you. If you use the height, you will have the page resize oddly at different resolutions (lower resolutions will get tons of extra space at the bottom of the page, or if you forget to add valign="top" at the top), and it just isn't necessary. This is superstitious coding at it's worst.
Short Content Tables A tip from Tiffany of Deco-Rations is if you have very little text or a 'short page', you will need to add a height to these columns. Make the table itself height=100% to get the columns to stretch to the bottom of the page at any resolution. If you are still having problems, try adding height=100% to the outside column cells as well. That should resolve any resizing problems for shorter pages.
Repeating backgrounds - an inheritance problem. Also from Tiffany of Deco-Rations: If your edges are fine, but the middle is repeating an edge element (in Netscape), specify a background and a background color for the middle cell.
Background inheritance problems with Netscape and nested tables. Tiffany of Deco-Rations resolved another problem for a member of the Crew-Crew where the nested table inherited the background of the parent table in Netscape. The only solution, other than using CSS (where you can specify background: none;) is to add both bgcolor and background attributes for the nested table and/or it's cells that you want to have different from the parent table. SEE TIP BELOW!
Background inheritance - a different solution! From an anonymous benefactor: Specifying background=none in the table with the bad repeat problem makes the problem go away!

More Table Templates and Other Tips Pages!

Brought to you by Rayna of Triple Orbit, you can download different types of table templates, not just nine-celled full-bordered tables! Check them out at Triple Orbit's Tables Templates.

Getting Started Net a division of Project Cool Media, goes over the building and troubleshooting of tables in both the major browsers.

Tables Demystified

Table Code for Full Bordered Tables

Troubleshooting

Those White Lines

Graphics That Don't Line Up

Special Circumstances (not necessarily full-bordered tables)

More Table Templates and Other Tips Pages!

Add Your Suggestion!

Spread the word


	Sample Code \| TroubleShooting Tips \| Spread the Word! Tables Demystified Much thanks to Ann-S-Thesia's Full Border Tutorial. If you want to know how to create the graphics for this sort of border, please see her tutorial. This is simply the code that works. The help of Ann, the Cyber-Crew, and the experience of countless others, has resulted in this cross-browser code for 'full bordered' table graphics -- the kind that fill the entire browser window at any resolution. The tags are aqua, the key attributes are in green and any key values for those attributes are in yellow. Replace "#hexhex" with the actual hex code for the colour you need. Remember to change the height and width attribute values to match your graphics! Table Code for Full Bordered Tables back to the menu <html> <head> <title>Your Page Name</title> </head> <body bgcolor="#hexhex" text="#hexhex" link="#hexhex" alink="#hexhex" vlink="#hexhex"> <!-- optional: you can add marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 to the BODY tag to force the table to the edges of the window --> <table bgcolor="#hexhex" cellpadding=0 cellspacing=0 width="100%" align="center" border=0> <tr> <td height="50" width="50" bgcolor="#hexhex"><img src="top_left.gif" alt="" height="50" width="50" border=0></td> <td height="50" background="top.gif" bgcolor="#hexhex"> </td> <td height="50" width="50" bgcolor="#hexhex"><img src="top_right.gif" alt="" height="50" width="50" border=0></td> </tr> <tr> <td width="50" background="left.gif" bgcolor="#hexhex"> </td> <td bgcolor="#hexhex" background="middle.gif"> <!-- Your content goes here --> At least 110 characters of continuous (no line breaks) text need to go here in order to push the center of the table into the correct proportions. DO NOT, under any circumstances, put spaces between elements or tags inside the table cells (except the middle cell, where the text and content go), or you will get white lines on your page. <!-- End of your content --> </td> <td width="50" background="right.gif" bgcolor="#hexhex"> </td> </tr> <tr> <td height="50" width="50" bgcolor="#hexhex"><img src="bottom_left.gif" height="50" width="50" alt="" border=0></td> <td height="50" background="bottom.gif" bgcolor="#hexhex"> </td> <td height="50" width="50" bgcolor="#hexhex"><img src="bottom_right.gif" height="50" width="50" alt="" border=0></td> </tr> </table> </body> </html>


	Troubleshooting back to the menu Those White Lines Add a non-breaking space ( ) to every empty table cell in order to render a background for a table cell (Netscape). Add both bgcolor="#hexhex" and background="images/background.gif" to properly render the table cell backgrounds in Netscape. Set the table border to zero -- border=0 is NOT A VALID ATTRIBUTE for <TD> or <TR> tags. It will unnecessarily complicate your code and add to your load time WITH NO EFFECT! Remove all hard returns and spaces between the elements in a <td> cell. See the code above for an example. You do NOT need to string all your code together in one big line in order to prevent gaps in the table! Just within the outside <td> cells. REALLY! Not having the cells properly coded will cause the white lines as well. Try marking them out using graph paper and crossing out the ones you have coded. Any duplications (or omissions) will cause fine white lines to appear between cells. Make sure your spacer.gif is actually transparent, or actually there! Validate that HTML using the free HTML Validator LITE or their full commercial version. Graphics That Don't Line Up Make sure the center cell contains at least 110 continuous characters of text -- line breaks and images will not be enough. Add width="100%" to the middle cell. this will only work if the margins of the page are set to zero. In your graphics program, lay out the images on a contrasting background in order to see if they are cut properly. Add 'topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"' to the <body> tag if your images should be flush with the window and are spaced away from it ('rightmargin="0"' and 'bottommargin="0"' can be used if necessary to reach the right and bottom of the window). Validate that HTML using the free HTML Validator LITE or their full commercial version. Special Circumstances (not necessarily full-bordered tables) General Advice If you can't see the problem, try turning your table borders on. Then you can see where the cells are or aren't that are causing the troubles. When using multiple stacked tables and your middle row won't work, add spacers to any cells that aren't held open by text or images. Remember, you must have at least 110 characters in a cell in order for it to be held open. For cells that won't have text, use a spacer.gif the correct width or height. Using the clear.gif set to a specific height and width is ideal. Sample Code: <img src="images/spacer.gif" height=1 width=1 hspace=50 vspace=1 alt=""> will give you a spacer 101 pixels wide. Another way to write it would be <img src="images/spacer.gif" height=1 width=101 alt=""> which actually stretches the transparent image to fill the stated height and width and will force the cell to that width. Take this image: Three row, one column tables often have few difficulties, but are not resizeable. The biggest difficulty is the text jamming up against the side of the table edge. To solve this, add a nested table in the middle row at 80% or something smaller than 100% to add padding without messing up the outer table. Multiple Tables no matter how many, whether stacked or nested, you MUST include the table width for precise layouts. If you are using images and backgrounds together, this is doubly important. Repeating elements or Half-elements at different resolutions Wow, is this one common. Here is a rule of thumb that will save you headaches: if your table is relative, the images must expand and contract; if your table is absolute, they must not. Conversely, if your graphics are expandable, you can use a relative table set up; if your graphics are not, you MUST use an absolute table. absolute means that you use the exact pixel width in the code, as in width="150" relative means that you use the relational width in percents in the code, as in width="10%" Double-bordered pages These three column tables are easy to set up (margins to zero, one row, three columns) but I have seen lots of conflicting advice on how to keep the outside columns from collapsing, the most amazing to me being setting the spacer.gif to 'height=1100' -- what??!! Please, if you are using this method, just use the width -- there is NO point to using the height as the text in the middle column will do that for you. If you use the height, you will have the page resize oddly at different resolutions (lower resolutions will get tons of extra space at the bottom of the page, or if you forget to add valign="top" at the top), and it just isn't necessary. This is superstitious coding at it's worst. Short Content Tables A tip from Tiffany of Deco-Rations is if you have very little text or a 'short page', you will need to add a height to these columns. Make the table itself height=100% to get the columns to stretch to the bottom of the page at any resolution. If you are still having problems, try adding height=100% to the outside column cells as well. That should resolve any resizing problems for shorter pages. Repeating backgrounds - an inheritance problem. Also from Tiffany of Deco-Rations: If your edges are fine, but the middle is repeating an edge element (in Netscape), specify a background and a background color for the middle cell. Background inheritance problems with Netscape and nested tables. Tiffany of Deco-Rations resolved another problem for a member of the Crew-Crew where the nested table inherited the background of the parent table in Netscape. The only solution, other than using CSS (where you can specify background: none;) is to add both bgcolor and background attributes for the nested table and/or it's cells that you want to have different from the parent table. SEE TIP BELOW! Background inheritance - a different solution! From an anonymous benefactor: Specifying background=none** in the table with the bad repeat problem makes the problem go away! More Table Templates and Other Tips Pages! Brought to you by Rayna of Triple Orbit, you can download different types of table templates, not just nine-celled full-bordered tables! Check them out at Triple Orbit's Tables Templates. Getting Started Net a division of Project Cool Media, goes over the building and troubleshooting of tables in both the major browsers.