What is the best way to style a list of checkboxes

Question

What I'd like to achieve is a layout like this

some label  [ ] checkbox 1
            [ ] checkbox 2
            [ ] checkbox 3
            [ ] checkbox 4

[ ] represents a checkbox

What markup and CSS would be best to use for this? I know this would be easy to do with a table I'm wondering if this is possible with divs

Schaffner

A table is perfectly OK for layiing out tabular elements like this. – Loferski

Tables are for tabular data. This isn't tabular data, it's a set of form elements with a label. – Euphemize

The table objection is that of laying out the entire webpage with tables, which is a bad thing. But there's nothing wrong with laying out things with tables that are clearly table structures. – Loferski

@Robert: Yes there is. Tables are for tabular data, this is no such thing. – Dwanadwane

If you people are so obsessed with your 'Table's are evil' notion, to hell with my answer. – Grote

Not trying to antagonize here, but the OP did say "I know this would be easy to do with a table..." I'm not sure what value was being added with a <table>-based response. – Unprovided

Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent. – Euphemize

Tables aren't evil, they make wonderful tables. – Metic

I know that this could be done easily with tables but I was curious to know what the best approach would be without tables – Schaffner

Answer 1

I would use this markup:

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

and these styles:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent.

Euphemize

I agree, but don't forget the 'for' and 'id': <label for="somethingHere">...</label> and <ul id="somethingHere"> – Klystron

@Jusin: There's supposed to be one label for each checkbox, if I'm understanding the specs correctly. – Dwanadwane

I suppose that using a label element would actually not be the correct thing since technically a label should belong to an input element whereas here it would belong to the unordered list. But since the form would probably contain more input elements (not all of which will be lists of checkboxes) it probably makes sense to use a label anyway for simplicity purposes. Else the same styles that are applied to the other labels would have to be applied to the span or whatever other element would be used instead of label – Schaffner

@MarcS: see You's answer for proper markup. Replace the div with a fieldset, replace the label with a legend and add some labels to all inputs. legend (or rather: fieldset) defines a one-to-may relationship, and lable defines a one-to-one relationship. – Ginnifer

Excellent feedback! If you're using YUI's reset.css, then legend is rather nice. For this simple example, I think the css necessary to cancel out all the default stylings distracts too much from the solution. – Euphemize

Forgot closing tags for input ;) – Hardset

Answer 2

This very semantic HTML:

<fieldset class="checkboxgroup">
    <p>some label</p>
    <label><input type="checkbox"> checkbox 1</label>
    <label><input type="checkbox"> checkbox 2</label>
    <label><input type="checkbox"> checkbox 3</label>
    <label><input type="checkbox"> checkbox 4</label>
</fieldset>

And this fairly simple CSS:

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

Adjust widths as needed.

The proper way to do this really is to replace the p element in my HTML with a legend element, but this won't style the way you want it to without some pretty ugly CSS.

Dwanadwane

+1 for using fieldset and mentioning legend. "Do not use tables for layout" do not mean "use any element you want except table", :). – Ginnifer

Excellent semantics. If you add a wrapper to the labels, you can skip the width-constraints aswell. – Euphemize

FYI, I have found that this is quite slower than other solutions when you have thousands of checkboxes. – Knute

Answer 3

In my opinion its more some kind of list than a table (but You did not list the whole picture). To me it looks like a definition list so I would use it (if not I would stick to a unordered list example the Magnar solution, adding labels.

The definition list version:

 <dl id="checkboxes">
        <dt>same label or term</dt>
        <dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
        <dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
        <dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
        <dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
  </dl>

Pantie

Great point, specially for bringing up an usually forgotten html element :P – Transcalent

Answer 4

<div style="float: left;">
    some label
</div>

<div style="float: left;">
    <input type="checkbox" />&#160;checkbox 1<br />
    <input type="checkbox" />&#160;checkbox 2<br />
    <input type="checkbox" />&#160;checkbox 3<br />
    <input type="checkbox" />&#160;checkbox 4
</div>

Unprovided

I just got one for some reason, don't know why. Heres an upvote though – Grote

Maybe someone has a hate-on for inline styles? Wasn't me though. – Iloilo

I wasn't writing production code, I was showing how it could be accomplished. Missing the forest for the trees I guess. – Unprovided

@Sean, its not your answer, its a feud between the layout mafia and the table apologists. – Loferski

Well then I shall graciously bow out. – Unprovided