Таблица HTML - Положите все без этой новой строки

Question

Таблица HTML - Положите все без этой новой строки

<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, вместе с ними появился новый элемент, но я не могу найти значение, чтобы поставить часть проблемы тоже.

0

html html-table next

Источник

user2304057 20 май '13 в 10:44

2 ответа

Другие вопросы по тегам html html-table next

user1084437 20 май '13 в 11:44 2013-05-20 11:44 · Answer 1 · 2013-05-20 11:44

Таблица нарушает модель таблицы HTML, как вы можете убедиться, проверив ее с помощью строки типа документа HTML5. Все ставки отменены.

Вопрос не описывает предполагаемую структуру или рендеринг данных, поэтому я не могу предложить какой-либо конкретный подход.

Вы должны нарисовать картинку желаемого макета, затем спроектировать правильную таблицу или дизайн CSS-стиля, который обеспечивает макет. Если вам нужна помощь с этим, вы должны опубликовать новый вопрос, с достаточным количеством словесных объяснений и изображений, чтобы показать желаемый рендеринг.

user2094068 20 май '13 в 14:27 2013-05-20 14:27 · Answer 2 · 2013-05-20 14:27

Временно используя <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>