0 
<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 増やしたところ、新しい要素が一緒に表示されました、しかし、私はあまりにもトラブルの部分を置くための値を見つけることができません.

4

2 に答える 2

0

HTML5 doctype 文字列を使用して検証するとわかるように、テーブルは HTML テーブル モデルに違反しています。その場合、すべての賭けは無効になります。

この質問は、データの意図した構造やレンダリングについて説明していないため、特定のアプローチを提案することはできません。

目的のレイアウトの図を描画してから、有効なテーブルを設計するか、レイアウトを実現する CSS スタイルを設計する必要があります。これについてサポートが必要な場合は、目的のレンダリングを示すために十分な口頭での説明と画像を添えて、新しい質問を投稿する必要があります。

于 2013-05-20T11:44:37.600 に答える
0

一時的に使用<table border=1px>すると、行と列がより明確に定義されていることがわかり、役立つ場合があります。

ページに最初に表示される順序で表のセルを宣言する必要があります。左上から始めて右に移動し、次に 1 行下に移動します。テーブルの高さ全体に 1 つの要素を表示する場合は、一番上の行<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>
于 2013-05-20T14:27:56.610 に答える