Label'd table rows

<label> applied in rows of a table for <input>

by odraencoded

HTML

<div>
    <label id="checkbox1">
        <span>
            <span><input type="checkbox" /></span>
            <span>A</span>
            <span>B</span>
            <span>C</span>
        </span>
        <span>
            <span></span>
            <span>a</span>
            <span>b</span>
            <span>c</span>
        </span>
    </label>
    <label id="checkbox2">
        <span>
            <span><input type="checkbox" /></span>
            <span>D</span>
            <span>E</span>
            <span>F</span>
        </span>
        <span>
            <span></span>
            <span>d</span>
            <span>e</span>
            <span>f</span>
        </span>
    </label>
</div>

CSS

div {
    display: table;
    border: 1px solid black;
    margin: 10px;
}

label {
    display: table-row-group;
}

#checkbox1{
    background-color: #fee;
}

#checkbox2 {
    background-color: #efe;
}

label > span {
    display: table-row;
}

label > span > span {
    display: table-cell;
    padding: 3px;
    border: 1px solid black;
}