HTML 表格 - 把所有东西都放在没有这个换行符的地方答案

【问题标题】：HTML Table - Put everything without this newlineHTML 表格 - 把所有东西都放在没有这个换行符的地方
【发布时间】：2013-05-20 10:44:26
【问题描述】：

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

问题在于，在此表中，在最后几行（倒数第 4 行）中，TD 元素应出现在表的其余部分旁边，但它出现在所有内容的下方，我无法将它放在旁边其他元素。我该怎么做？

编辑：我尝试将另一个 tr 和 td 元素放在右侧出现的部分，它也出现在下面，然后将 rowspan Start3.bmp 的（在第一行）的值增加 1，新元素出现了和他们一起，但我也找不到解决问题的价值。

【问题讨论】：

标签： html html-table next

【解决方案1】：

该表格违反了 HTML 表格模型，您可以通过使用 HTML5 文档类型字符串对其进行验证来查看。那时所有的赌注都取消了。

这个问题没有描述数据的预期结构或呈现，所以我不能提出任何具体的方法。

您应该绘制所需布局的图片，然后设计一个有效的表格或设计实现该布局的 CSS 样式。如果您需要这方面的帮助，您应该发布一个新问题，并提供足够的口头解释和图像以显示所需的渲染。

【讨论】：

【解决方案2】：

通过临时使用<table border=1px>，您可以更清楚地查看定义的行和列，这可能会有所帮助。

您需要按照它们首先出现在页面上的顺序声明表格单元格，从左上角开始，然后向右移动，然后向下一行，依此类推。如果你想让一个元素出现在表格的整个高度，你需要在你希望它出现在右边的<td>s之后的第一行声明它，然后设置它的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>

【讨论】：