对齐 table 列组中的文本 HTML5

Question

我试图在我的 table 的一组列中对齐（居中）内容。我了解了 colgroup 和 col 元素（以前从未使用过）。我了解到那些元素具有 align 属性，但现在在 HTML 中它已经消失了。

我在 w3school 服务上看到了这条注释：

Compatibility Notes

The align attribute of is not supported in HTML5. Use CSS instead.

CSS syntax: <td style="text-align:right">

这是否意味着 column/column 组的对齐功能已被删除，现在我必须在该列的每个单元格上放置 style/class 元素？那么 col 和 colgroup 元素可以用来做什么呢？我看到设置 background-color 仍然有效。还有什么吗？

P.S。这是一个糟糕的体验，了解一个功能并立即学习，实际上你已经不能使用它了：/

编辑：正如@JLe 所问，我添加了这个示例代码：

<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;"></td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;"></td>
    </tr>
  </tbody>
</table>

所以我能够通过单元格样式将黄色单元格的内容居中，但我想问是否有办法像我对红色列所做的那样将该对齐代码放入 colgroup，但它肯定不行。

Answer 1

也许我应该在评论中更清楚地说明这一点，但是不，你不能使用 col 对其进行文本对齐。它不符合规范。

您可以改为使用 CSS 对齐每个 tr 元素的不同子元素，因为这在某种程度上是相同的。

<style>
    tr td:nth-child(-n+2) {
        text-align: center;
    }
</style>
<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;"></td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;"></td>
    </tr>
  </tbody>
</table>

要创建更高级的 select 或者您可以加入它们，创建一个 AND 语句（或就此而言并集）。因此，对于序列中的 select 元素 2-5，创建一个 select 或者 select 前五个，以及一个 select 2, 3, ...直到最后：

tr td:nth-child(-n+5):nth-child(n+2) {
  background-color: red;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

对齐 table 列组中的文本 HTML5

Aligning text in table column group in HTML5

html

css

text-align

col

colgroup