我还在学习HTML，下面的代码片段并没有完全按预期显示。在不更改 body 元素的情况下，如何让元素以以下块方式显示......
庞内特广场：
单杂交杂交
桌子
按钮 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>在表格末尾使用</table>
<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>您必须关闭表标记 (：