HTML でネストされたテーブルとリストを使用すると、信じられないほどの問題が発生します。Sublime を使用して、すべてのタグと終了タグが互いに整列し、適切なインデントを使用してすべてを追跡していることを確認して、HTML コードを正しく作成していることを誓います。ただし、私の出力は、私が期待するものとはかけ離れています。テーブルを相互にネストしようとすると、特にテーブルの順序付けられていないリストを含むテーブルを作成しようとすると、問題が発生する可能性があると思います。
主な問題は次のとおりです。
-順序付けられていないリストに通常の箇条書きを使用すると、箇条書きがランダムな領域に表示され、意味がありません。ただし、ul タグに style="list-style-type:none" を追加した後でも、箇条書きが表示されることを心配する必要さえないようにしましたが、各リスト項目の最初の項目の後に箇条書きが表示されます。リスト。これは、外側の順不同リストと内側のリストの両方の問題です。
-一番下にある「href」と「Hosts」の 2 番目のセットは、「items」テーブル内にある必要があります。これは、両方のテーブルが と同じ 内にあるためです。では、「アイテム」テーブルの外にあることを含め、なぜそれはすべての外にあるのでしょうか?
私が行方不明のタグはありますか?!
これが私の HTML コードです。ここで実行して、出力がどのように見えるかを確認できます。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.1</td>
</tr>
<tr>
<th>Hosts1.1</th>
<td>
<table border="1">
<tr>
<th>myAge</th>
<td>400</td>
</tr>
<tr>
<th>favColor</th>
<td>Red</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>hello1.2</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>これは、同じ問題を抱えていますが、読みやすい短いコードです。この短いコードでは、2 番目の「href」および「Hosts」テーブルが「items」から押し出されないことに注意してください。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>