Highlighting columns in HTML tables
source link: https://www.matuzo.at/blog/highlighting-columns/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Highlighting columns in HTML tables
posted on March 20., 2021
The col
element allows us to style columns in tables.
In the past, I’ve used the colgroup
and col
elements to define max-widths for columns in tables when I didn’t want to rely on the default algorithm for distribution of widths, usually when building templates for e-mail newsletters.
A simple table with dummy content
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First cell</td>
<td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolor delectus. Modi accusamus id magni.</td>
<td>Last cell</td>
</tr>
</tbody>
</table>
First column Second column Third column First cell Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolor delectus. Modi accusamus id magni. Last cell
A simple table with dummy content and a fixed width for the first and last column
<table>
<colgroup>
<col style="width: 150px">
<col>
<col style="width: 150px">
</colgroup>
<thead>
…
</table>
First column
Second column
Third column
First cell
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolor delectus. Modi accusamus id magni.
Last cell
Styling columns
The other day I looked up colgroup on MDN because something didn’t work the way I expected it to work. I found the solution to my problem, but the demo at the beginning of the page also caught my attention. The author adds a class to the col
element, which does nothing with the col
element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.
Why is this interesting? Well, there are no columns in HTML tables, only rows and cells and the col
element allows us to style columns anyway.
.highlight {
background: #dedede;
}
<table>
<caption>Frequency and average use of heading elements.</caption>
<colgroup>
<col>
<col class="highlight">
<col>
</colgroup>
<thead>
<tr>
<th>Heading</th>
<th>Occurrences</th>
<th>Average per page</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>h1</code></td>
<td>10,524,810</td>
<td>1.66</td>
</tr>
…
Frequency and average use of heading elements.
Heading
Occurrences
Average per page
h1
10,524,810
1.66
h2
37,312,338
5.88
h3
44,135,313
6.96
h4
20,473,598
3.23
h5
8,594,500
1.36
h6
3,527,470
0.56
h7
30,073
0.005
h8
9,266
0.0015
That’s pretty cool, but what’s even better is that we can let users decide which column they want to highlight and they can even share a link to the table with a specific column highlighted.
We can do that by adding id
s to the col
elements and styling them differently, if the id
matches the URL’s fragment (#myid).
col:target {
background: #dedede;
}
<table>
<caption>Frequency and average use of heading elements.</caption>
<colgroup>
<col id="table1-heading">
<col id="table1-occurrences">
<col id="table1-average">
</colgroup>
<thead>
<tr>
<th><a href="#table1-heading">Heading</a></th>
<th><a href="#table1-occurrences">Occurrences</a></th>
<th><a href="#table1-average">Average per page</a></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>h1</code></td>
<td>10,524,810</td>
<td>1.66</td>
</tr>
<tr>
<td><code>h2</code></td>
<td>37,312,338</td>
<td>5.88</td>
</tr>
<tr>
<td><code>h3</code></td>
<td>44,135,313</td>
<td>6.96</td>
</tr>
<tr>
<td><code>h4</code></td>
<td>20,473,598</td>
<td>3.23</td>
</tr>
<tr>
<td><code>h5</code></td>
<td>8,594,500</td>
<td>1.36</td>
</tr>
<tr>
<td><code>h6</code></td>
<td>3,527,470</td>
<td>0.56</td>
</tr>
<tr>
<td><code>h7</code></td>
<td>30,073</td>
<td>0.005</td>
</tr>
<tr>
<td><code>h8</code></td>
<td>9,266</td>
<td>0.0015</td>
</tr>
</tbody>
</table>
Click on any of the table headings and refresh the page to see it in action.
Frequency and average use of heading elements. Heading Occurrences Average per pageh1
10,524,810
1.66
h2
37,312,338
5.88
h3
44,135,313
6.96
h4
20,473,598
3.23
h5
8,594,500
1.36
h6
3,527,470
0.56
h7
30,073
0.005
h8
9,266
0.0015
Notes on accessibility: 1. I’m not sure if using links in table headings is the best idea. At least, they need better labels to provide users with context. 2. This technique only highlights columns visually, not semantically.
Data from: Web Almanac 2020: Markup
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK