Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Tricks using Tables

Tricks using Tables

Browse Pages: << < 1  2  3  4  5  > >>

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

&nbsp;

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:



Author's URL: Jeff Singer
Browse Pages: << < 1  2  3  4  5  > >>
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

No comments yet...
Add comments to "Tricks using Tables"

Captcha