8

How to align all columns by colgroup? It works with colspan?

Example

This HTML here was tested with Firefox and Chrome, but no browser renderize the center for all expected columns.

  <table border="1" width="100%">
    <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
    </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>3476896</td>
      <td>My first HTML</td>
      <td align="center">$53</td>
    </tr>
    <tr>
      <td><big>5869207</big></td>
      <td>My first CSS</td>
      <td><small>$49</small></td>
    </tr>
  </table>

Use this example (copy/paste to) at w3schools.com/tags.

PS: What is wrong with align and valign attributes? Style (by text-align) also not responding.

EDIT

As I said above, I need a solution "by colgroup". It can be also "by colgroup or col tags with style attribute".

My template system need to use colgroup (!), not is valid a solution without colgroup. My system not need to compatiple with HTML5, it uses something like "XHTML module" (see ex. DTD).

Related questions

  • Is html <COL align> deprecated? : not the same, because my problem is about XHTML, not about HTML5 (that is not XML and is a "plan for future standard").
4

4 回答 4

5

如果您查看http://www.w3schools.com/tags/tag_colgroup.asp，您会发现该标签从 html5 开始基本上已被淘汰。由于您的 doctype 设置为 HTML5，因此您的对齐可能不起作用。在实践中，使用出门在外的标签并不好，但如果您必须使用它，请尝试将您的 doctype 设置为 html 4，否则我会推荐 Kontakt 所说的并使用 CSS 选择器：nth-​​child。

编辑：我进一步研究并做了一些测试。设置文档类型

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

然后在IE7中运行它。你会看到它有效！即使您的 doctype 设置为低于 4，似乎许多浏览器也不支持它。但是 good'ol IE7 仍然呈现它。只能说它是一个已弃用的标签，由于很久以前就不受支持，因此无法正常工作。

于 2013-05-30T19:06:07.457 回答
4

为什么不在 td 元素上使用 :nth-child(x) ？

在 HEAD 部分的示例中添加以下代码：

<style type='text/css'>
 tr td:nth-child(3) {
  text-align:center;
 }
</style>

并查看对第三列的更改。

于 2013-05-30T16:03:18.970 回答
1

好吧，感谢所有答案和线索。我的结论，关于colgroup，是

  1. HTML 必须符合标准（XHTML1.0、XHTML1.1 或 HTML4.X）；

  2. ...但只有一种浏览器 ( Opera ) 符合标准。
    （MS-IE 没有“标准兼容”的传统，我们可以忽略 IE7 令人惊讶的案例）

“如何通过 colgroup 使列居中？ ”：遵循标准说明......所以，我的 HTML 代码（在这个问题介绍中）一直都是正确的！我的错误是想在任何网络浏览器上看到它！

一些“正确的问题”是（示例）：

  • 为什么其他浏览器没有实现colgroup标准行为？在@ns47731 的回答中，我们看到了一些线索。也许网络浏览器开发人员期待的是 HTML5 而不是 XHTML2。另请参阅下面的@Alohci 评论。

  • 为什么HTML5和XHTML2提案存在分歧colgroup？ 答案没有线索... 我的假设：XHTML2 和 HTML5 不会 100% 兼容。

  • 我可以与我的“模板系统开发人员”（XSLT 开发人员）协商添加这个“符合 XHTML1 标准的功能”吗？:-) 请在PMC 文章预览器 大厅帮助我。

于 2013-06-05T22:38:57.627 回答
1 
 <table border="1" width="100%">
 <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
 </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <th>3476896</th>
      <th>My first HTML</th>
      <th>$53</th>
    </tr>
    <tr>
      <th><big>5869207</big></th>
      <th>My first CSS</th>
      <th><small>$49</small></th>
    </tr>
  </table>

这至少将您的文本集中在单元格中，但就像 ns47731 一样，它是一个已弃用的标签，所以不能期望太多。

于 2013-06-05T19:05:51.970 回答