How can I use this table design with valid markup?

I want to keep the tables but use css to achieve the same positioning result with a strict doctype. This is the design that does exactly what I need.

Notice the <br> tags in the last (bottom) <td> cell. As this area grows, the position of the data within two other <td> cells above it do not change position.

<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
  <tr>
    <td valign="top"开发者_如何学编程>
      <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr>
          <td valign="top">ds</td> <----- The position here is important
        </tr>
        <tr>
          <td valign="bottom">ds</td> <----- The position here is important
        </tr>
      </table>
    </td>
    <td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
  </tr>
</table>

---

I made an example for you here to show you how easy it is to duplicate that table with Divs and CSS:

HTML:

<div id="main-div-wrap">
                <div class="left-content">
                <span class="top">ds</span>
                <span class="bottom">ds</span>
                </div>
                <div class="right-content">
                    ada adf ad
                </div>
</div>

CSS:

#main-div-wrap
{
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid #000;
}

.left-content
{
    width: 18%;
    float: left;
    height: 100%;
}

.right-content
{
    margin-left; 18%;
    width: auto;
    float: left;
    height: 100%;
    border-left: 1px solid #000;
}

.top 
{
    position: absolute;
    display: block;
    top: 0;
}

.bottom 
{
    position: absolute;
    display: block;
    bottom: 0;
}

All semantic, no hacks, will validate and if you need to change it for browsers, theres more than enough tools out there to help you.

---

I'm not sure what you mean with "keep the tables for the structure", but I guess you what something like this, however if the content is too short, then the "top" and "bottom" texts will overlap.

http://jsfiddle.net/HsmKA/

---

Variant with CSS styled tables:

http://jsfiddle.net/JmQ55/

---

You can find all you want here.

---

Coming from a tables word myself I've always found the DIV layout a pain in the a$$. Check out blue print css its a very easy to use CSS framework. Might sort you out