Can't get valign to work

Hi all. I’ve been posting in CSS, but I don’t know if I’ve posted here yet. I’m self-studying HTML, XHTML, CSS and JavaScript. I’m working my way through a book, and I’m on alignment.

The book says you can vertically align cells with the valign command with either the <tr> or <td> elements. I have tried it, but I can’t seem to get it to work. No matter how I do it, the content is always centered.

The code is pasted below. I have tried putting valign in the <tr> element. I have tried putting the valign before and after the align attribute. I think I tried one or two other things, but I can’t remember them. I’m hoping someone can help me.

Please note that this is an academic exercise. I am aware that valign is going away. I’m also aware that workarounds exist. But I’m trying to learn to apply the concept so I can use it if it’s ever necessary.

Thanks!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<title>Tables</title>
<meta http-equiv=“Content-Type” content=“text/html;
charset=UTF-8” />

</head>

<body>
<table border=“2” width=“630” align=“center” cellpadding=“50”>
<tr>
<td colspan=“2” width=“630” valign=“top” align=“center”> contents </td>
</tr>
<tr>
<td width=“200” align=“center” valign=“bottom”> contents </td>
<td width=“230” align=“center”> contents </td>
</tr>
</table>
</body>

</html>

I gave the answer to the “sister question”; http://www.sitepoint.com/forums/showthread.php?t=678527 just in case anyone gets confused. :slight_smile:

Those two ways equate to 20th century way that it used to be done before browsers supported CSS using HTML, and valign and modern 21st century way using CSS.

valign was flagged as obsolete in HTML4/XHTML1 when it came out in 1999.

No, you use the height property. Try this test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />

  <title>Test Page</title>
  <style type="text/css">
/*<![CDATA[*/

  caption {
    margin-top: 1em;
    }

  table, td {
    border: 1px solid black;
    }

  .control {
    height: 200px;
    }

  #top {
    vertical-align: top;
    }

  #mid {
    vertical-align: middle;
    }

  #bot {
    vertical-align: bottom;
    }

  /*]]>*/
  </style>
</head>

<body>
  <table summary="testing the css vertical alignment">
    <caption>
      Using vertical-align
    </caption>

    <tr>
      <td class="control">A tall cell just to get things started.
      <br />
      The default alignment is middle.</td>

      <td id="top">top</td>

      <td id="mid">middle</td>

      <td id="bot">bottom</td>
    </tr>
  </table>

  <table summary="testing the attribute valign">
    <caption>
      Using valign
    </caption>

    <tr>
      <td class="control">A tall cell just to get things started.
      <br />
      The default alignment is middle.</td>

      <td valign="top">top</td>

      <td valign="middle">middle</td>

      <td valign="bottom">bottom</td>
    </tr>
  </table>
</body>
</html>

Remember that every cell in a row is the same height as the tallest cell in that row. Likewise, every cell in a column is the same width as the widest cell in that column.

cheers,

gary

Sorry about that, but I didn’t really see it as the same question. The book showed two ways to do it - the (X)HTML way with valign, and the CSS way with vertical-align. I posted the first question in the HTML forum when I couldn’t get it to work. Then when I couldn’t get the CSS way to work, I posted in there because I figured the problem and/or solution was different than the problem/solution for the HTML way.

But I understand now. I misunderstood what vertical alignment was all about. I thought that if you had a big cell with, say, one word in it, vertical alignment would place it at the top or the bottom of the box, even if there was no cell or an empty cell next to it. But vertical alignment aligns relative to content in another cell. Plus, you would only have a big cell with padding, and the padding is kind of like a cushion surrounding the content, so you can’t place content in the padding area.

So now I’m curious. Say I wanted to have a big cell with content appearing against the top wall of the cell. Would I just use line breaks to achieve that?

Thanks again everyone!

Not true for table elements. See §11.3.2 Horizontal and vertical alignment.

cheers,

gary

hmmm… looks like what you have is working for me…? if you only have one line of text ‘contents’ all td’s are going to have text on the same line. The vertical-align only comes into play if say celltwo has 100 lines of text and cellthree only has 1. in that case both two and three would be aligned to the bottom of the cell.

Also, maybe worth noting, maybe this is where you’re having problems. You have a td padding:50px; your vertical alignment will happen AFTER this padding is applied

Yeah, I was being to think I was Hallucinating… seeing it twice. Although the question was really asking for the; “HTML verses CSS” solution of how to vertically align text within a table. :lol:

Hi all. Me again! Now I’m stuck on vertical-align. According to my book, you can use it with the <td> and <tr> elements. But no matter how I try, I can’t get it to work. I want to have the content of the cells align to the top or bottom, depending on the cell, but it always centers regardless of where I put the commands. The code is below. Can anyone help me?

I do know that there are other ways to get the same effect. But this is an academic exercise. I’m trying to learn to apply the concept so I can use it if it’s ever necessary.

Thanks!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<title>Tables</title>
<style type=“text/css”>
table,td {border-width: thin; border-style: solid;
border-color: navy; width: 630px;}
td {padding: 50px;}
td.cellone {width: 630px; text-align: center; vertical-align: top;}
td.celltwo {width: 400px; text-align: center; vertical-align: bottom;}
td.cellthree {width: 320px; text-align: center; vertical-align: bottom;}
</style>
</head>

<body>
<table>
<tr>
<td class=“cellone” colspan=“2”> contents </td>
</tr>
<tr>
<td class=“celltwo”> contents </td>
<td class=“cellthree”> contents </td>
</tr>
</table>
</body>

</html>

Did anything change when you removed the “align” parts?

I got into this game too late to use valign (though I do use vertical-align at times, but I’m not sure that it follows the same rules as valign did), but it’s the first thing I’d try if that code above wasn’t working.

Thanks Robert - threads merged :slight_smile:

@Dtarvin - Please don’t ask the same (or very similar) questions in different forums as it is very confusing. If you think the question is in the wrong forum or you want the thread moved to an appropriate forum then just ask an advisor to move it:)

To qualify what rustybuddy just said you can add more content to one cell and you will see that it is actually aligning to the bottom of the cell (apart from the 50px bottom padding of course).


<table>
    <tr>
        <td class="cellone" colspan="2"> contents </td>
    </tr>
    <tr>
        <td class="celltwo"> contents </td>
        <td class="cellthree"><p> contents</p>
            <p>contents</p>
            <p>contents</p>
            <p>contents</p>
            <p>contents</p>
            <p>contents</p></td>
    </tr>
</table>


You are over-complicating things; you should always use a very simple example, it was working but you “complicated” it with “cell padding”:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=UTF-8" />
    <title>
      Tables
    </title>
  </head>
  <body>
    <table border="2" width="630" align="center">
      <tr>
        <td colspan="2" width="630" valign="top" align="center"
        height="100">
          contents
        </td>
      </tr>
      <tr>
        <td width="200" align="center" valign="bottom" height=
        "100">
          contents
        </td>
        <td width="230" align="center" height="100">
          contents
        </td>
      </tr>
    </table>
  </body>
</html>

As you can see it works perfectly even though obviously it’s a frowned upon technique and it’s a job for CSS not (x)html.