Menu
W3 specifies that only four CSS rules are allowed for table columns (with the <col> element) - border, background, width and visibility.
Does anyone know the reasons behind this decision? If you can have borders and backgrounds, why not fonts and colours?
961
Cells within HTML tables can span multiple rows and multiple columns. The cell default is one row and one column.
In the code we are targeting the first row and setting the background color to yellow so that we can get the table style as it was designed. We also added the code to target the first column and set the background color to yellow. This will result in the following : You can set style to specific column by using td:nth-child (columnnumber) .
You can set style to specific column by using td:nth-child (columnnumber). You can also set the background color of the middle column or a row using the same styling tricks like the following code adds a background color to the third coulmn :
Only a limited set of CSS properties applies to columns, and text-align isn't one of them. See "The mystery of why only four properties apply to table columns" for a description of why this is the case. In your simple example, the easiest way to fix it would be to add these rules: That would center all table cells, except the first column.
It got me thinking about back in the day when Bootstrap, Foundation or responsive frameworks did not exist a large number of sites used tables for layout. In this quick tutorial I want to share with you how to style HTML tables and specifically targeting single rows, columns and even specific cell.
Ian Hixie explains in detail here: The mystery of why only four properties apply to table columns. Relevant quote:
The colour of text is dependent on the 'color' property of its element. Unless specified, the 'color' property (basically) defaults to 'inherit', which means "take the value of the parent element".
So for some text in a cell, the colour is determined by the 'color' property of the cell, which is taken from the row, which is taken from the table, which is taken from the table's parent, and so on.
What about the column? Well, the column isn't one of the cell's ancestors, so it never gets a look-in! And therein lies the problem.
162
Just a wild stab in the dark based upon my limited understanding:
I think styling via column related elements is restricted because although <col> and <colgroup> represent columns of cells, it does not actually contain them (they're actually contained by the <tr>s). With this comes issues of precedence and specificity and cascading (since cascading can only be done between contained/ container elements) - when conflicting style rules from the <tr> and <col> (which would be the same level in a multiple inheritance hierarchy) occur - which should the cell actually use?
As to why that particular handful of style attributes is permitted though: no idea.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
