---
title: "Customizing HTML Tables"
layout: post
summary: "A quick tutorial on how to manipulate tables for better data visualizations"
---
**Editor's note:** My plan is to have this article exist as a "living document". Corrections and additions will be made whenever it is deemed necessary. Last update: **October 26, 2022**
---
**I love working with HTML tables.**
That isn't something you hear very often in the world of web development, especially from a *designer*. But it's true - I think HTML tables can be awesome. I believe their poor reputation is ill-deserved.
Something I do notice however, whenever I stumble across tables in the wild, is the lack of experimentation or the use of more complex layouts. I've mentioned in a previous article on how to properly [design responsive tables with minimal CSS](/blog/responsive-tables/), so why not expand even further with more table design "tricks"?
**Table of Contents**:
1. [Sticky Table Headers](#sticky-table-headers)
2. [Child Table Headers](#child-table-headers)
3. [Table Footers](#table-footers)
## Sticky Table Headers
In the golden age of the web, developers needed to cobble together some JavaScript in order for table headings to "follow" the user as they scrolled. This was particularly useful for large datasets that took up enormous amounts of vertical space.
Luckily for us this can now be achieved with some very basic CSS.
```css
table {
position: relative;
}
thead {
position: sticky;
top: 0;
}
```
See the Pen
HTML Tables: Sticky Table Headers by Bradley Taunt (@bradleytaunt)
on CodePen.
That's it! Best of all, this implementation works across [all major browsers](https://caniuse.com/css-sticky).
## Child Table Headers
I find that "child" header columns are often underutilized when trying to display more detailed datasets in HTML tables. They are relatively easy to implement once you wrap your head around "rows" and "columns".
Let's take a look at the basic HTML:
```html
| Table Header 1 |
Table Header 2 |
Table Header 3 |
Table Header 4 |
| Table Header 3.1 |
Table Header 3.2 |
| Table Body 1 |
Table Body 2 |
Table Body 3.1 |
Table Body 3.2 |
Table Body 4 |
```
The two HTML parameters that makes the magic happen are `rowspan` and `colspan`. We are essentially telling the browser to make the `th` elements with `rowspan` parameters *taller* and those with `colspan` *wider*. If that oversimplified explanation seems silly, then the [official documentation will suit you better](https://www.w3schools.com/tags/att_td_rowspan.asp).
It is important to remember that the `tbody tr` elements will outnumber the amount of listed `thead tr` elements. This is because the header with the child elements is technically "splitting" itself into additional columns. You can see a live example below:
See the Pen
HTML Tables: Child Table Header Columns by Bradley Taunt (@bradleytaunt)
on CodePen.
## Table Footers
Although not the most useful feature, I find that table footer elements are also overlooked for things like subtotals or final values. You can include these just as you would `thead` or `tbody` elements:
```html
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
Table Footer 4 |
```
You can see it in action below. Don't forget - you could always make your `tfoot` *sticky* in order to always show your users a subtotal, etc. even when scrolling through the data.
See the Pen
HTML Tables: Table Footers by Bradley Taunt (@bradleytaunt)
on CodePen.
## Contribute
If you would like to add any of your own table "hacks" or if you see any glaring mistakes, please reach out to me directly via [email](mailto:bt@btxx.org). Thanks!