Sign in to follow this  
CuppoJava

[web] Simple HTML Table Layout

Recommended Posts

Hi, I'm having troubles getting a really basic site layout going. And I'm wondering if you guys could help me out a bit. I have a 2x1 table nested inside of a 1x1 table. The 1x1 table is of width=600, and height=600. I would like this to stay fixed. The 2x1 table contains an image in the first row (of unknown dimensions), and text in the second row. I would like for the second row of the nested table to expand to fill the rest of the available space. I don't know how to do this. Currently I'm using height=100%, and this works fine in Firefox. But it doesn't seem to work in IE. Can someone give me a hand? Thanks a lot. Here's a link to the code: http://members.shaw.ca/Li_Variation/Temp.html You'll notice that the page is much longer when viewed in IE than when viewed in Firefox.

Share this post


Link to post
Share on other sites
Well, first of all, you are specifying a height/width of '600' or a height of '100'. You are not saying a height or width of what. If you mean pixels, you should put in 600px or 100px. This probably isn't the issue though.

Next, I'm uncertain exactly what it is you're trying to accomplish with your code.

I don't understand why you have the nested table, for starters. Really, I don't understand why you're using tables at all - divs would be better suited for this task, but I understand you're new to HTML and tables are a bit easier to get working at first.

Anyway, this is how I would do it with tables (if I'm correct in what you're looking at doing).


<table style="width: 600px; height: 600px;" border="1px" cellspacing="0" cellpadding="0">

<tr><td style="height: auto;">[IMAGE OF UNKNOWN DIMENSIONS]</td></tr>
<tr valign="top"><td style="height: 100%;">TEXT</td></tr>

</table>





The first row should automatically expand to hold the image, provided it's not larger than 600 pixels of course. Oh, and incidentally, if you wish to use divs rather than tables here is the code:


<div style="width: 600px; height: 600px; border: 1px solid;">
<div style="border: 1px solid;">[IMAGE OF UNKNOWN DIMENSIONS]</div>
<div>TEXT</div>
</div>





[edited]Sorry, corrected some of the border stuff.

[Edited by - CaspianB on May 8, 2008 9:47:41 PM]

Share this post


Link to post
Share on other sites
Tables are often the easiest, most reliable way to make things actually work, especially if you use CSS to modify the table. Who cares if DIVs are the "right" way to do it, web-design is all about working solutions, not elegant ones... as anyone who's done a lot of AJAX can know.
I worked at a well-renowned company doing this stuff; presentation was one aspect we were recognised at being good at - and we used tables more than DIVs.

Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
Tables are often the easiest, most reliable way to make things actually work, especially if you use CSS to modify the table. Who cares if DIVs are the "right" way to do it, web-design is all about working solutions, not elegant ones... as anyone who's done a lot of AJAX can know.
I worked at a well-renowned company doing this stuff; presentation was one aspect we were recognised at being good at - and we used tables more than DIVs.


You got a point. I've been struggling with div tags which are not supported well across browsers. Who said tables can't be customized.

Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
Tables are often the easiest, most reliable way to make things actually work, especially if you use CSS to modify the table. Who cares if DIVs are the "right" way to do it, web-design is all about working solutions, not elegant ones... as anyone who's done a lot of AJAX can know.
I worked at a well-renowned company doing this stuff; presentation was one aspect we were recognised at being good at - and we used tables more than DIVs.

Sure, but why not strive for solutions that are both elegant and work? It's not that hard to get a simple layout right, it just requires some experience.

Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
Tables are often the easiest, most reliable way to make things actually work, especially if you use CSS to modify the table. Who cares if DIVs are the "right" way to do it, web-design is all about working solutions, not elegant ones... as anyone who's done a lot of AJAX can know.
I worked at a well-renowned company doing this stuff; presentation was one aspect we were recognised at being good at - and we used tables more than DIVs.

This is ridiculous. There are many benefits to using semantic markup to build your data alongside your presentation. One benefit is your markup does not dictate what your page looks like. It's not the markup's purpose.

Web standards are in. Update your mentality.

Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
Tables are often the easiest, most reliable way to make things actually work, especially if you use CSS to modify the table. Who cares if DIVs are the "right" way to do it, web-design is all about working solutions, not elegant ones... as anyone who's done a lot of AJAX can know.
I worked at a well-renowned company doing this stuff; presentation was one aspect we were recognised at being good at - and we used tables more than DIVs.


Well its too bad no one at your well renowned company realized that the 'argument' (which I think only exists between those who are clueless) of tables vs. divs is not a question about presentation. The reason you use divs are because they are semantically correct. You are right though, web-design is about working solutions: A site based on tables for structuring would definitely not work on anything but a desktop browser. The web was designed for many different devices with varying display capabilities - which is why we separate data/html from presentation/css in the first place.

Also, 'divs' aren't the answer to everything. If the item in question is a header, use a header tag! If it's a list, use a list! Too many times, I've seen people do this:


<div id="footer">footer text</div>

or

<div id="site-title">Title.</div>

or even

<div id="navigation">
<div class="navigation item"><a href="#">stuff here</a></div>
<div class="navigation item"><a href="#">stuff here</a></div>
<div class="navigation item"><a href="#">stuff here</a></div>
</div>






Even Gamedev.net does it in more than a few places, but I have faith that will be corrected this summer during the revamp.

Wrap the footer in a < p> tag and the title in a < h1> tag and style using css. It will degrade very gracefully on browsers that don't support what traditional PC ones do. More and more devices accessing the web are not desktops and laptops. Maxamor is absolutely right, we need to update our mentalities.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this