SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Table Trouble

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Table Trouble

    Hi

    I'm trying to create a simple template that looks like this:
    Code:
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    x       x               x               x
    x       x               x               x
    x       x               x               x
    xspacer xbuttons        xlogo image     x
    xgif    xvia ssi        x               x
    x       x               x               x
    x       x               x               x
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    followed by a table that looks like this
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    x       x                               x
    x       x                               x
    xspacer xbody text                      x
    xgif    x                               x
    x       x                               x
    x       x                               x
    x       x                               x
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    followed by a table that looks like this:
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    x            x              x           x
    x            x              x           x
    x  image     x   image      x  image    x
    x            x              x           x
    x            x              x           x
    x            x              x           x
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    x  caption   x  caption     x  caption  x
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    It should be pretty simple! I must be overlooking something stupid.
    I got a far as the second table with the following results.:-(
    The results of my efforts are here:

    http://www/tweedspub.com/table_test.shtml

    What am I doing wrong? The second table is to the right of the first table instead of below it! Maybe I've just been looking at it too long, but...
    I'm not a total novice so I feel pretty stupid.
    "Living life in the fun lane!"

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't get to it with IE6 which makes me think that you're not closing a <td> somewhere...IE6 can be picky about this...finally they are getting standards compliant!

    At any rate, if you want to post your code here, I can look at it.

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    UK
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think the url was mistyped: try http://www.tweedspub.com/table_test.shtml

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    I can't get to it with IE6 which makes me think that you're not closing a <td> somewhere...IE6 can be picky about this...finally they are getting standards compliant!

    At any rate, if you want to post your code here, I can look at it.

    Sketch
    Boy, you are fast. The reason you couldn't get to it was I mistyped the URL.

    Try http://www.tweedspub.com/table_test.shtml

    That should work. Now I feel reallllllllly STUPID!
    "Living life in the fun lane!"

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ai! WYSIWYG! cluttered junk!

    Anyways. Try adding a <br> after each table. That shouldn't make a huge difference, but you can try that. Also, you might try nesting those 3 tables inside another master table...

    Code:
    <table>
      <tr>
        <td>
          <!--Table 1 HTML-->
        </td>
      </tr>
      <tr>
        <td>
          <!--Table 2 HTML-->
        </td>
      </tr>
      <tr>
        <td>
          <!--Table 3 HTML-->
        </td>
      </tr>
    </table>
    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <br> didn't do it but <br clear=all> did!
    Hmmm...
    Amazing. Hey thanks for the lightning quick reply!

    I'll also try nesting the tables.
    "Living life in the fun lane!"

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    UK
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    edited: you could also have tried removing the 'align=left' from the first table. the one in the <table> tag.

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tsk Tsk TSK...

    He's got "align=left" in the very top TABLE tag. Remove that and you're good to go.

    By default, all elements align left anyway. Plus, when you use align="left" on an object like a table, you're telling other elements that they are allowed to wrap around that object. However, since a TABLE is a block level element, it CAN'T wrap around other objects.

    And indeed...you really need to clean up that code. Quote your attributes young man or there's no dessert for you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    And indeed...you really need to clean up that code. Quote your attributes...
    I need all the guidance and direction I can get!!!
    What does that mean "Quote your attributes"?
    "Living life in the fun lane!"

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you don't know, I'm not telling... Lol... no it means to do things like <table cellspacing="0"> and putting quotes around all your attributes.

    Here' I made some good comliant code for you of yours. Hopefully you can see the difference. It also utilizes CSS. take it or leave it. I had time on my hands.
    Code:
    <html>
    <head>
    <title> Table Test </title>
    <style type="text/css">
    body {background-image: url(redbar.gif); }
    .table {width: 640px; border: 1px; }
    .slogan {font-family: Arial, Helvetica; 
    	text-size: medium; 
    	font-weight: bold;
    	}
     p.bodytext {font-family: Arial, Helvetica;
    	text-size: small;
    	font-weight: normal;
    	}
    </style>
    </head>
    <body>
    <!-- the table is 640 pixels to avoid side scroll on low res screens -->
    <table class="table" cellspacing="1" cellpadding="1">
    <tr>
    	<td style="width:60px;">
    		<img src="spacer.gif" style="width: 60px; height: 1px; border: 0px;" alt="spacer_red.gif - 807 Bytes">
    	</td>
    	<td style="width:230px;">
    		<!-- #include file="buttons.txt" -->
    	</td>
    	<td style="width:350px; text-align: center;">
    		<img src="test_logo.gif" style="width: 325px; height: 140px; border="0px;">
    		<span class="slogan">Company Slogan Here</span>
    	</td>
    </tr>
    </table>
    
    <!-- Second table -->
    <table class="table" cellspacing="1" cellpadding="1">
    <tr>
    	<td style="width:60px;">
    		<img src="spacer.gif" style="width: 60px; height: 1px; border: 0px;" alt="spacer.gif">
    	</td>
    	<td style="width:580px;">
    <p class="bodytext">
    Since our founding in 1980, Business Logic has specialized in 
    understanding the business and information needs of corporations 
    and government agencies and in finding, designing, developing and 
    implementing solutions to meet these needs.
    </p>
    <p class="bodytext">
    We are recognized nationally for our expertise in information 
    systems and relational database technology. We pride ourselves 
    on the value that we have added to the information systems at 
    dozens of firms throughout the United States. These clients have 
    come to rely on our expertise and commitment to their organizations 
    and to solving their business problems. 
    </p>
    <p class="bodytext">
    If you feel that your business is not getting all the benefits made 
    possible by the correct use of today's technology, then you should 
    contact Business Logic today.
    </p>
    	</td>
    </tr>
    </table>
    
    <!-- Third Table -->
    <table class="table" cellspacing="1" cellpadding="1">
    <tr>
    	<td><!---Image---></td>
    	<td><!---Image---></td>
    	<td><!---Image---></td>
    </tr>
    <tr>
    	<td><!--Caption---></td>
    	<td><!--Caption---></td>
    	<td><!--Caption---></td>
    </tr>
    </table>
    </body>
    </html>
    More than was asked for, but I was bored...

    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For future reference.

    HTML is a tag based language. It's structure can be described like so:

    <tag_name attribute="value">
    <img src="someimage.jpg">

    That is HTML at it's most basic. In previous versions og HTML there was no emphasis on coding a certain way. So you'd have people write the above, valid, code several different ways:

    <TAG_NAME ATTRIBUTE="value">
    <tag_name attribute='value'>
    <tag_name ATTRIBUTE=value>

    Now, with the emergence of xHTML, the world wide web consortium is saying "this is the way you should code". Not only will this promote better, and more valid code, but it will also introduce a standard by which developers can judge themselves and their work.

    Part of the xHTML spec is that all values must be quoted, all tags and attributes should be in lowercase and all tags must be closed.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Westborough, Massachusetts
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    For future reference.
    ...and all tags must be closed.
    I assume that's why I'm now seeing <p> </p> closing tags for paragraphs.

    Thanks!
    "Living life in the fun lane!"

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes...

    For block level tags like P, DIV and H3, each tags must have a matched closing tag. For tags like IMG, BR and HR, you can "cheat" a little and use a shorthand. Essentially you open and close the tag in one fell swoop:

    <img src="someimage.jpg" />
    <hr width="50%" />
    <br />

    The space before the / is essential to prevent older browsers from choking.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •