ansaurus

Question

Tableless html alternative

Answer 1

A:

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

meder 2010-07-27 18:24:00

No its a form it has text inputs, checkboxes, the right column have textareas

Jose 2010-07-27 18:25:01

Can you show a detailed diagram?

meder 2010-07-27 18:25:19

Gut reaction is that would be a poorly laid out form. That said, there's no reason forms can't be considered tabular data. There's no wrong/right answer to this in this context. A table is likely OK, as would a CSS layout. But to truly answer the question, we'd need a lot more context...specifically the relation of the form elements to each other.

DA 2010-07-27 20:59:18

Answer 2

+5 A:

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.

Chris Simpson 2010-07-27 18:24:23

Answer 3

+1 A:

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.

Ned Batchelder 2010-07-27 18:25:40

I think you misunderstand the benefits of CSS. Css is not about offering more than one stylesheet for your site, its about making your code a) more efficient, b) easier to read, and c) easier to maintain. Tables are wonderful for displaying **tabular** data, but they are inefficient for styling and make basic site maintenance impossible.

Stargazer712 2010-07-27 18:29:34

I agree that CSS is better than tables for layout. Almost always. But very occasionally you need to create a layout that is easy to express as a table, and is a PITA to do in CSS, or requires you to add extra divs, etc. CSS layouts can also be difficult to maintain. I'm not arguing against CSS, I'm all for it. I just don't think a dogmatic "no tables for layout" attitude is best.

Ned Batchelder 2010-07-27 18:31:08

Yes, we often do offer multiple style sheets and do care about proper semantics (not to mention SEO and Accessibility)

DA 2010-07-27 20:58:05

@DA: it sounds like you definitely want to use CSS as much as absolutely possible.

Ned Batchelder 2010-07-27 21:10:00

Answer 4

+2 A:

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?

jjnguy 2010-07-27 18:26:16

Answer 5

+1 A:

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.

rob 2010-07-27 18:31:23

Answer 6

+3 A:

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!

Hristo 2010-07-27 18:38:02

Your clear class needs a couple things to be happy in every browser: especially overflow:hidden and font-size:0 in IE6/7

Bob Fincheimer 2010-07-28 12:35:54

oh. I didn't know that... thanks!

Hristo 2010-07-28 12:41:30

Answer 7

+1 A:

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.

Stargazer712 2010-07-27 18:48:57

Please use actual LABEL tags for your labels.

DA 2010-07-27 21:04:44

Answer 8

+2 A:

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

Edit: Image uploaded at image shack. I can't guarantee how long it'll be there.

Good luck!

Tarik 2010-07-27 20:51:46

The problem with this implementation is that the textareas on the right aren't positioned correctly as I asked. The only solution I've seen to remedy that is specifying actual pixel height and widths, which I don't believe is good practice. Thanks for your comment though.

Jose 2010-07-28 12:26:47

Unfortunately if you want every browser to look the same, explicity height and widths for form elements are inevitable. Inputs, textareas, selects, etc. are horribly difficult to get to look the same without some very explicity CSS

Bob Fincheimer 2010-07-28 12:37:25

Specifying heights and widths is good practice. It is always a positive thing to define shape and size for elements on your site, so user agent stylesheets never change something in differen browsers. Just to be clear, you are styling them through CSS. It is still presentation separated content, whereas using tables for that layout breaks it. Also, tables are MORE complex for this layout than practical, as you can see how clean, short, and semantic the code I provided was.

Tarik 2010-07-28 15:46:29

@Bob: I personally do not develop for older browsers, but if cross compatibility is a problem, there is no stopping him from making a div class for each row.

Tarik 2010-07-28 15:47:15

Answer 9

+1 A:

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.

DA 2010-07-27 21:00:52

To answer your question of relationship, yes the first row on the third column is related to the first two rows, as is the 2nd row on third column related to the last 3 rows.

Jose 2010-07-28 12:46:19

ansaurus

tags:

views:

answers:

Tableless html alternative

related questions