SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict avstu's Avatar
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Table Help!

    This is my coding for a HTML table..

    <table width="100%" border="0">
    <tr>
    <td width="20%"><center><img src="image.jpg" width="190" height="130" /></center></td>
    <td valign="top" width="80%" cellpadding="10"><p>TITLE</p>
    <p>Text here</p></td>
    </tr>
    </table>

    However, the text on the side wont align to the top... Can anyone explain to me why this is?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that the cellpadding attribute only applies to the table tag, so maybe your browser doesn't like it being applied to the TD. I tried it on a couple of browsers (Chrome, FF) and the text does align to the top.

    Generally you don't want to use tables for content, though. You might try doing something like this instead:

    Code:
    <div class="content">
      <img src="http://placehold.it/190x130" width="190" height="130" alt="My Image" />
      <h2>Title</h2>
      <p>Text here.</p>
    </div>
    Then, in an external style sheet use a bit of formatting to make the image stay there on the left:

    Code:
    .content img {
      float: left; /* Lets the text naturally wrap around the image */
      padding-right: 10px;
      padding-bottom: 10px;
    }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're coding in the old days my friend. Why are you coding using a table? Granted it's ok if you are displaying tabular data, but you are using valign attribute, along with <center>. Old stuff...

    The margins/paddings probably just need to be removed from the <td>
    You could add margin="0" padding="0" to the <td> but honestly I think your code needs to be rethought .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    What the other said, lose the table altogether for layout.

    But, the reason is that the content in <td>'s has vertical-align: middle by default.
    td { vertical-align: top } is what you're looking for.

  5. #5
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    131
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    DIVS

    go...now!
    Michael John Froseth

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Tables should'n't be thrown away altogether. We don't have enough information about what will be in the table, to say that divs should be used.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    What the other said, lose the table altogether for layout.

    But, the reason is that the content in <td>'s has vertical-align: middle by default.
    td { vertical-align: top } is what you're looking for.
    Everything they said but also, if you're going to use tables this here is a better option than trying to work VALIGN. Pretty sure that's actually deprecated code too(like <center> which can be replaced with text-align:center; in CSS)

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Belsnickle View Post
    Everything they said but also, if you're going to use tables this here is a better option than trying to work VALIGN. Pretty sure that's actually deprecated code too(like <center> which can be replaced with text-align:center; in CSS)
    Vertical-align:; exists in CSS as well but text-align will only move the content horizontally. Vertical align mimics valign (valign=vertical align) and thus that's the appropriate CSS property to use instead of the attribute valign.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am aware, that's why I was reaffirming that and telling him to go the same way with <center> converting it to text-align:center; in his CSS. I figure if he's going to be advised to update his code he might as well be told all the ways to do it properly.

    The this here was referring to the quote not the following bit which I probably should have newlined and had the quote after my first comment.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the use of the center tag and border attribute definitely make this look like decade out of date coding methodologies -- but it's quite correct that without seeing actual content it's hard to weigh in... it's quite correct that cellpadding goes on table, not TD... but without seeing the image, actual content for the page, etc... it's hard for us to weigh in with anything more than a wild guess.

    That said, I've got the feeling the image probably shouldn't even be in the markup, and as Raw10 implied it should be a heading tag and a paragraph, with no table... either that or if it IS tabular data, the first TD being rowspan="2", the 'centered' part being a TH on the same row, and then another TD all by itself in a row.

    But again, without seeing the real content, we're throwing darts at the board blindfolded.

  11. #11
    SitePoint Member emoviefreak's Avatar
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May be because table is in a td which is not top align put a border in the table you will better understand it.

  12. #12
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh dear.. tables content x.x

    Tables are great for static things like Forms or actual tabular data, but please for the love of the internet do NOT place your general content in them!


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
  •