messed up table, my tables height attribute wont work! Options

[Derlin]

Hey, I'm trying to make a table that is basically two columns, on the left side there is a header data cell and then a content data cell. On the right side, there are 2 headers and 2 content data cells. The headers are data cells, <td>, i just call them headers since they tell whats in the content cells.

My problem is that in the 3rd data cell on the right, it is the second header cell of the right, I can't set its height to an absolute value. i used rowspan="3" on the content cell on the left, but whenever that cell gets stretched out too much by too much content, then the 2nd, 3rd and 4th data cells on the right start to enlarge by equal amounts. as far as i can tell, they are trying to equally share out the new space given to them by the enlarged content cell on the left. Is there a way to set it so that the 3rd data cell stay a certain height?

I've tried using the height attribute on both the td and the tr, but ot no avail. I used css on the td and it didnt work. The table is contained in a div that has css liek so....

#the-rest {
width:760px;
margin: 1em 1em 1em 0em;
}

would that do anything to the table?

Tanks for any help given

[SteveL]

Hey, I'm trying to make a table that is basically two columns, on the left side there is a header data cell and then a content data cell. On the right side, there are 2 headers and 2 content data cells. The headers are data cells, <td>, i just call them headers since they tell whats in the content cells.

My problem is that in the 3rd data cell on the right, it is the second header cell of the right, I can't set its height to an absolute value. i used rowspan="3" on the content cell on the left, but whenever that cell gets stretched out too much by too much content, then the 2nd, 3rd and 4th data cells on the right start to enlarge by equal amounts. as far as i can tell, they are trying to equally share out the new space given to them by the enlarged content cell on the left. Is there a way to set it so that the 3rd data cell stay a certain height?

I've tried using the height attribute on both the td and the tr, but ot no avail. I used css on the td and it didnt work. The table is contained in a div that has css liek so....

#the-rest {
width:760px;
margin: 1em 1em 1em 0em;
}

would that do anything to the table?

Tanks for any help given

It would be about a million times more helpful if you could post the code along with your description . My recommendation...if possible, forget the table, and format with CSS

[Derlin]

Ok, thanks for the suggestions,

heres the table code...


<table align="center" bordercolor="black" border="2" cellspacing="0">
<col width="380">
<col width="380">
<tr>
<td class="bottomtd"><p class="bottomh"><u>Dartmouth Daily News</u></p></td>
<td class="bottomtd"><p class="bottomh"><u>DUJS Podcasts</u></p></td>
</tr>
<tr>
<td class="black" valign="top" rowspan="3">
<a href="???.html">Dartmouth's alternative breast imaging techniques sort abnormal from normal tissue</a>(DMS and Thayer)<br><br>
<a href="???.html">Questions raised on folic research</a> (DMS)<br><br>
<a href="???.html">Parasites Can Change a Host's Environment</a> (Dept. of Biology)
<i class="newscaption">First author is Chelsea Wood '06, Editor-in-Chief Emeritus of the DUJS</i><br><br>
<a href="???.html">The Milk of Human Unkindness</a> (DMS)<br><br>
<a href="???.html">Studies Underscore Impact of Movies in Influencing Teens to Smoke</a> (DMS)<br><br>
</td>
<td id="podtd" valign="top" >
<img src="pics/podcast.jpg" class="pod">
<p class="headtextb"><u>Are Finally Here!</u></p>
<p class="subtextb">Listen to Our stories and let us wow you with, you guessed it, more filler! But seriously, this would actually have something in it, right?</p>
<p align="right"><a href="podcasts.html">To Podcasts</a>

</td>
</tr>
<tr>
<td class="bottomtd"><p class="bottomh"><u>More Stuff</u><p></td>
</tr>
<tr>
<td><br><br></td>
</tr>
</table>




and heres the css that goes with it.

.pod {
margin:0em 0.75em 0em 0em;
}
.bottomh {
margin: 0.5em 0.75em 0.5em 0.75em;
font-family: verdana, sans serif;
font-size: 1em;
color:white;
border-style:solid;
border-width:0.07em;
padding: 0.3em 0.3em 0.3em 0.3em;
}
.bottomtd {
background-color:#488214;
}
#podtd {
padding:0.75em 0.75em 0.75em 0.75em;
}
.headtextb {
font-family: verdana, sans serif;
font-size: 1em;
color:black;
align:center;
}
.subtextb {
font-family: verdana, sans serif;
font-size: 0.75em;
color:black;
margin:0em 0em 0em 0em;
}
.black {
font-family: verdana, sans serif;
font-size: 0.8em;
color:black;
padding:1em 0.75em 0.75em 0.75em;
}




I kno, its a bit messy. I havent had time to really clean it up much. I've been trying to figure out all these other little problems. So, theres the code.
You should be able to tell that the prolem is with the "more info" box and how it is a bit larger than i'd like it to be.

and what do you mean by formatting it only using css? I didnt know you coudl make a table with css. Or at least, in my imagination it woudl be really convoluted with a bunch of border declarations and stuff. Do you know a site that may help with what your talking about with css formatting of a table?

[SteveL]

Actually, what I said was "Drop the table and use CSS" . What I meant by that is that for the layout you're after, you don't really need tables at all, and not using them will give you the flexibility to size each of your three "content cells" independently of each other. I threw together a really rough "prototype" version of your layout using no tables...If you look at the code, you'll see that it involves no tables, and each content cell can be individually sized using CSS:

CODE

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style>

.pod {
margin:0em 0.75em 0em 0em;
}
.bottomh {
margin: 0.5em 0.75em 0.5em 0.75em;
font-family: verdana, sans serif;
font-size: 1em;
color:white;
border-style:solid;
border-width:0.07em;
padding: 0.3em 0.3em 0.3em 0.3em;
}
.bottomtd {
background-color:#488214;
}
#podtd {
padding:0.75em 0.75em 0.75em 0.75em;
}
.headtextb {
font-family: verdana, sans serif;
font-size: 1em;
color:black;
align:center;
}
.subtextb {
font-family: verdana, sans serif;
font-size: 0.75em;
color:black;
margin:0em 0em 0em 0em;
}
.black {
font-family: verdana, sans serif;
font-size: 0.8em;
color:black;
padding:1em 0.75em 0.75em 0.75em;
}


#left_content

{

float:left;
height:300px;
width:400px;
border:solid;

}


#right_top

{

float:left;
clear:right;
width:200px;
height:100px;
border:solid;



}


#right_bottom

{
float:left;;
height:100px;
width:200px;
border:solid;




}


</style>




</head>

<body>

<div style="width:618px;">


<div id="left_content">
<span class="bottomtd"><div class="bottomh"><u>Dartmouth Daily News</u></div></span>
<span class="black">
<a href="???.html">Dartmouth's alternative breast imaging techniques sort abnormal from normal tissue</a>(DMS and Thayer)<br><br>
<a href="???.html">Questions raised on folic research</a> (DMS)<br><br>
<a href="???.html">Parasites Can Change a Host's Environment</a> (Dept. of Biology)
<i class="newscaption">First author is Chelsea Wood '06, Editor-in-Chief Emeritus of the DUJS</i><br><br>
<a href="???.html">The Milk of Human Unkindness</a> (DMS)<br><br>
<a href="???.html">Studies Underscore Impact of Movies in Influencing Teens to Smoke</a> (DMS)<br><br>
</span>
</div>


<div id="right_top">

<img src="pics/podcast.jpg" class="pod">
<p class="headtextb"><u>Are Finally Here!</u></p>
<p class="subtextb">Listen to Our stories and let us wow you with, you guessed it, more filler! But seriously, this would actually have something in it, right?</p>
<p align="right"><a href="podcasts.html">To Podcasts</a>

</div>


<div id="right_bottom">More Stuff Here</div>



</div>



</body>
</html>

[Frederiek]

I don't know if the post above mine here is supposed to be a question or not. Mods?
[I removed the post. Please use the "Report" button to alert moderators. / Christian J]

Derlin, I haven't yet understood what you're after. The url of a sample page demonstrating the problem is easier for us to help you.
For a lay-out in CSS, without tables, go see at Web Design References: CSS and find yourself a 2 column's lay-out.

[Derlin]

Hey guys, thanks for all the advice and help...except for the guy above frederick, I'm not sure what he was saying. But umm, sorry for replying so late, but I was at a soccer tournament. Fun! 'Cept we lost 2 and tied the others. Anyways, the problem, hehe, was that I forgot to close off a paragraph correctly. It went somethign like <p>some text<p> when it obviously should have been <p>some text</p>.

Thanks for still replying weven though I wasn't really active.

And yes, I have looked into the css formatting stuff and I've used it for some other tables and yes, it is easier/cleaner/nicer. But, my table now works fine, so maybe my next table will incorporate more css.

Thx again!

[Frederiek]

Just ignore yesterday's post above mine.

Such errors, of non closed tags, can easily be found with a validator.

Tables are no longer good for layout (see the articles at Web Design References: CSS > Tables (layout)). We have CSS for that. But if you have tabular data, then a table would be appropriate to use.