Home HTML and CSS Tutorials Tricks using Tables

Tricks using Tables

Author: Jeff Singer More by this author

Added: Nov 16, 2004 Rating:

Level: Beginner Software: Dreamweaver

As with many things in HTML, there is not what I consider to be a logical reason for this particular behavior. The trick around it is to stick into the empty cell an invisible or non-printable character. The favorite for this purpose is

 

Please look carefully at the source code listed under each table. You will notice that the first table has the problem, and the second does not. If you get a chance, view this page with both Netscape and MS Internet Explorer and you will see a difference in how the browsers handle the first table!

Table Containing True Empty Cells
This cell has text
	This cell has text

Source code for table with empty cell problem

<TABLE WIDTH=230 BORDER=1 BGCOLOR=#00FFFF>
  <TR>
  <TD BGCOLOR=#00FF00 COLSPAN=2 ALIGN=CENTER>
   Table Containing True Empty Cells
   </TD>
  </TR>
  <TR>
    <TD WIDTH=115>This cell has text</TD>

    <TD WIDTH=115></TD>
  </TR>
  <TR>
    <TD WIDTH=115></TD>
    <TD WIDTH=115>This cell has text</TD>

  </TR>
</TABLE>

Table with Hidden Characters in Empty Cells
This cell has text
	This cell has text

Source code for table without empty cell problem

<TABLE WIDTH=230 BORDER=1 BGCOLOR=#00FFFF>
  <TR>
  <TD BGCOLOR=#00FF00 COLSPAN=2 ALIGN=CENTER>
   Table with Hidden Characters in Empty Cells
   </TD>
  </TR>
  <TR>

    <TD WIDTH=115>This cell has text</TD>
    <TD WIDTH=115>&nbsp;</TD>
  </TR>
  <TR>
    <TD WIDTH=115>&nbsp;</TD>

    <TD WIDTH=115>This cell has text</TD>
  </TR>
</TABLE>

See Also: