Using the label tag for multiple rows in a table with a multi-row table-cell

Question

I have a table with checkboxes in it, and the cells in each checkbox row contain information about what that checkbox is about. So I wanted to use label for the rows but, as far as I know, you can't use label between table and td tags.

Then I made a CSS-table version of the same thing and it worked properly. I styled label as a table-row, the cells were properly aligned, and clicking them would check/uncheck the checkbox.

Now the problem: I want the checkbox to span across multiple rows.

http://jsfiddle.net/odraencoded/YaS5v/ - The HTML table version has the rowspan attribute, but I can't use label in a single row let alone multiple rows.

<table>
  <tr>
    <td rowspan=2><input type=checkbox /></td>
    <td>...</td>
  </tr>
  <tr><td>...</td></tr>
</table>

http://jsfiddle.net/odraencoded/EKzXv/ - The CSS table version lets me use label but I can't find a way to set the rowspan.

<div style="display: table;">
  <label style="display: table-row-group;">
    <span style="display: table-row;">
      <span style="display: table-cell;">
        <input type="checkbox" />
      </span>
      <span...>...</span>
    </span>
    <span...><span...>...</span></span>
  </label>
</div>

Is there any way to have a label tag containing multiple rows? And one of the cells it contains is the input checkbox the label is for? And that input checkbox cell should span across all rows contained by the label? Anyway for that?

Uh. What? Can you reword your question? Ever thought of using <TH>? — bobthyasian
Using TH won't help. I can't have a label tag contained by a table tag and containing multiple TR tags, whether I use TDs or THs won't change that. What I want is a label tag that contains multiple table rows, and a table cell spaning across those multiple rows with a checkbox in it. — OdraEncoded
Are you sure you fully understand how <label> works? Could you make a mock-up of what it is you want? I'm still in the dark. You can't have a <TD> that transcends <TR>...That goes against the whole point of tables. You'd want to go full <DIV>. — bobthyasian
jsfiddle.net/odraencoded/EKzXv <- example. Clicking on the cells next to the checkboxes checks/unchecks the checkbox (if your browser works with labels that is). — OdraEncoded
<label> uses an attribute called for. It links the <label> with the desired <input> Source — bobthyasian

Dan Atkinson Dan Atkinson · Accepted Answer · 2014-03-11T12:41:27

This would be one way of doing it. Note the id on the checkboxes.

<table>
  <tbody id="checkbox1">
    <tr>
        <td rowspan="2"><input type="checkbox" id="check1" /></td>
        <td><label for="check1">A</label></td>
        <td><label for="check1">B</label></td>
        <td><label for="check1">C</label></td>
    </tr>
    <tr>
        <td><label for="check1">a</label></td>
        <td><label for="check1">b</label></td>
        <td><label for="check1">c</label></td>
    </tr>
    </tbody>
    <tbody id="checkbox2">
    <tr>
        <td rowspan="2"><input type="checkbox" id="check2" /></td>
        <td><label for="check2">D</label></td>
        <td><label for="check2">E</label></td>
        <td><label for="check2">F</label></td>
    </tr>
    <tr>
        <td><label for="check2">d</label></td>
        <td><label for="check2">e</label></td>
        <td><label for="check2">f</label></td>
    </tr>
  </tbody>
</table>

Using the label tag for multiple rows in a table with a multi-row table-cell

1 Answers