我在为我的表编写正确的代码时遇到问题。使用Dreamweaver中的表格功能可以提供帮助，但是当使用CSS设置单个列或行的样式时，我发现我的代码没有正确编写。例如，如果我想要设置第一列的样式，我必须为每个tr元素添加类。所以我需要你的建议如何以更整洁的方式编写我的表格。
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe3">title</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr class="qwe1">
<td>1</td>
</tr>
<tr class="qwe1">
<td>2</td>
</tr>
<tr class="qwe1">
<td>3</td>
</tr>
<tr class="qwe1">
<td>4</td>
</tr>
<tr class="qwe1">
<td>5</td>
</tr>
<tr class="qwe1">
<td>6</td>
</tr>
<tr class="qwe1">
<td>7</td>
</tr>
<tr class="qwe1">
<td>8</td>
</tr>
<tr class="qwe1">
<td>9</td>
</tr>
<tr class="qwe1">
<td>10</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
您可以在此处查看我的代码：http://codepen.io/mariomez/pen/XJqwYy
Ps：我不希望你写完整个代码或者一些关于我应该在代码中改变什么的提示。 :)
答案 0 :(得分：1)
首先，我会说只写一个表而不是你现在每列的表。您仍然可以使用<td colspan="8">title</td>为该单元格保留红色背景的大标题。
一旦你有了这个单一的清理表，你可以使用:first-child只选择行内的第一个td，除了主标题。然后释放你的CSS魔法。
我添加了一个代码here。
编辑：改进了代码段here。
答案 1 :(得分：0)
您不需要嵌套表格！使用colspan和rowspan来获得所需的输出。
这是学习表格元素的一个很好的起点：complete guide table element。
这是对代码的快速修改：codepen。
注意我是如何在第一行使用colspan的：
<td colspan="8" class="qwe3">title</td>