html <COL align> 是不是已弃用?

Posted

技术标签:

【中文标题】html <COL align> 是不是已弃用?【英文标题】:Is html <COL align> deprecated?html <COL align> 是否已弃用? 【发布时间】:2011-07-12 19:15:29 【问题描述】:

我在看W3Schools demo of using the &lt;COL&gt; element to align columns:

<table  border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first html</td>
    <td>$53</td>
  </tr>
</table>

而且浏览器对它的渲染并不令人鼓舞:

Chrome (10.0.648.127):

FireFox (3.6.8):

Internet Explorer 9(标准模式):

Internet Explorer 8(标准模式):

Internet Explorer 7(标准模式):

Internet Explorer(怪癖模式):

有趣的是,&lt;COL align&gt;在浏览器中工作,而该功能在 ie8 中被取消。 (而以完美仲裁者的地位的 Chrome 并不支持它。)

这让我想知道&lt;COL align&gt; 是否不应该工作。

&lt;COL align&gt; 是否已被弃用?


更新一

我了解它尚未被正式弃用。但是浏览器使用支持它,然后停止支持它的事实让我相信我错过了一些历史故事。我认为有意从 IE 中删除 col align 支持,并且继续缺乏其他浏览器的支持,表明正在发生一些事情。

更新二

我错误地假设不支持&lt;COL&gt; 的所有功能意味着不支持&lt;COL&gt; 本身。我错误地认为,因为我尝试的唯一属性不起作用:元素不起作用。这是我的错误;事后看来,我应该问过“COL align”是否已被弃用(确实如此)。

在我的辩护中,我假设一个示例会显示“不再”起作用的东西。

另见

Web Design Group: COL - Table Column W3Schools: HTML &lt;col&gt; tag HTML 4.01 - The col element

【问题讨论】:

请记住,w3school 与 w3c 无关! @Tobiask 这是真的。但是向人们展示一个示例,这不是我自己的代码,作为独立测试很有帮助。 w3fools.com请阅读! @Domenic 这是一个有趣的咆哮网站。问题中引用的 HTML 源代码有什么问题吗? @Domenic 最后,HTML 及其对align 的使用没有任何问题,只是在 HTML5 中 align 已过时。这就是IE停止支持它的原因。虽然 w3fools 可能更喜欢 wiki 编辑的示例,但该页面(在其冗长的投诉列表中)与 COL align 没有争吵。所以真的没有必要在这个特定的 *** 问题上链接到它:因为 w3fools 上没有任何内容适用。如果 HTML 中有 错误,那么对 w3fools 的任何更正都会有所帮助。但既然没有:它不是。 【参考方案1】:

是的,&lt;col /&gt;align 属性不再出现在 HTML5 中。 Says the spec!

另外,值得注意的是,在 &lt;col /&gt; 标记上使用 CSS 无法获得类似的结果。 style 属性(或来自idclass 等的诱导样式)仅考虑适用于列本身的属性。也就是说,虽然每个&lt;td /&gt; 都可以包含文本内容,因此可以设置text-align 之类的属性,但&lt;col /&gt; 元素不包含文本,因此不适用任何文本级样式。 (background-color 之类的块级内容仍然有效。)

但是,在不涉及colspanrowspan 的基本情况下,您可以使用CSS 伪类:nth-of-type 选择&lt;td /&gt;s 的块(因此在某种意义上是“列”)。例如。使用c3 类将表格的第三列居中

table.c3 td:nth-of-type(3)  text-align: center; 

由 OP 编辑​​:

来自The HTML Standard:

15 个过时的功能 15.2 不合格特征

以下属性已过时(尽管元素仍然是语言的一部分),作者不得使用: ... 在 col 元素上对齐 ...

   改用 CSS。

WHATWG wiki 为各种过时的presentational attributes 提供了一些推荐的替代方案:

Attribute              CSS equivalent
=====================  =====================================
align on col elements  'text-align' on the appropriate td/th

【讨论】:

感谢您的链接;我实际上并没有意识到我没有阅读最新的 HTML 规范。 多么垃圾的建议,“将 'text-align' 样式属性添加到该列中的每个单元格。” :// @antisanity 我同意删除align 在我看来是一个错误。 不幸的是,nth-of-type 在当前的浏览器中显然是完全错误的。该规则一旦出现在 CSS 中就会破坏其他不相关的布局,即使它没有应用任何样式。 td:nth-of-type(3) 如果您使用colspan 在多列中显示单元格,则将不起作用。【参考方案2】:

试试

<!doctype html>
<html>
  <head>
    <title>Table</title>
    <style>
      table.foo td:nth-of-type(2) 
        font-style: italic;
      
    </style>
  </head>
  <body>
    <table class="foo">
      <thead>
        <tr> <th>first</th> <th>second</th> </tr>
      </thead>
      <tbody>
        <tr> <td>bar</td> <td>baz</td> </tr>
        <tr> <td>bim</td> <td>buh</td> </tr>
      </tbody>
    </table>
  </body>
<html>

哪个renders as:

【讨论】:

【参考方案3】:

&lt;col&gt; 标签未被弃用。

见:How to use <col> tag correctly and is it supported in all browser? 我认为这个答案澄清了它的用法,并解释了你在使用它时遇到的一些问题。

它是 XHTML 和 HTML 5 的一部分。http://www.tutorialspoint.com/html5/html5_tags.htm

【讨论】:

我知道 XHTML 目前是 1.1。 @David:取决于您所说的“当前”是什么意思。 HTML5(可以使用传统的 HTML 语法或 XHTML 语法编写)还不是 a W3C Recommendation,但它是所有浏览器供应商都在融合的东西,并且没有任何竞争的努力。这是 (X)HTML 的现在和未来。【参考方案4】:

不,它没有,它是 html4 规范和 html5 规范的一部分。

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2

http://dev.w3.org/html5/markup/col.html

http://www.html-5.com/tags/col-tag/

【讨论】:

【参考方案5】:

为了使标记在语义上有意义,您是否考虑过substituting your &lt;col&gt; tags with &lt;colgroup&gt;

&lt;col&gt; 纯粹用于样式,而&lt;colgroup&gt; 可用于对相关列进行分组(也许这就是您打算将其中两个左对齐的原因?)然后您可以将 CSS 应用于各种 colgroup 以相应地设置它们的样式.

【讨论】:

这听起来是个好主意,但您必须发布有效的 html sn-p。我尝试了一下,浏览器会忽略我的 &lt;colgroup class="alignTheseRight"&gt; 上的 css 样式,.alignTheseRight text-align: right; 【参考方案6】:

根据 HTML 规范中的第二个示例表,它是 colgroup,尽管缺少 colgroup 标记。

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

【讨论】:

以上是关于html <COL align> 是不是已弃用?的主要内容,如果未能解决你的问题,请参考以下文章

如何在html col中使用class属性

练习3:京东新闻资讯页

使用AJAX将php信息加载到html doc中

自举网格 - 3列和2行分为2列和3行

react(98)--开启flex布局

html 元素的 ID 是不是始终可从 window 对象获得? [复制]