【发布时间】：2015-07-11 08:46:07
【问题描述】：
我在 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>【问题讨论】：
-
将表格作为表格的直接子元素是无效的 HTML - 您首先需要至少一个表格行和一个表格单元格，然后您可以将“下一个”表格放入该表格单元格.
ul也是如此——也不允许作为table的孩子，它也必须在表格单元格内。 // 在这里你实际上想要达到 是很不清楚的。仅当您实际上有“表格”数据要在此处显示时才应使用表格（很难判断是否是这种情况）——您应该不将它们纯粹用于布局目的，这将是来自上个千年。 -
我知道我不应该将表格纯粹用于布局目的，而且我知道这个输出肯定看起来不漂亮:) 这个评论解释了我的问题并完美地解决了它。使用您的评论，我能够找到所有问题并在我的代码中修复它们。谢谢！
标签： html html-table html-lists nested-table