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>
