Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

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

+8
−0

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

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

<table>
  <thead>
    <tr>
      <th>A
      <th>B
      <th>C
    </thead>
  <tbody>
    <tr>
      <td>aardvark
      <td>bale
      <td>crab
    <tr>
      <td>apple
      <td>blade
      <td>crib
    </tbody>
  </table>

</body></html>

This results in the following table, as expected:

W3SCHOOLS says the following about the <col> tag:

The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

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

  <colgroup>
    <col>
    <col style="background-color:red">
    <col>
    </colgroup>

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

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

    <col style="text-align:left;background-color:red">

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:

      <td style="text-align:left">bale

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

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.

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

2 answers

You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.

+10
−0

You cannot set text-align on a column element

(Well, you can, but it won't have any effect)

There are only a couple of properties that have an effect, namely border, background, width, and visibility.


If you need to style a column outside of those attributes, MDN notes some possible workarounds.

  • To achieve the same effect as the left, center, right or justify values:
    • Do not try to set the text-align property on a selector giving a <col> element. Because <td> elements are not descendant of the <col> element, they won't inherit it.
    • If the table doesn't use a colspan attribute, use the td:nth-child(an+b) CSS selector. Set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column.
    • If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

Eg.

table {
  width: 20em;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}

td {
  border: black solid 0.1em;
}

td:nth-child(2) {
  text-align: left;
}

jsfiddle

If you have greater control over the HTML generation, however, it is probably better to just add a class to the cells in question and style those.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

General comments (1 comment)
+8
−0

In addition to what Moshi already told you:

Among web designers, W3Schools has a somewhat tainted reputation, because it often makes things simpler than they really are. In my experience, this lack of accuracy often causes more wasted work than reading a more reputable source to begin with. My go-to sources are:

  • MDN, for solving practical problems.
  • The W3C standards for understanding why things work the way they do.

Since Moshi has already quoted MDN, all that remains is the W3C standard:

17.3 Columns

Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The following properties apply to column and column-group elements:

  • border The various border properties apply to columns only if 'border-collapse' is set to 'collapse' on the table element. In that case, borders set on columns and column groups are input to the conflict resolution algorithm that selects the border styles at every cell edge.
  • background The background properties set the background for cells in the column, but only if both the cell and row have transparent backgrounds. See "Table layers and transparency."
  • width The 'width' property gives the minimum width for the column.
  • visibility If the 'visibility' of a column is set to 'collapse', none of the cells in the column are rendered, and cells that span into other columns are clipped. In addition, the width of the table is diminished by the width the column would have taken up. See "Dynamic effects" below. Other values for 'visibility' have no effect.

As you can see, text-align is not among these properties, and the explanation of the other properties hints at the reason: To ensure interoperability each column property comes with a conflict resolution algorithm that defines what happens if the property is in conflict with properties specified on other elements.

Now, you might argue that such an algorithm is trivial, for instance like:

the text align of a cell is the property of the cell, row, or column, in that order of preference.

but it's not quite that easy. For instance, what happens if I have a rule like:

th {
    text-align: center;
}

but my column says it should be right aligned. One could argue that the column should win, because the rule is specific to that column. Or that the th should win, because it is specific to the kind of cell. Either could be the author's intent.

In contrast, if the author identifies the cells to be formatted using CSS selectors instead, he can express the relative priority of the various rules as usual in CSS. For instance, he could say:

table.numeric th,
table.numeric td {
  text-align: right;
}
table.numeric th[colspan] {
  text-align: center;
}
table.numeric > tbody > tr > th:first-child {
  text-align: left;   /* row headers */
}

which also allows for much better reuse of layout rules across tables, aiding in achieving a consistent layout.

Ok, with that I'll stop trying to read the minds of the working group. I just wanted to demonstrate that primary sources often contain hints that are invaluable in understanding why things are the way they are.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

General comments (1 comment)

Sign up to answer this question »