Post History

How to set text-align for whole column of HTML table?

To start off, here is the complete HTML of a simple example table:

<pre>
&lt;html lang="en-US"&gt;
&lt;head&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;style&gt;
    table {
      width: 20em;
      table-layout: fixed;
      border-collapse: collapse;
      text-align: center;
      }
    td {
      border: black solid 0.1em;
      }
    &lt;/style&gt;
  &lt;/head&gt;
&lt;body&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;A
      &lt;th&gt;B
      &lt;th&gt;C
    &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;aardvark
      &lt;td&gt;bale
      &lt;td&gt;crab
    &lt;tr&gt;
      &lt;td&gt;apple
      &lt;td&gt;blade
      &lt;td&gt;crib
    &lt;/tbody&gt;
  &lt;/table&gt;

&lt;/body&gt;&lt;/html&gt;

</pre>

This results in the following table, as expected:

<img src="https://software.codidact.com/uploads/SF1y8kyq3yv3b4Nae27HfHKn">

W3SCHOOLS says the following about the &lt;col&gt; tag: <blockquote>
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.</blockquote>

That makes sense.  As an example, I inserted the following HTML after TABLE and before THEAD:

<pre>
  &lt;colgroup&gt;
    &lt;col&gt;
    &lt;col style="background-color:red"&gt;
    &lt;col&gt;
    &lt;/colgroup&gt;
</pre>

That caused the background of the whole second column to be red, as expected:

<img src="https://software.codidact.com/uploads/gcCcJk5WZ76A5MjM7t8pYQa4">

However, when I try to set the text-align attribute for the same column as a whole

<pre>
    &lt;col style="text-align:left;background-color:red"&gt;
</pre>

it doesn't work.  I get the same display as above.  The second column is still red, so the COL tag isn't getting ignored.  To make sure there wasn't a typo, I copied and pasted the text alignment into the TD tag of one of the table entries:

<pre>
      &lt;td style="text-align:left"&gt;bale
</pre>

The text for that one cell did get left-aligned:

<img src="https://software.codidact.com/uploads/W4XwXtJwKjGjRRwD6TwwCzLV">

I tried various things, but couldn't get a different default alignment for a whole column without having to set it individually for each cell in that column.  That seems to be exactly what COLGROUP and COL are for.  It works for background color, but not text alignment.  What is going on?  How does one set default text alignment in one place for a whole column?

In case it matters, these tests were done with Edge on Windows 10.