HTML - элемент Button стоит перед элементом таблицы, который находится перед текстом - PullRequest
Новая
       20

HTML - элемент Button стоит перед элементом таблицы, который находится перед текстом

0 голосов
/ 11 февраля 2019

Я все еще изучаю HTML, следующий фрагмент кода не отображается должным образом.Без внесения изменений в элемент тела, как я могу получить элементы для отображения в следующем блочном стиле ...

Квадрат Паннета:

Моногибридный крест

таблица

кнопка id = "punnett_mono"

дибридный крест

таблица 5x5

кнопка id = "punnett_di"

Фрагмент кода: 

    <html>
    <body>
    <p><b>Punnett square:</b></p>
    <u>Monohybrid cross</u>
    <p>
    <table style="width: 50%; border-collapse: collapse; font-size: 25;">
    <tr>
    <td style="border: none; padding:30;"></td>
    <th colspan="2" style="border: 1 solid black; padding: 30;">Paternal:<br><div id="p_box" contenteditable></div></th>
    </tr>
    <tr>
    <th rowspan="2" style="border: 1 solid black;">Maternal:<br><div id="m_box" contenteditable></div></th>
    <td id="r2_c2" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="r2_c3" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <tr>
    <td id="r3_c2" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="r3_c3" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <input type="button" id="punnett_mono" onclick="p_mono p_box.innertext, m_box.innertext" value="Predict"/>
    </p>
    
    <u>Dihybrid cross</u>
    <p>
    <table style="width: 50%; border-collapse: collapse; font-size: 25;">
    <tr>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <tr>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <tr>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <tr>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <tr>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    <td id="" style="border: 1 solid black; padding: 30;">F1</td>
    </tr>
    <input type="button" id="punnett_di" onclick="p_di" value="Predict"/>
    </p>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019 

<html>

<body>
    <p><b>Punnett square:</b></p>
    <u>Monohybrid cross</u>
    <p>
        <table style="width: 50%; border-collapse: collapse; font-size: 25;">
            <tr>
                <td style="border: none; padding:30;"></td>
                <th colspan="2" style="border: 1 solid black; padding: 30;">
                    Paternal:<br>
                    <div id="p_box" contenteditable></div>
                </th>
            </tr>
            <tr>
                <th rowspan="2" style="border: 1 solid black;">
                    Maternal:<br>
                    <div id="m_box" contenteditable></div>
                </th>
                <td id="r2_c2" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="r2_c3" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
            <tr>
                <td id="r3_c2" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="r3_c3" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
        </table>
        <input type="button" id="punnett_mono" onclick="p_mono p_box.innertext, m_box.innertext" value="Predict" />
    </p>
    <u>Dihybrid cross</u>
    <p>

        <table style="width: 50%; border-collapse: collapse; font-size: 25;">
            <tr>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
            <tr>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
            <tr>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
            <tr>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
            <tr>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
                <td id="" style="border: 1 solid black; padding: 30;">F1</td>
            </tr>
         </table>
         <input type="button" id="punnett_di" onclick="p_di" value="Predict" />
    </p>
</body>

</html>

Вы должны закрыть тег таблицы (:

0 голосов
/ 11 февраля 2019

Используйте </table> там, где заканчивается таблица

...