Question

假设我有

<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语法上允许的还是浏览器仅仅是“自动修复”的内容？

Answer 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

Answer 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>

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

2 个答案: