在第二列上创建一个包含三列和两行但没有边框的表

时间:2012-12-05 10:57:02

标签: html html-table

我需要创建一个包含3列和2行的表,第2列没有边框

例如我的代码在......

之下
 <table border="1" cellpadding="1" cellspacing="1" height="125" width="1037">
 <tbody>        
 <tr>
 <td style="width: 254px">Main Title</td>
 <td style="width: 639px">&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td style="width: 254px">Lots of Contents Column I</td>
 <td style="width: 639px">Lots of Contents Column II</td>
 <td>Lots of Contents Column III</td>
 </tr>
 </tbody>
 </table>

通过使用以下代码,我在第二行获得边框..

我不需要第二行的边框..我不能使用合并..因为我需要那个结构。

我唯一需要的是边框不应该显示在第二行。

但结构应保持不变。

我该如何使用HTML?

1 个答案:

答案 0 :(得分:1)

使用应用于'table data'标签而不是border = 1(不推荐使用)的样式可能会解决您的问题。您希望如何组织这些样式的应用程序将取决于您要添加到表格中的额外信息等。这是一个简单的示例,可以实现您的目标:

对于html,为每个tr添加了一个类(另请注意,cellpadding / cellspacing也已弃用):

<table cellpadding="1" cellspacing="1" height="125" width="1037">
<tbody>       
<tr class='border-row'>
<td style="width: 254px">Main Title</td>
<td style="width: 639px">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class = 'no-border-row'>
<td style="width: 254px">Lots of Contents Column I</td>
<td style="width: 639px">Lots of Contents Column II</td>
<td>Lots of Contents Column III</td>
</tr>
</tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

和css:

​.border-row td {
    border-style:solid;  
    border-width:1px;
}

.no-border-row td {
    border-style:none; 
}

你真的不需要指定第二行没有边框,但也许你可能希望将来应用一些不同的样式。