首页 > 解决方案 > 每个人都需要等量的 s 吗?

问题描述

假设我有

<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 中是否在语法上允许,或者浏览器仅仅是“自动修复”?

标签: html

解决方案


创建 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上验证您的代码。

有关表格及其工作原理的更多信息,请查看表格的 W3 页面

W3Schools 表格 W3Schools XHTML


推荐阅读