From d2e4da10c806d815eded44ade076babb78802c16 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 22 Jan 2024 13:06:19 -0500 Subject: Initial commit to new cgit platform --- _posts/2022-10-26-html-tables.md | 120 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 _posts/2022-10-26-html-tables.md (limited to '_posts/2022-10-26-html-tables.md') diff --git a/_posts/2022-10-26-html-tables.md b/_posts/2022-10-26-html-tables.md new file mode 100644 index 0000000..b45894a --- /dev/null +++ b/_posts/2022-10-26-html-tables.md @@ -0,0 +1,120 @@ +--- +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 1Table Header 2Table Header 3Table Header 4
Table Header 3.1Table Header 3.2
Table Body 1Table Body 2Table Body 3.1Table Body 3.2Table 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 [my public inbox](https://lists.sr.ht/~tdarb/public-inbox). Thanks! + +
\ No newline at end of file -- cgit v1.2.3-54-g00ecf