SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: This dump HTML

  1. #1
    Almeaty Member
    Join Date
    Jul 2000
    Location
    Nowhere
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Los Angeles, CA
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just look at the source of this page!

  3. #3
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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.
    Wayne Luke
    ------------


  4. #4
    Almeaty Member
    Join Date
    Jul 2000
    Location
    Nowhere
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took a look at the code of the reply page:
    Code:
    <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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •