Wrap table rows without breaking HTML validation?

Question

I have a table and I want to wrap table rows , but the problem is I don't know with what to wrap those those guys up... If I use <div>,<span>,<tr>,<td>...they all break my validation.

So with what can I wrap my table-rows without breaking validation?

This is how I want it to look only problem is that my HTML is not valid.
Fiddle Here

I am generating my wrappers using following Jquery

$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');

//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(    
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});

Answer 1

As @KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:

<table class="form-table">

    <tbody class="bg">
        <tr valign="top">
            <th scope="row">Hide Menu Background:</th>
            <td>
                <input type="checkbox" value="value1" name="name1"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                Menu Background:
            </th>
            <td>
                <input type="file" name=""/>
            </td>
        </tr>
    </tbody>    

    <tbody class="other">
        <tr  valign="top">
            <th  scope="row">Hide Sidebar:</th>
            <td>
                <input type="checkbox" value="value2" name="name2"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">Hide Site Title:</th>
            <td>
                <input type="checkbox" value="value3" name="name3" />
            </td>
        </tr>
    </tbody>
</table>

The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.

Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.