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?
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.
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.
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:
borderThe 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.backgroundThe 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."widthThe 'width' property gives the minimum width for the column.visibilityIf 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.
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,rightorjustifyvalues:
- 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
colspanattribute, use thetd:nth-child(an+b)CSS selector. Setato zero andbto 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
colspanattribute, 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;
}
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.
0 comment threads