换行而不破坏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元素实际上是在包装元素中查表表格行的唯一方法。在静态标记，这可能是：真的没有必要

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

上tbody元素的class属性，但它们可以被用来做造型更容易一些。

或者，您可能会认为这两个部分在逻辑上不是同一个表的逻辑部分，而是使用两个单独的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标准。