I have a set of items that can be in various states. I want to allow a user to use an (X)HTML form to
change
the state, and
easily view
the state of a group of objects
...so to this end, I'd like a layout like:
| item1 | radio button for state 1 | radio for state 2 | ... | [update button] |
| item2 | radio button for state 1 | radio for state 2 | ... | [update button] |
etc. I prefer
the radio buttons to list boxes so that it's easy for a user to visually scan for things in a certain state.
It seemed like perfectly tabular data to me.
The only problem is, you can't have forms inside a table that cross table cells (ie. <tr> <form> <td> ... is invalid).
I thought, "hey, I could have one giant form wrapping a table, and make
the [update button] value contain
the IDs for each row!" Turns out certain versions of IE send ALL
THE SUBMIT BUTTON VALUES on any single form.
So I thought perhaps to to lay it out with <div>s and place
the forms inside a single <td>. But then they break a line on each <div>. So I fixed their width and made them float: left. But then they wrap inside
the table cells if
the table row is wider than
the page, and
the radio controls don't line up with
the headings.
Is it possible to lay this out as I intend?
The XHTML below shows
the intended structure. Observe what happens if you resize
the browser window below
the width of
the table (ideally,
the name would break or
the table would show a scroll bar).
<!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" xml:lang="en" lang="en">
<head><title>Test</title>
<style type="text/css">
.state-select, .thing-state-name, .update {
float: left;
width: 8em;
}
.state-select {
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="thing-name-header">Thing</th>
<th>
<div class="thing-state-name">Present</div>
<div class="thing-state-name">Absent</div>
<div class="thing-state-name">Haven't looked</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="1" />
<div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
<tr>
<td>Orange</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="2" />
<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
<tr>
<td>David Bowie</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="3" />
<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
</tbody>
</table>
</body>
</html>
