...

View Full Version : Revisiting tables...



Tristan Gray
08-16-2005, 04:24 PM
So I am being asked to spruce up a site but am not being allowed to use any CSS. Which is great because I haven't used tables in eons. I'm running into trouble. It is a very basic site and I'm just going to try to make the layout as follows:


+------------------+
| banner |
| |
+------------------+
| nav |
+------------------+
| content |
| |
| |
| |
+------------------+
| footer |
+------------------+

And here is where I am at:


<table width="100%" height="90%" border="1" align="center" valign="top">
<tr><td align="center">here</td></tr>
<tr><td align="center">is</td></tr>
<tr><td align="center">some</td></tr>
<tr><td align="center">data</td></tr>
</table>

Now I am unsure how to get each row to have an individual height unless I need to just lay tables on top of each other to do that. I can't remember if this is possible or not.

theexo51
08-16-2005, 04:37 PM
could u not use <tr height:'x'px> to set the rows to ur liking?

something as crude as this:


<table width="100%" height="90%" border="1" align="center" valign="top">
<tr style="height=20%"><td align="center">here</td></tr>
<tr style="height=10%"><td align="center">is</td></tr>
<tr style="height=50%"><td align="center">some</td></tr>
<tr style="height=10%"><td align="center">data</td></tr>
</table>

mcdougals4all
08-16-2005, 05:19 PM
something as crude as this

That works but the combined height of the rows still needs to equal 100%, even if the table itself is only 90% of its parent.

Tristan Gray
08-16-2005, 05:44 PM
Thanks, but that doesn't actually work. The content will make it look sort of like that anyway though.

Now my problem is that if I try to add more cells to the second row it messes up for some reason.

mcdougals4all
08-16-2005, 06:14 PM
There's no reason declaring the height of individual rows shouldn't work unless your content is forcing them taller.

At second glance though, the code theex051 posted won't work as is.


<tr style="height=20%"><td align="center">here</td></tr>

Should be:


<tr style="height:20%;"><td align="center">here</td></tr>


As for adding extra cells to a particular row, are you applying the correct colspan to the other rows?

Tristan Gray
08-16-2005, 06:28 PM
Yeah I believe so, I was testing it on another page and it worked fine then when I pasted it into a new document it broke. And yes, I was wondering why there were two equals signs instead of a colon.

I'll check the colspan and see if I've mucked something up there and then regroup if it still is not fixed. I hate designing with tables and it is only now clear that I always have.

Tristan Gray
08-16-2005, 06:41 PM
<table width="100%" height="100%" border="1" align="center">
<tr style="height:30%;">
<td align="center" colspan="7">img banner</td>
</tr>
<tr style="height:10%;">
<td>Home</td>
<td>About Us</td>
<td>Resources</td>
<td>FAQ's</td>
<td>Feedback</td>
<td>Links</td>
<td>Contact</td>
</tr>
<tr style="height:50%;">
<td align="center" colspan="7">Content</td>
</tr>
<tr style="height:10%;">
<td align="center" colspan="7">Copyright &copy2005 CREDA</td>
</tr>
</table>

That's what I've got so far and no luck. It is only the height of the 4 rows of text plus border and padding. Even though I declare height="100%" in the table tag it is not working.

]|V|[agnus
08-16-2005, 07:47 PM
Just because you're not using CSS for layout doesn't mean you should throw so many best practices out the window. Your latest code snippet should read more like the following.

Note: I am also going to add a nested table for your nav to eliminate the need to specify colspans. This could go either way, but the other changes I'll submit are better than inline styles.




<table id="shell">

<tr id="banner">
<td>img banner</td>
</tr>

<tr id="nav">
<td>
<table>
<tr>
<td>Home</td>
<td>About Us</td>
<td>Resources</td>
<td>FAQ's</td>
<td>Feedback</td>
<td>Links</td>
<td>Contact</td>
</tr>
</table>
</td>
</tr>

<tr id="content">
<td>Content</td>
</tr>

<tr id="footer">
<td>Copyright &copy2005 CREDA</td>
</tr>

</table>



Those id hooks should be all you need to style the shell as your inline styles previously described as well as any other styles you want to add using descendant selectors.

Just to clarify... you meant that you're not allowed to do a CSS layout, not that you're banned from using CSS period as your words implied, right? I assume so since your line styles are still CSS. Out of curiosity, what insane client is making these absurd demands of you?

Tristan Gray
08-16-2005, 08:21 PM
Ugh, internet here is choking. Took me ten minutes to load this page to reply. Thanks, and yeah basically this is the score. The place at which I am currently working I am leaving in hrm, eight days now. So the other guy who does website stuff in-house doesn't know or have interest in learning CSS. He uses some css stuff to style his tables but doesn't know it as such. So very minimal amounts of CSS that I figure he has been using without knowing it is ok but more or less for layout etc it is out of the question.

But yeah I'll add the ids in and from there on in it should be fairly simple. I just want to finish this because no doubt they will hire someone to redo everything I've done inside of a year anyway, but that is their prerogative. Thanks for the help fellas, I just can't wait til this is over and I can start working on my own site again. I've got the sweetest domain name ever to register but if I told you I'd have to kill you.

bazz
08-16-2005, 08:23 PM
Tristan I remember the days of tables but I dont think I applied the height to the <TR>. I put it with the <TD>.

That doesn't mean I was right but it might be worth a try?

Bazz

mrruben5
08-17-2005, 06:02 PM
Applying a height to a row makes much more sense to me. Applying height to a cell also works, yes, but try adjusting the height of a cell in excel without adjusting other cells also.

Tristan Gray
08-17-2005, 06:09 PM
Alright guys well here is the code I have thusfar... not too too bad, but for some reason I get a horizontal scroll in 800x600. Don't know why because my banner is 700px wide. I'm thinking it may have something to do with the table widths but I am unsure. Someone please let me know.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to the Cumberland Rural Volunteer Coalition Homepage
</title>
</head>
<body bgcolor="#423ab2" link="#dbdbfe" alink="#dbdbfe" vlink="#dbdbfe">
<table id="shell" width="90%" height="100%" align="center" border="1" cellspacing="0" cellpadding="1" bordercolor="#c5c5f7">

<tr id="banner" bgcolor="#9898ee">
<td align="center" colspan="3"><img src="banner.gif"/></td>
</tr>

<tr id="nav">
<td align="center" colspan="3">
<table cellspacing="0">
<tr align="left" bgcolor="#7679e0">
<td width="16%"><b><a href="#">Home</a></b></td>
<td width="16%"><b><a href="#">About Us</a></b></td>
<td width="16%"><b><a href="#">Resources</a></b></td>
<td width="16%"><b><a href="#">FAQ's</a></b></td>
<td width="16%"><b><a href="#">Feedback</a></b></td>
<td width="16%"><b><a href="#">Links</a></b></td>
<td width="16%"><b><a href="#">Contact</a></b></td>
</tr>
</table>
</td>
</tr>

<tr id="content" bgcolor="#c5c5f7">
<td><img src="invisside.gif"/></td>
<td align="left"> <img src="invisspace.gif"/>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis arcu sapien, ultrices at, sollicitudin id, tempor in, elit. Suspendisse condimentum mi. Sed accumsan, erat vitae rutrum eleifend, eros ipsum ullamcorper sem, nec scelerisque dui massa vitae pede. Etiam nibh. Mauris varius dapibus dolor. Sed eget ipsum. Duis at nulla. Suspendisse aliquet ultricies nunc. Cras sapien pede, elementum in, consequat eu, feugiat sed, neque. Ut wisi. Quisque suscipit, metus id ultrices suscipit, erat odio elementum mi, vel interdum sem urna vel leo. Donec a purus eget enim condimentum rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque suscipit est at wisi. Maecenas et urna. Cras nibh diam, mollis nec, suscipit et, laoreet sit amet, sem. Nam luctus, dui at rutrum consectetuer, lectus augue lobortis justo, at rutrum odio magna ac ipsum. In iaculis lorem eget magna.</p>
<p> Sed cursus, nibh non venenatis pulvinar, quam tellus rutrum mi, et porttitor urna nulla ut felis. Quisque sapien. Maecenas sit amet pede in libero vestibulum blandit. Nulla scelerisque nunc et dolor. Etiam facilisis rhoncus nibh. Integer magna metus, aliquam non, posuere quis, dapibus in, mauris. Quisque lobortis, urna sit amet ultricies egestas, mi risus hendrerit velit, sodales adipiscing libero magna in urna. Phasellus at orci. Nullam ultricies, sem eu molestie dignissim, lectus libero adipiscing massa, quis bibendum massa magna vitae ante. Suspendisse diam wisi, condimentum eu, feugiat nec, blandit eu, lectus. Nunc a mauris. Nullam ut neque. Pellentesque nisl sem, cursus nec, aliquam eget, nonummy lobortis, wisi. Aliquam varius dolor ac quam.</p>
<p> Nulla facilisi. Nam erat felis, mattis dapibus, sagittis sed, condimentum vitae, diam. Nam feugiat diam at massa. Ut eros eros, pharetra eu, lobortis non, pretium vitae, purus. Etiam feugiat lectus sit amet magna. Praesent luctus, magna nec feugiat consectetuer, augue nunc imperdiet tortor, posuere lacinia arcu lectus vel odio. Nunc aliquam, arcu ut dapibus congue, risus felis scelerisque ipsum, id egestas nulla lacus a nunc. Sed id tortor. Suspendisse potenti. Sed tempus.</p>
<p> Nam cursus neque vel felis. Curabitur id turpis. Aenean sem dui, tristique eu, iaculis eget, volutpat non, purus. Cras sed dui. Donec lacinia arcu sed velit. Aenean laoreet nunc et lorem. Phasellus euismod, lectus nec suscipit rutrum, sapien metus tincidunt tortor, vitae interdum lacus mauris ac elit. Nullam iaculis, magna vitae varius pellentesque, ligula nunc malesuada quam, in pretium dolor urna cursus ligula. Integer facilisis. Vivamus ultricies magna sed quam. Nulla sit amet mi vel ligula adipiscing tincidunt. Duis id lacus. Duis porta, odio non bibendum accumsan, augue purus dapibus tellus, vel ornare erat wisi eu urna. Donec odio. Morbi vulputate. Donec laoreet nunc at sapien. Vivamus dui. Curabitur urna. Quisque ultrices.</p>
<p> Aliquam velit libero, hendrerit vitae, interdum in, tempor quis, nulla. In sem lectus, sollicitudin eu, imperdiet eu, molestie pulvinar, arcu. Aenean justo orci, vestibulum eget, dapibus non, scelerisque at, magna. Donec facilisis dictum arcu. Aliquam bibendum aliquam justo. Quisque vel sapien quis lacus placerat tincidunt. Integer sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam laoreet vestibulum velit. Duis ac dui at lorem laoreet molestie. Phasellus dictum vulputate elit. Proin eu eros. Vivamus cursus euismod sapien. Nam tortor. Nullam at dui et turpis scelerisque ultricies. Vivamus tellus. Mauris leo odio, tincidunt sed, varius in, consectetuer vitae, pede. Mauris diam risus, molestie ac, elementum et, scelerisque ac, wisi. Aliquam urna. Aliquam neque.</p>
</td>
<td><img src="invisside.gif"/></td>
</tr>

<tr id="footer" bgcolor="#9898ee">
<td align="center" colspan="3">Copyright &copy2005 CREDA</td>
</tr>

</table>
</body>
</html>

God, tables look ugly after CSS.

]|V|[agnus
08-17-2005, 07:20 PM
You took my advice (and code), but you apparently learned nothing form it since the code you've added since contains inline styles, not to mention unspeakable attributes like "bgcolor!"

DESCENDANT SELECTORS, man!

:confused:

Tristan Gray
08-17-2005, 07:36 PM
Yeah, Aaron (the no CSS guy) said he doesn't want me to do anything other than use bgcolor etc. I kept your code, at least the nested table, because it made it look cooler when I added 1px of spacing because a little bit of the background showed through creating a fake individual border around the nav table. Anyway, don't worry about it, from a coding perspective this site is going to be ugly as hell... and from an artistic perspective... pretty ugly. That isn't really my concern, I just need it functional and right now it has a horizontal scrollbar. Anyone able to guess why? :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum