CSS/HTML: How to achieve a structure like table without using table?

Question

I have found few similar questions on stackoverflow but none of them seems to provide a real clear solution for my case.

I hope with a screenshot I can show the pain with using a table:

enter image description here

The bottom two rows are defined as tr and td within a table. The structure is perfect and alignment of the labels and textfields are perfect. However if I wanted to style a well class (e.g. <div class='well'> ... </div>) around only two rows, the table approach would fail. Simply because you are not allowed having any div inside a table, which is only excepting tr and td.

So I took the first two rows out of the table and made it as pure divs. You can see the result as the first two rows above in the grey well.

<div class='well'>
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

In itself the well class is now beautifully rendered around the two rows, however the alignment is now a mess. How can I make them still be centred and have the text-fields to be aligned vertically next to each other?

Are you absolutely certain that your form is not tabular data? If you have a list of items that were input via this form, would you be marking it up with a table? Also, tbody can be used multiple times in the same table to group rows together in the same way that colgroup is used for grouping columns. — cimmanon
– cimmanon, Commented Nov 20, 2012 at 13:19
Well considering the fact that it's a form. tables, theads and tbodies are entirely the wrong approach.. input's, textarea's and the likes usually have no place in tables.. — Damien Overeem
– Damien Overeem, Commented Nov 20, 2012 at 15:27
@cimmanon You were right. I had no idea you can use <tbody> several times within the table. Therefore what I was trying to achieve would work. Thanks for that. However I think I had the wrong approach anyway, since what I am trying to achieve isn't a tabular data in first place. — Houman
– Houman, Commented Nov 20, 2012 at 15:38
@DamienOvereem There's no reason table elements cannot belong inside a table, provided they can be classified as tabular data. A collection key/value pairs can be tabular data, and a data entry form is a collection of key(label)/value(input fields) pairs. I don't mean to suggest that every form is tabular data, but sometimes it really is if you look at the big picture. — cimmanon
– cimmanon, Commented Nov 20, 2012 at 15:41

Kyle · Accepted Answer · 2012-11-20 13:13:34Z

3

To get this effect with using divs, you just us the the display property with table, table-row and table-cell:

HTML:

<div class='well'>
  <div class="row">
    <div class='block_inline'> Title </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div class="row">
    <div class='block_inline'> Due Date Time </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

CSS:

div
{
    border: 1px solid #333;
}

.well
{
    display: table;
    width: 70%;
}

.row
{
    display: table-row;
}

.block_inline
{
    display: table-cell;
    width: 50%;
}

This mimics the behaviour of a table, but leaves the markup nice and semantic. This is also useful for solving "remaining space columns" issues :)

http://jsfiddle.net/Kyle_Sevenoaks/e7VeU/

answered Nov 20, 2012 at 13:13

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cimmanon Over a year ago

How can it be semantic if div has no semantic meaning at all?

Kyle Over a year ago

Ah, I meant something different. You can use semantic markup if you choose, and still apply these styles. :)

Damien Overeem · Accepted Answer · 2012-11-20 13:08:57Z

2

Well first of all the semantics are a mess.. this is how i do it:

<form>
    <div class="row">
        <label for="input_1">Title</label>
        <input type="text" name="input_1" id="input_1">
    </div>
    <div class="row">
        <label for="input_2">Due date time*</label>
        <input type="text" name="input_2" id="input_2">
    </div>

</form>

with style:

div.row {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

Make adjustments where neccesary.

The use of div class="row" could be replaced by fieldsets and definition lists. Take a look at http://www.gethifi.com/blog/html-forms-the-right-ways for that.

answered Nov 20, 2012 at 13:08

Damien Overeem

4,5294 gold badges38 silver badges56 bronze badges

Comments

Billy Moat · Accepted Answer · 2012-11-20 13:20:07Z

2

I like to use ULs for form layout: http://jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Type:</label><input type="text" /></li>
        <li><label>Reminder:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}

answered Nov 20, 2012 at 13:20

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Comments

Selvamani · Accepted Answer · 2012-11-20 13:17:30Z

0

You can also try this method

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

Demo; fiddle

answered Nov 20, 2012 at 13:17

Selvamani

7,7144 gold badges34 silver badges43 bronze badges

Collectives™ on Stack Overflow

CSS/HTML: How to achieve a structure like table without using table?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related