This dump HTML

[dekuro]

Sorry, for the subject... I'm just trying to make a similar table just like the ones here in this very forum. You have this orange header and under it the listings of the threads. The header has NO white space between but the lists have. What's the trick?

The problem is: each TD must have the same width as the TD below, so creating a new table won't be a solution and the code of this forum shows that it is not done so. They have a bgcolor defined in the TR of the orange header, but this doesn't seem to work at my site. THough I use the same browser..

HELP!!

[igor@af]

just look at the source of this page!

[Hierophant]

Actually if you look at the code you will see that the page is made up of multiple tables...

The thread display page is made up of at least 6 plus one for each post tables....

Header, Breadcrumb, Top Orange Header, Posts (X times), Bottom Orange Footer and Footer.

By using these layered tables we can increase the perception of a faster download time. You can start reading and navigating before the page is finished downloading and rendering. This is a common technique used on many sites. The reason being is that a table cannot be rendered until it is completely downloaded. By breaking things up you will speed rendering up.

Let us examine each portion in turn skipping the header and the footer.

BreadCrumb
This table has two cells. The first contains the actual breadcrumb path (i.e.: sitepoint forums > client side scripting > this dump html) as well as the Print, Email and New Post links underneath that. The other contains links to the next and previous threads if appropriate.

Orange Header
This is the table you expressed interest in. The code is simple.

<a name="posttop"></a>
<table width="98%" border="0" cellspacing="0" cellpadding="4">
  <TR bgcolor="#FB8821">
    <TD valign="middle" width="175" nowrap>
      <FONT face="verdana,arial,helvetica" size="1"  color="#FFFFFF" class=thtcolor><B>Author</B></font>
    </TD>
    <TD valign="middle" width="100%">
      <table width="100%" border="0" cellpadding="4" cellspacing="0">
        <tr>
          <td valign="middle" width="100%">
            <FONT face="verdana,arial,helvetica" size="1"  color="#FFFFFF" class=thtcolor><B>**Thread ** </B></font>
          </td>
          <td valign="middle">*</td>
          <td valign="middle">
            <FONT face="arial, helvetica" size="2" >*</font>
          </td>
          <td valign="middle">
            <A HREF="newreply.php?action=newreply&threadid=14005"><IMG SRC="images/reply.gif" BORDER=0 ALT="Post A Reply (Alt-R)"></A>
          </td>
        </tr>
      </table>
    </TD>
  </TR>
</table>

If you can tell there is no cellspacing on this table. This accounts for the lack of white borders in the orange bars.

Posts
This is a table for each post. It is comprised of a wrapper and an individual table for each post. The wrapper has a cellspacing of 1 and two columns. The cellspacing of 1 is what creates the white borders. The first column contains Author information. The second contains the post icons and the actual message. Each cell is actually one or more cells.

Orange Footer
This is basically a duplicate of the Orange Header it just contains slightly different information.

Setting background colors should work on rows, cells and tables themselves. The hierarchy is that cells are highest priority, then rows, then the table then the page itself. However, some browsers may not be HTML 4.0 compliant and not render the pages properly.

[dekuro]

I took a look at the code of the reply page:

<table border=0 cellpadding=4 cellspacing=1 width="98%">
    <tr bgcolor="#FB8821"> 
      <TD COLSPAN=2> <FONT face="arial, helvetica" size="2" color="#FFFFFF"><B>Post Reply</B></font></td>
    </tr>
    <tr bgcolor="#EBF1F7"> 
      <td valign=top width="19%"> <FONT face="arial, helvetica" size="2" ><B>Your UserName:</B></font></td>
      <td valign=top width="81%"> <INPUT TYPE="TEXT" NAME="username" VALUE="DIMA" SIZE=25 MAXLENGTH=25></td>
    </tr>
</table

There we have cellspacing=1 but in the blue area we don't have any spaces at all, although the parts are seperated by <td>.

Of course the orange header doesn't have space because of colspan=2, but how come with the blue part?