26

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

Matthew Murdoch
  • 30,874
  • 30
  • 96
  • 127
MarcS
  • 450
  • 1
  • 8
  • 14
  • 1
    A table is perfectly OK for layiing out tabular elements like this. – Robert Harvey Aug 04 '09 at 20:53
  • 12
    Tables are for tabular data. This isn't tabular data, it's a set of form elements with a label. – Magnar Aug 04 '09 at 20:56
  • 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. – Robert Harvey Aug 04 '09 at 20:59
  • @Robert: Yes there is. Tables are for tabular data, this is no such thing. – You Aug 04 '09 at 21:01
  • If you people are so obsessed with your 'Table's are evil' notion, to hell with my answer. – Tyler Carter Aug 04 '09 at 21:04
  • 2
    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 ``-based response.
     – Sean Bright Aug 04 '09 at 21:06
  • 1
    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. – Magnar Aug 04 '09 at 21:07
  • 7
    Tables aren't evil, they make wonderful tables. – kmiyashiro Aug 04 '09 at 21:41
  • I know that this could be done easily with tables but I was curious to know what the best approach would be without tables – MarcS Aug 04 '09 at 22:03

4 Answers4

36

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.

Magnar
  • 28,550
  • 8
  • 60
  • 65
  • 1
    I agree, but don't forget the 'for' and 'id': and
      – Justin Lucente Aug 04 '09 at 21:10
    • 1
      @Jusin: There's supposed to be one `label` for each checkbox, if I'm understanding the specs correctly. – You Aug 04 '09 at 21:54
    • 1
      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 – MarcS Aug 04 '09 at 21:58
    • 2
      @MarcS: see You's answer for proper markup. Replace the `div` with a `fieldset`, replace the `label` with a `legend` and add some `label`s to all `input`s. `legend` (or rather: `fieldset`) defines a one-to-may relationship, and `lable` defines a one-to-one relationship. – cic Aug 04 '09 at 22:12
    • 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. – Magnar Aug 05 '09 at 05:07
    • Forgot closing tags for input ;) – Tobi Nov 12 '21 at 10:59
    29

    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.

    You
    • 22,800
    • 3
    • 51
    • 64
    • 3
      +1 for using `fieldset` and mentioning `legend`. "Do not use tables for layout" do not mean "use any element you want except table", :). – cic Aug 04 '09 at 22:05
    • Excellent semantics. If you add a wrapper to the labels, you can skip the width-constraints aswell. – Magnar Aug 05 '09 at 05:01
    • FYI, I have found that this is quite slower than other solutions when you have thousands of checkboxes. – nickpapoutsis Dec 31 '19 at 00:32
    6

    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>
    Community
    • 1
    • 1
    Erv
    • 405
    • 2
    • 6
    5
    <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>
    Sean Bright
    • 118,630
    • 17
    • 138
    • 146