CODEWITHSUNDEEP
csslayoutwebformsxhtmlhtml-table
zSynopsis
zSynopsis

Reputation: 4854

Webform Layout: Table or something else

I have to create a webform that looks something like this

column   column  -   column   column      column column   -   column column
label:   input   -   label:   input 
label:   input   -   label:   input   -   label: input
label:   input   -   label:   input
label:   input
label:   input   -   label:   input
label:   input   -   label:   input   -   label: input   -    input: label

etc..

Now what would be the best way to go about doing this? I've been trying ways to accomplish with css but I've failed over and over again.

Should I just go ahead and use tables for this or is there a simple way to do this with css?

Upvotes: 0

Views: 1488

Answers (3)

Dave Ward
Dave Ward

Reputation: 60580

How about something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

If you like that, you might consider using fieldsets instead of divs for the columns. They style nicely and are more semantic. Either way works well though.

Upvotes: 1

Antti Huima
Antti Huima

Reputation: 25522

Just do it with tables. Tables are fine for tabular data, like stuff with columns and rows... like in your case!

Upvotes: 4

HardCode
HardCode

Reputation: 6756

Did your formatting for the example not take? If you just want a label, input control, and a space, just add the controls to the page with no formatting whatsoever. HTML will lay out that way.

However, I assume you want some kind of columns. You have several possibilities. The most inflexible is absolutely positioning the controls (markup).

You could use tables, which would be the most straight-forward. However, purists would argue that tables are for data, not layout.

You could also left float a series of DIVs to represent columns: one column for a label, one for an input, a third for labels, a fourth for input, etc.

EDIT: If you aren't worried about labels lining up vertically with labels and inputs lining up vertically with inputs, just put one label + input pair in each column, whichever method above you choose.

Upvotes: 1

Related Questions