每个 <tr> 是否需要等量的 <td>？答案

【问题标题】：Does each <tr> need an equal amount of <td>s?每个 <tr> 是否需要等量的 <td>？
【发布时间】：2019-12-12 21:57:40
【问题描述】：

假设我有

<tr>
   <td>Hi</td>
   <td>Hi</td>
   <td>Hi</td>
   <td>Hi</td>
   <td>Hi</td>
</tr>
<tr>
   <td>Bye</td>
   <td>Bye</td>
</tr>

没有任何 colspan 属性。 Chrome 和 Firefox 都会正确渲染第二行的两个单元格，然后留下“3 TRs of empty space”。

我的问题是： 这在 HTML 中是否实际上在语法上是允许的，或者浏览器只是“自动修复”？

【问题讨论】：

将td 视为单元格而不是列：毕竟，td 可以跨越multiple columns；所以不相等的数量是完全可以的。
这能回答你的问题吗？ Can HTML table have variable number of cells on rows?

标签： html

【解决方案1】：

创建 HTML 表格时，标题和单元格的数量必须相等。

<table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
</table>

在向用户显示数据时，浏览器总是试图修复错误的 HTML。

<table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>94</td>
    </tr>
</table>

这将正确显示给用户，但它是无效的 HTML 代码。

要确保您的 HTML 完全正确，请尝试 XHTML。

什么是 XHTML？

XHTML 代表可扩展超文本标记语言
XHTML 几乎与 HTML 相同
XHTML 比 HTML 更严格
XHTML 是定义为 XML 应用程序的 HTML
所有主流浏览器都支持 XHTML

这是一个糟糕的 XHTML 示例：

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

这是一个很好的 XHTML 版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title of document</title>
</head>

<body>
  some content
</body>

</html>

您可以通过XHTML Validator like this one 验证您的代码。

有关表格及其工作方式的更多信息，请查看W3 page of tables。

W3Schools Tables W3Schools XHTML

【讨论】：

【解决方案2】：

从技术上讲，这不是有效的 html。如果您通过 html 验证器运行它，例如

https://validator.w3.org/

你会得到这个错误：

表格行宽 2 列，小于列数由第一行 (5) 建立。

<table>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
  </tr>
  <tr>
    <td>Bye</td>
    <td>Bye</td>
  </tr>
</table>

所有现代浏览器都会正确呈现此内容，但如果您想拥有有效的 html，请使用 colspan 来平衡行数：

<table>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
    <td>Hi</td>
  </tr>
  <tr>
    <td>Bye</td>
    <td colspan="4">Bye</td>
  </tr>
</table>

【讨论】：

嗯，这不是一个错误，而是一个“警告”......如果可能的话，我想保持原样（它是自动生成的内容，例如可能以 5 tds 结尾在第一行但在第二行中的 1），但如果它实际上是不正确的 html，我会修复它。规范中有明确的词吗？