<body>
<table border=0>
<tr>
<td colspan="8" rowspan="8"><img src="Start3.bmp"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c35"><img src="invisible.png" id="p2c35"><img src="invisible.png" id="p3c35"><img src="invisible.png" id="p4c35"></td>
<td class="default" style="border-bottom:dotted;" align="center"><img src="savecell.bmp"><img src="invisible.png" id="p1c34"><img src="invisible.png" id="p2c34"><img src="invisible.png" id="p3c34"><img src="invisible.png" id="p4c34"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c33"><img src="invisible.png" id="p2c33"><img src="invisible.png" id="p3c33"><img src="invisible.png" id="p4c33"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c36"><img src="invisible.png" id="p2c36"><img src="invisible.png" id="p3c36"><img src="invisible.png" id="p4c36"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f1"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c32"><img src="invisible.png" id="p2c32"><img src="invisible.png" id="p3c32"><img src="invisible.png" id="p4c32"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c37"><img src="invisible.png" id="p2c37"><img src="invisible.png" id="p3c37"><img src="invisible.png" id="p4c37"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f2"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c31"><img src="invisible.png" id="p2c31"><img src="invisible.png" id="p3c31"><img src="invisible.png" id="p4c31"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c38"><img src="invisible.png" id="p3c38"><img src="invisible.png" id="p4c38"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f3"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c30"><img src="invisible.png" id="p2c30"><img src="invisible.png" id="p3c30"><img src="invisible.png" id="p4c30"></td>
</tr>
<tr>
<td class="startp3" align="center"><img src="invisible.png" id="p1c39"><img src="invisible.png" id="p2c39"><img src="invisible.png" id="p3c39"><img src="invisible.png" id="p4c39"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f4"></td>
<td class="default" align="center"><img src="savecell.bmp"><img src="invisible.png" id="p1c39"><img src="invisible.png" id="p2c29"><img src="invisible.png" id="p3c29"><img src="invisible.png" id="p4c29"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c40"><img src="invisible.png" id="p2c40"><img src="invisible.png" id="p3c40"><img src="invisible.png" id="p4c40"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f5"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c28"><img src="invisible.png" id="p3c28"><img src="invisible.png" id="p4c28"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c41"><img src="invisible.png" id="p2c41"><img src="invisible.png" id="p3c41"><img src="invisible.png" id="p4c41"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f6"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c28"><img src="invisible.png" id="p3c28"><img src="invisible.png" id="p4c28"></td>
</tr>
<tr>
<td colspan="8" rowspan="8"><img src="Start2.bmp"></td>
</tr>
</table>
</body></html>
问题在于,在这个表中,在最后几行(从最后一行开始)中,TD元素应该出现在表格的其余部分旁边,但它出现在所有内容的下方,我无法将它放在旁边其他要素。我怎么能这样做?
编辑:我尝试将另一个tr和td元素放到右侧出现的部分,它也出现在下面,然后将rowspan Start3.bmp(在第一行)的值增加1,新元素出现和他们一起,但是我也找不到把问题放在一边的价值。
答案 0 :(得分:0)
该表违反了HTML表模型,您可以通过使用HTML5 doctype字符串进行验证来查看。所有的赌注都是关闭的。
这个问题没有描述数据的预期结构或,所以我不能建议任何具体的方法。
您应绘制所需布局的图片,然后设计有效的表格或设计实现布局的CSS样式。如果您需要帮助,您应该发布一个新问题,并提供足够的口头解释和图像以显示所需的渲染。
答案 1 :(得分:0)
暂时使用<table border=1px>
,您可以更清楚地看到您的行和列定义,这可能会有所帮助。
您需要按照它们首次出现在页面上的顺序声明表格单元格,从左上角开始,然后向右移动,然后向下移动一行,依此类推。如果您希望在表格的整个高度上显示一个元素,则需要在要显示在其右侧的<td>
之后的顶行中声明它,然后设置其rowspan
表中的行数。
这是你的想法吗?
<html>
<body>
<table border=0>
<tr>
<td rowspan="7"><img src="Start3.bmp"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c35"><img src="invisible.png" id="p2c35"><img src="invisible.png" id="p3c35"><img src="invisible.png" id="p4c35"></td>
<td class="default" style="border-bottom:dotted;" align="center"><img src="savecell.bmp"><img src="invisible.png" id="p1c34"><img src="invisible.png" id="p2c34"><img src="invisible.png" id="p3c34"><img src="invisible.png" id="p4c34"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c33"><img src="invisible.png" id="p2c33"><img src="invisible.png" id="p3c33"><img src="invisible.png" id="p4c33"></td>
<td rowspan="7"><img src="Start2.bmp"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c36"><img src="invisible.png" id="p2c36"><img src="invisible.png" id="p3c36"><img src="invisible.png" id="p4c36"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f1"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c32"><img src="invisible.png" id="p2c32"><img src="invisible.png" id="p3c32"><img src="invisible.png" id="p4c32"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c37"><img src="invisible.png" id="p2c37"><img src="invisible.png" id="p3c37"><img src="invisible.png" id="p4c37"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f2"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c31"><img src="invisible.png" id="p2c31"><img src="invisible.png" id="p3c31"><img src="invisible.png" id="p4c31"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c38"><img src="invisible.png" id="p3c38"><img src="invisible.png" id="p4c38"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f3"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c30"><img src="invisible.png" id="p2c30"><img src="invisible.png" id="p3c30"><img src="invisible.png" id="p4c30"></td>
</tr>
<tr>
<td class="startp3" align="center"><img src="invisible.png" id="p1c39"><img src="invisible.png" id="p2c39"><img src="invisible.png" id="p3c39"><img src="invisible.png" id="p4c39"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f4"></td>
<td class="default" align="center"><img src="savecell.bmp"><img src="invisible.png" id="p1c39"><img src="invisible.png" id="p2c29"><img src="invisible.png" id="p3c29"><img src="invisible.png" id="p4c29"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c40"><img src="invisible.png" id="p2c40"><img src="invisible.png" id="p3c40"><img src="invisible.png" id="p4c40"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f5"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c28"><img src="invisible.png" id="p3c28"><img src="invisible.png" id="p4c28"></td>
</tr>
<tr>
<td class="default" align="center"><img src="invisible.png" id="p1c41"><img src="invisible.png" id="p2c41"><img src="invisible.png" id="p3c41"><img src="invisible.png" id="p4c41"></td>
<td class="savep3" align="center"><img src="invisible.png" id="p3f6"></td>
<td class="default" align="center"><img src="invisible.png" id="p1c38"><img src="invisible.png" id="p2c28"><img src="invisible.png" id="p3c28"><img src="invisible.png" id="p4c28"></td>
</tr>
<tr>
</tr>
</table>
</body></html>