为什么在 HTML 中创建表格时会发生这种情况？

问题描述 投票：0回答：1

我编写了一个 XML 代码来创建表。但是，问题是每当我从特定块中删除嵌套标记时，表行就会交替。 源代码

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html PUBLIC "~//W3C//DTD XHTML 1.1/EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse=collapse" border="2">
<tr><td rowspan="20"><b>Department</b></td></tr>
<tr><tr><td rowspan="5">Sem1</td></tr>
<tr><td>sub1</td></tr>
<tr><td>sub2</td></tr>
<tr><td>sub3</td></tr></tr>
<tr><tr><td rowspan="5">Sem2</td></tr>
<tr><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr></tr>
<tr><tr><td rowspan="5">Sem3</td></tr>
<tr><td>sub7</td></tr>
<tr><td>sub8</td></tr>
<tr><td>sub9</td></tr></tr>
</table>
</body>

有什么解决办法吗？

输出 correct output

但是当我删除了外面的那个，其中包含 4 行代码。

<--!tr tag removed--> <tr><td rowspan="5">Sem2</td></tr>
<tr><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr> <--!tr tag removed-->

输出是这样的 wrong output

html css xml xhtml
1个回答
0
投票

忽略注释中已解决的 XHTML 问题，您可能需要如下所示的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr><td rowspan="20"><b>Department</b></td></tr>
<tr><td rowspan="3">Sem1</td><td>sub1</td></tr>
<tr><td>sub2</td></tr>
<tr><td>sub3</td></tr>
<tr><td rowspan="3">Sem2</td><td>sub4</td></tr>
<tr><td>sub5</td></tr>
<tr><td>sub6</td></tr>
<tr><td rowspan="3">Sem3</td><td>sub7</td></tr>
<tr><td>sub8</td></tr>
<tr><td>sub9</td></tr>
</table>
</body>
</html>

您使用 

rowspan=5
观察到的效果是，当 HTML 解析器遇到紧接着另一个 
<tr>
标记的 
<tr>
标记时，会在第二个 
</tr>
开始之前推断出 
<tr>
结束元素标记 -元素标记，因此空表行计入 rowspan 值。

要了解 HTML 解析器的这种行为（最初源自 SGML 结束标记推断）的工作原理，请考虑上面省略了 

</tr>
元素的更正 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr><td rowspan="20"><b>Department</b></td>
<tr><td rowspan="3">Sem1</td><td>sub1</td>
<tr><td>sub2</td>
<tr><td>sub3</td>
<tr><td rowspan="3">Sem2</td><td>sub4</td>
<tr><td>sub5</td>
<tr><td>sub6</td>
<tr><td rowspan="3">Sem3</td><td>sub7</td>
<tr><td>sub8</td>
<tr><td>sub9</td>
</table>
</body>
</html>

根据 HTML 规范，后者等同于前者

如果 tr 元素后面紧跟着另一个 tr 元素，或者父元素中没有更多内容，则可以省略 tr 元素的结束标记。

事实上，SGML 解析器可以推断出这些（假设 

<DOCTYPE html>
更改为 
<!DOCTYPE html "about:legacy">
来告诉 SGML HTML 解析规则，如示例中所述。https://sgmljs.net/docs/parsing-html-tutorial /parsing-html-tutorial.html；实际上，甚至 
</td>
结束元素都可以省略；然而，这并没有在 
about:legacy-compat
的内置 
sgmlproc
HTML 迷你 DTD 中实现，所以需要使用完整的 HTML DTD）。

现在我很乐意将您发送到 W3C 的 nu HTML 5 验证器来检查您的 HTML，但其结果令人困惑（我们自己检查一下），似乎推断出额外的 

tbody
开始元素标记，这不是由 
table
元素的内容模型规范支持：

按此顺序：可选的一个 title 元素，后跟零个或多个 colgroup 元素，可选地后跟一个 thead 元素，后跟零个或多个 tbody 元素或一个或多个 tr 元素，后跟可选的 tfoot 元素，可选地与一个或多个脚本支持元素。

意味着

tbody
是可选并且不是被推断为围绕
tr
元素的包装，即使它的开始和结束元素可以被省略。后者是在 HTML5x 以及较新的 2020 和 2023 HTML 审查草案 DTD 中实现解析规则的方式，网址为 https://sgmljs.net/docs/html5.html。 HTML 5 DTD 参考中也简要讨论了这种歧义。

请参阅 Alohci 关于 nu 验证器对 

tbody
元素的推断的评论。

另请参阅 WHATWG 的 HTML 规范，了解引用的引文。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.