Завершить таблицы строк без нарушения проверки HTML?

Question

У меня есть таблица, и я хочу, чтобы обернуть строки таблицы, но проблема в том, я не знаю, с тем, что, чтобы обернуть эти эти ребята до ... Если я использую <div>, <span>, <tr>, <td> .. Все они нарушают мою проверку.

Итак, с чем я могу обернуть свои таблицы-строки без нарушения валидации?

Вот как я хочу, чтобы это выглядело только потому, что мой HTML недопустим.
Fiddle Here

Я генерации мои оберток с использованием следующих 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

Как @KevinB пишет в комментарии, элемент tbody - это единственный способ grop таблицы строк в элементе обертки. В статической разметке, это может быть:

<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> 

В class атрибутах на tbody элементов действительно не нужны, но они могут быть использованы для укладки немного легче.

В качестве альтернативы вы могли бы решить, что две части на самом деле не являются логически частью одной таблицы и используют два отдельных элемента table. Это действительно единственный способ, если вы хотите, чтобы столбец 2 начинался с разных позиций.

Answer 2

Я бы первым начать, просто удалив таблицу с самого начала. На самом деле лучше всего использовать таблицу, когда отображаются фактические «табличные данные».

<h3 class="title">General Settings:</h3> 
<div class="section_box1"> 
    Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br /> 
    Menu Background: <input type="file" name=""/> 
</div> 
<div class="section_box2"> 
    Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br /> 
    Hide Site Title: <input type="checkbox" value="value3" name="name3" /> 
</div> 

См. jsfiddle.

Таким образом, вы можете более свободно добавлять классы/обертки по мере необходимости и по-прежнему быть совместимыми с HTML.