Table layout without tables in IE7

Question

I want to do a simple form layout, labels and inputs, without tables. It works fine like this:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        form {
            display: table;
        }

        form>div {
            display: table-row;
        }

        form>div>* {
            display: table-cell;
        }
    </style>
</head>
<body>
    <form>
        <div>
            <label>Hello</label>
            <input type="text"/>
        </div>
        <div>
            <label>World</label>
            <input type="text"/>
        </div>
    </form>
</body>
</html>

However, it doesn't work in IE7. What is the cleanest way to make table layouts that display correctly in IE7, IE8, Firefox, Chrome and Safari?

Edit:

I've added a mock up of the layout I want to achieve:

layout

`display:table-*` and child selector `>` doesn't work in ie7 — Sotiris, Feb 21 '11 at 16:13
[`display: table` and friends](http://www.quirksmode.org/css/display.html) do not work in IE7. Regardless of that, this is not the way to do it anyway - you don't *need* `display: table` here. — thirtydot, Feb 21 '11 at 16:14
I don't really know what you want. "a simple form layout" could mean a fair few different things. A sure fire way to help people understand is to create a simple picture. — thirtydot, Feb 21 '11 at 16:23
@thirtydot: Okay, I've added a mock up to my original question. — futlib, Feb 22 '11 at 08:27

Šime Vidas · Accepted Answer · 2011-02-22T10:35:28.153

3

How about absolute positioning?

HTML:

<form>
    <h3> LOGIN </h3>
    <p> <label> Username: <input type="text"> </label> </p>
    <p> <label> Password: <input type="text"> </label> </p>
</form>

CSS:

p { position:relative; }
input { position:absolute; top:0; right:0; }

Live demo: http://jsfiddle.net/GCWWv/1/

Or this CSS:

p { position:relative; }
input { position:absolute; left:100px; }

Live demo: http://jsfiddle.net/GCWWv/9/

edited Feb 22 '11 at 10:35

answered Feb 21 '11 at 17:12

Šime Vidas

182,163
62
281
385

Thanks, this does indeed work! But I'm wondering: Is it the best way to do it? – futlib Feb 22 '11 at 08:39
@futlib Yes, I would say so. BTW I believe you even don't have to set `top:0;` on the inputs - it's the default value. – Šime Vidas Feb 22 '11 at 10:13
It's pretty simple, that's for sure. But how can I also left-align inputs this way? It's no issue if I give them fixed widths, but I don't really like doing that. – futlib Feb 22 '11 at 10:16
@futlib Good that you mentioned that. In that case you just set the `left` property to a fixed value, e.g. to 100px (instead of setting the `right` property). See here: http://jsfiddle.net/GCWWv/9/ This solution makes even more sense, since you don't need to set the INPUT widths at all. – Šime Vidas Feb 22 '11 at 10:34
I would have to rely on the label width's though, right? Well, guess it's okay for my case, but is this really how the CSS camp avoids tables for layouts, absolute positioning? – futlib Feb 22 '11 at 10:45
@futlib Yes, you define a fixed width for the text and then translate those input boxes for that width using `left`. Absolute positioning is afaik the first choice to avoid tables. Another solution would be `display:inline-block`. See here: http://jsfiddle.net/GCWWv/10/ This is also OK, but I prefer positioning because it's more precise. – Šime Vidas Feb 22 '11 at 11:04
@futlib There is also floating - see here: http://jsfiddle.net/GCWWv/11/ This solution is similar to the inline-block solution as in both of them you need to wrap the label text inside a SPAN element. The positioning solution is the only one (among the 3 solutions that I mentioned) that doesn't require wrapping, and that's why I like it the most. – Šime Vidas Feb 22 '11 at 11:17
Thanks for the detailed answer, I guess I'll go with the inline-block solution then, just seems to be the most clean one IMO. – futlib Feb 22 '11 at 12:41
Do not use `
`. Just as you are not using `
` because you feel it is not semantically correct, a form field and label pair is certainly not a paragraph. Use a `
` and add the margin with CSS.
– gilly3 Feb 22 '11 at 17:08
@gilly I'm not that much of a semantics purist. I like P because it's shorter and reduces the number of DIV's on the page. – Šime Vidas Feb 22 '11 at 17:24

score 1 · Answer 2 · edited May 23 '17 at 10:30

Use <table>. Most likely, you've heard it is bad practice to use tables in HTML. It is true that you should avoid using tables for layout. But, if you are actually displaying tabular data, then you should use a table. If you are displaying rows and columns of data, that sounds like a table to me. It would be inappropriate to try and spoof it with css.

A little bit on why. An HTML tag should describe its content, not its appearance. Eg, <p> represents a paragraph, not a block element with top and bottom margins, and not something to use when you need more white space. Some people like this because it feels right. It's clean and tidy and provides a nice separation between content and style. Done well, it can make it easier to re-skin a website.

But more importantly, it makes a HUGE difference for accessibility. Consider screen readers for the blind. When the screen reader encounters a <table>, it expects it to contain data. It allows the user to navigate the table by columns, rows, and headings. Using a table at the wrong time can be very confusing. Using it properly, can make it much easier for the user. Creating a table out of divs and fancy CSS tricks forces the user to navigate each element individually, instead of being able to skip to the row and column that is pertinent. To use your example, if a user was filling out a form, and certain fields were unnecessary, he could easily navigate by <th> to find the fields he needed to fill out.

There are other similar reasons to follow the "tags describe content" convention. Mostly, it is when anything other than a standard browser is consuming your page. Think search engines, feeds, etc. There are many lengthy discussions about this online. HTML5 takes this concept further with the introduction of some new semantic tags.

Fair enough, but an input form isn't really tabular data, is it? It's just an input form I'd like to represent as a grid visually. — futlib, Feb 22 '11 at 08:29
@futlib - Sure, I think so - each field contains the same kind of data per column. Each field corresponds to the other fields in its row. Also consider [this article](http://olav.dk/articles/tables.html). — gilly3, Feb 22 '11 at 17:03
IE7 is really the culprit here. I don't like to have in my markup, because if I look back at it later, I'd take a while until I figure out that I used it for layout purposes. My solution, using CSS to make the divs, labels and inputs _behave_ like a table is probably the nicest way, but IE7 doesn't get it... — futlib, Feb 23 '11 at 08:27

score 0 · Answer 3 · answered Feb 21 '11 at 16:13

0

I would do something whereby you don't use display: table

I would:

form div {
float: left;
width: 200px /* change this to whatever */
}

If you need help could you please outline what visual layout you're trying to achieve? Good luck.

answered Feb 21 '11 at 16:13

getdave

208
2
8

Pretty much a table with two columns, but using an actual table element for layouting feels wrong. – futlib Feb 21 '11 at 16:23

Table layout without tables in IE7

3 Answers3