当前位置：文江博客话题详情

HTML col

html 是吗？已弃用？

发布于 2024-10-21 06:21:44 字数 2274 浏览 5 评论 0 原文

我正在查看使用 < 的 W3Schools 演示/code> 元素来对齐列：

<table width="100%" 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（怪异模式）：在此处输入图像描述

有趣的是，使用了< /strong> 在浏览器中工作，该功能在 ie8 中被取消。（而 Chrome，作为所有事物完美仲裁者的地位，并不支持它。）

这让我想知道是否不是应该的 去工作。

是否已被弃用？

更新一据

我所知，它尚未被正式弃用。但事实上，浏览器曾经支持它，然后停止支持它，这让我相信我错过了一些历史故事。我认为 IE 有意删除了对 colalign 的支持，并且其他浏览器持续缺乏支持，这表明正在发生一些事情。

更新二

我错误地认为缺乏对所有功能的支持意味着本身不受支持。我错误地认为，因为我尝试的唯一属性不起作用：该元素不起作用。这是我的错误；事后看来，我应该询问“COLalign”是否已被弃用（事实确实如此）。

在我的辩护中，我假设一个例子会显示什么“不再”起作用。

另请参阅

原文

i'm looking at the W3Schools demo of using the <COL> element to align columns:

<table width="100%" 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>

And browser's rendering of it is not encouraging:

Chrome (10.0.648.127):
enter image description here

FireFox (3.6.8):
enter image description here

Internet Explorer 9 (standards mode):
enter image description here

Internet Explorer 8 (standards mode):
enter image description here

Internet Explorer 7 (standards mode):
enter image description here

Internet Explorer (quirks mode):
enter image description here

It's interesting to note that <COL align> used to work in browsers, and the feature was taken away in ie8. (And Chrome, with position of being the arbiter of all things perfect, doesn't support it.)

This makes me wonder if <COL align> is something that's not supposed to work.

Has <COL align> been deprecated?

Update One

i understand that it hasn't been formally deprecated. But the fact that browsers used to support it, then stopped supporting it makes me believe that there is some historical story that i'm missing. i assume the intentional removal of col align support from IE, and the continued lack of support from other browsers, indicates something is going on.

Update Two

i was mistakenly assuming lack of support for all features of <COL> meant <COL> itself isn't supported. i mistakenly assumed that since the only attribute i was trying wasn't working: that the element wasn't working. This was my mistake; and in hindsight i should have asked if "COL align" is deprecated (which it is).

In my defense i assumed an example would have been shown what wasn't working "anymore".

另外，值得注意的是，在标记上使用 CSS 无法获得类似的结果。 style 属性（或从 id、class 等诱导的样式）仅考虑合理应用于列本身的属性。也就是说，虽然每个可以包含文本内容，因此可以设置诸如 text-align 之类的属性，但可以包含文本内容。元素不包含文本，因此没有任何文本级样式适用。（像 background-color 这样的块级内容仍然有效。）

但是，在不涉及 colspan 或 rowspan 的基本情况下，您可以选择以下块：通过使用 CSS 伪类 :nth-of-type 来实现（以及某种意义上的“列”）。例如，要将表格的第三列与类 c3 居中，请使用

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

Edit by OP:

From HTML 标准：

16 过时的功能

[...]

16.2 不合格特征

以下属性已过时（尽管元素仍然是语言的一部分），并且作者不得使用：
...
对齐 col 元素
...

使用 CSS 代替。

WHATWG wiki 为各种过时的演示属性提供了一些推荐的替代方案：

属性 CSS 等效项
===================== =============================== ========
在适当的 td/th 上对齐 col 元素“text-align”

Yes, the align attribute of <col /> no longer appears in HTML5. Says the spec!

Also, it's worth noting that you can't achieve a similar result using CSS on the <col /> tag. The style attribute (or induced style from id, class, etc.) only takes into account properties that sensibly apply to the column itself. That is, while each <td /> can contain text content and thus can have attributes like text-align set, the <col /> element does not contain text and thus none of the text-level styles apply. (Block-level stuff like background-color still works.)

However, in basic cases not involving colspan or rowspan, you can select blocks of <td />s (and thus "columns" in a sense) by using the CSS pseudo-class :nth-of-type. E.g. to center the third column of the table with class c3 use

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

Edit by OP:

From the HTML Standard:

16 Obsolete features

[...]

16.2 Non-conforming features

The following attributes are obsolete (though the elements are still part of the language), and must not be used by authors:
...
align on col elements
...

Use CSS instead.

The WHATWG wiki gives some recommended alternatives for various obsolete presentational attributes:

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

回复收藏 0 原文

爱*していゐ 2024-10-28 06:21:44

尝试

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

呈现为：

在此处输入图像描述

Try

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

Which renders as:

enter image description here

回复收藏 0 原文