Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Revisiting tables...

    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:

    Code:
    +------------------+
    | banner           |
    |                  |
    +------------------+
    |  nav             |
    +------------------+
    | content          |
    |                  |
    |                  |
    |                  |
    +------------------+
    | footer           |
    +------------------+
    And here is where I am at:

    Code:
    <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.
    Once I thought I was wrong but I was mistaken.

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Guildford, UK
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    could u not use <tr height:'x'px> to set the rows to ur liking?

    something as crude as this:

    PHP Code:
    <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
    Last edited by theexo51; 08-16-2005 at 05:50 PM.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by theexo51
    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.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Tristan Gray; 08-16-2005 at 06:51 PM.
    Once I thought I was wrong but I was mistaken.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <tr style="height=20%"><td align="center">here</td></tr>
    Should be:
    Code:
    <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?
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <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.
    Once I thought I was wrong but I was mistaken.

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

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

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    CATdude about IE6: "All your box-model are belong to us"

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <!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.
    Once I thought I was wrong but I was mistaken.

  • #13
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  • #14
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Once I thought I was wrong but I was mistaken.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •