Tableless html alternative - html

Question

Can someone show me some html to layout the following not using tables?
______________________________________
|_______|_____________| |
|_______|_____________|_______________|
|_______|_____________| |
|_______|_____________| |
|_______|_____________|_______________|
The third column needs to span the first two "rows" and then span the next three "rows"
The first "column" needs to have the same width
I ask this because of the whole "Tables are dead for layout" argument
UPDATE:
the content of the markup has checkboxes, textboxes, and textareas
CONCLUSION:
This has been very enlightening. I believe I have been cleared up with this philosophical question.
It seems to me that the general rule should be: Don't use tables for your entire website, if there are sections that look like a table, then use a table. Extremes of "NEVER USE A TABLE" seems impractical and theoretical. Likewise, excessive use of tables makes maintenance difficult, and dealing with 4-deep nested tables can be a real pain.
So because the layout above "looks like a table" I'm going to use a table. :)

Answer 1

I completely agree with not using tables for laying out your page. However the diagram above actually looks like a table so you might want to use one.

Answer 2

I think for your purpose you should use a table, but since you don't want that... here's something I made quickly using only <div>s: http://jsfiddle.net/HEfTE/1/
You didn't mention how and where the checkboxes, textboxes, and textareas will be used, so I'm not sure how to incorporate them in my example. But if you post some more information, it won't be difficult to add them in there.
Hope that helps!

Answer 3

Even if the content isn't tabular, use a table if you need to. Most of the arguments against using a table for layout are purely theoretical (are you really planning on offering more than one stylesheet for your site, for example? Do you care how your form appears semantically?) Sometimes, especially in the larger layout issues for a site, tables work much better than CSS.
Use what works.
Tables were often abused for layout, and most of them can be scrapped in favor of a simpler CSS layout. but occasionally, tables are the better tool.

Answer 4

These components seem to form a table...so, I'd use a table.
The following is not a table, so don't use a table to lay that out. (Use <div> instead obviously)
--------------------------------
| |
| |
|------------------------------|
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
--------------------------------
Do you see the difference between your example and mine?

Answer 5

There's not enough information to answer your question. Like Pekka said, is it a table or not?
Is it a form? I'm assuming so, if it has textboxes, textareas, etc. If it's a form, you could use a container for the two left columns and one for the right.
<style type="text/css">
div#formLeft {
float: left;
}
textarea {
display: block;
}
</style>
<div id="formLeft">
<label>Form Field 1</label><input type="text" /><br />
<label>Form Field 2</label><input type="text" /><br />
<label>Form Field 3</label><input type="text" /><br />
<label>Form Field 4</label><input type="text" /><br />
<label>Form Field 5</label><input type="text" /><br />
</div>
<div id="formRight">
<textarea></textarea>
<textarea></textarea>
</div>
Now, obviously there is a lot more need to be done, but this the bare bones.
Recommendations? Style label with a fixed width to keep it looking tabular. Of course adjust the heights and everything to make it fit. Since the boxes on the right, which I assume are textareas, just give them IDs and heights.
I took a screenshot to help visualize my code without actually entering it in. This is how I assume your layout is, but of course you can easily add other columns. Just make the formLeft ID turn into a class and throw in another!
alt text http://img94.imageshack.us/img94/5341/testbp.gif
Edit: Image uploaded at image shack. I can't guarantee how long it'll be there.
Good luck!

Answer 6

You can do it with DIV's with careful use of float: right, float: left, and clear: both.
I agree with you that what you describe is not tabular, and using DIV's may have advantages, such as they may be able to flow better when viewed, say, on a mobile device (especially if you give them a different stylesheet).
However, I should say that using DIV's for stuff like this is a great big pain, and I usually use tables for it because it is so easy and they do a lot better job of sizing the columns and such to fit the content.

Answer 7

I'd do it similar to this (in the absence of any details, I threw in some sample elements):
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
#form {
width: 400px;
margin: 10px;
}
#textareas {
width: 145px;
float: right;
}
#textareas textarea {
width: 145px;
margin-bottom: 3px;
}
#textareas #textarea1 {
height: 43px;
}
#textareas #textarea2 {
height: 66px;
}
.forminput {
height: 23px;
width: 250px;
}
.forminput span {
display: block;
float: left;
width: 75px;
}
.forminput input {
width: 175px;
}
</style>
</head>
<body>
<div id="form">
<div id="textareas">
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
</div>
<div class="forminput">
<span>Label 1</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 2</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 3</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 4</span>
<input type="text" />
</div>
<div class="forminput">
<span>Label 5</span>
<input type="text" />
</div>
</div>
</body>
</html>
You can always do it without a table.

Answer 8

Forms can be considered tabular data. Not everyone agrees on that, but enough do that I'd call it a 50/50 decision. Flip a coin in this case.
My bigger concern is that a form with multiple columns and multiple rows and fields spanning multiple rows begins to sound like a poorly laid out form design to me. It may make perfect sense in this case, but without more context, it's really hard to say what's best here.
If there are direct relationships between the form elements in each row/column, knowing that may help us answer the question for you.

Answer 9

What is the content? Tabular data? If so use a table.