HTML Table Help!

[avstu]

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?

[raw10]

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:

<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:

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

[RyanReese]

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 .

[markbrown4]

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.

[mike.fro]

DIVS

go...now!

[RyanReese]

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.

[Belsnickle]

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)

[RyanReese]

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.

[Belsnickle]

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.

[deathshadow60]

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.

[emoviefreak]

May be because table is in a td which is not top align put a border in the table you will better understand it.

[behati]

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!