我在 HTML 中使用嵌套表格和列表时遇到了极大的麻烦。我发誓我正在正确地构建 HTML 代码,使用 Sublime 帮助我确保所有标签和结束标签相互对齐,并使用适当的缩进来跟踪所有内容。但是,我的输出与我的预期相差甚远。我怀疑当您尝试将表格相互嵌套时可能会出现问题,尤其是当您尝试拥有一个包含无序列表的表格时。
以下是主要问题:
- 为无序列表设置正常的项目符号会使项目符号出现在随机区域,这是没有意义的。但是,即使在我的 ul 标签中添加了 style="list-style-type:none" 这样我什至不必担心看到项目符号之后,我仍然会在第一个列表项之后看到每个列表项的项目符号列表。这对于外部无序列表和内部无序列表都是一个问题。
- 您在最底部看到的第二组“href”和“Hosts”应该在“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>
这是一个较短的代码,仍然存在相同的问题,但更易于阅读。请注意,第二个“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>