57

Alright, I'm trying to buy into the idea that html tables should not be used, and that divs should be. However, I often have code that resembles the following

<table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>

I want the labels to be aligned and I want the controls to be aligned. How would I do this without using tables?

8
  • 1
    Here's a good read: <a href="alistapart.com/articles/prettyaccessibleforms">Prettier Accessible Forms</a>.
    – Chad Birch
    Mar 31, 2009 at 17:41
  • 25
    The way you write the recommended best practice is NOT correct. The rule reads "You should not use tables FOR LAYOUT". It does not mean never to use tables.
    – bortzmeyer
    Apr 2, 2009 at 9:04
  • I must be having a brain fart...isn't a table a layout structure? What else can you use it for?
    – xr280xr
    Jun 22, 2012 at 18:21
  • 4
    @xr280xr for organizing tabular data...? Jul 17, 2012 at 6:44
  • 2
    @wrongusername Visually organizing tabular data right? I.E. controlling the positioning of the data so it's arranged in a tabular format. That's layout. I'm assuming "FOR LAYOUT" must mean the layout of an entire page.
    – xr280xr
    Jul 19, 2012 at 18:31

6 Answers 6

42

This ought to do the trick.

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

I hope you get the concept.

2
  • 4
    Thanks, I get the idea. This is basically what I thought. However, it seems pretty ugly to have to hard code the column widths, especially into the style, which should be separated from the content. Mar 31, 2009 at 19:10
  • Addendum: I would suggest aligning the labels to the right, for better readability. Jul 4, 2009 at 23:43
27

Please be aware that although tables are discouraged as a primary means of page layout, they still have their place. Tables can and should be used when and where appropriate and until some of the more popular browsers (ahem, IE, ahem) become more standards compliant, tables are sometimes the best route to a solution.

5
  • 9
    Indeed. In this case, you want to display TABULAR data. So, using HTML tables is pefectly OK.
    – bortzmeyer
    Apr 2, 2009 at 9:03
  • 2
    How do you implement sometimes? Apr 18, 2012 at 12:53
  • I don't understand the question.
    – KOGI
    Apr 18, 2012 at 17:10
  • @KOGI "tables are sometimes the best route to a solution". How to know when it is the best route and when it isn't? May 3, 2012 at 12:08
  • @Simon use tabels if you are displaying tabular data. Or if a browser like IE is just not cooperating and tables are the only way to make it work (should be rare nowadays)
    – KOGI
    May 3, 2012 at 15:29
10

I looked all over for an easy solution and found this code that worked for me. The right div is a third column which I left in for readability sake.

Here is the HTML:

<div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>

And the CSS:

.container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }
3

You can create simple float-based forms without having to lose your liquid layout. For example:

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

This does tend to break down, though, when you have complex form layouts where there's a grid of multiple fixed and flexible width columns. At that point you have to decide whether to stick with divs and abandon liquid layout in favour of just dropping everything into fixed pixel positions, or let tables do it.

For me personally, liquid layout is a more important usability feature than the exact elements used to lay out the form, so I usually go for tables.

1

Basically it boils down to using a fixed-width page and setting the width for those labels and controls. This is the most common way in which table-less layouts are implemented.

There are many ways to go about setting widths. Blueprint.css is a very popular css framework which can help you set up columns/widths.

1

there is a very useful online tool for this, just automatically transform the table into divs:

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

And the video that explains it: https://www.youtube.com/watch?v=R1ArAee6wEQ

I'm using this on a daily basis. I hope it helps ;)

Not the answer you're looking for? Browse other questions tagged or ask your own question.