CODEWITHSUNDEEP
htmlcsshtml-table
Robert Mailloux
Robert Mailloux

Reputation: 397

Table/Form formatting

Traditionally, I always lay out forms by styling each property, but I have read a lot lately about styling forms using a table. My problem is that with a table, when one cell is rather large, all other cells in that column become the same width. When editing them, the problem I end up with is either large gaps between input fields due to a large cell placed above them or, when you resize the screen, things get too close for comfort.

I tried setting the <td> widths individually but that doesn't work. I created a fiddle to see if someone could get me going in the right direction.

Thank you all so much in advance!

http://jsfiddle.net/uFwkd/

Upvotes: 0

Views: 98

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

The table in the jsfiddle (which seems to be what the question is really about) contains rows with different numbers of cells, e.g.

<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>

<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>

This causes rather unpredictable rendering in practice.

You could make the structure more appropriate by ensuring that all rows have the same number of slots (3, in this case), by using the colspan attribute on cells (on the first row above, with <td colspan="3">. This would require some artificial decision for the row containing two cells: one of them would need to span two columns.

This would be somewhat unnatural (cells in a column would not really be related to each other, just placed in the same column) and would imply accessibility problems. A better tabular structure for a form has one row for each input control (one field, such as one input element), with label in one column, the control itself in another, so you would start with something like

<table>
<tr><td><label for="org">Organization name:</label></td>
    <td><input type="text" name="org" id="org" value="" size="20" /></td>
    </tr>

Upvotes: 1

user650749
user650749

Reputation: 182

There is debate between using div and table to layout a form. There are some rules of thumb about this:

  • Table only for display
  • Use div as a form layout

In your case, you can consider transforming your table into a div.

Upvotes: 1

Related Questions