Introducing the Table Baseline

Reading Time: 3 minutes

So a while back I released this CSS tool / NPM Package called typography-baseline.css. It was a pretty handy way to kickstart projects because it set some baseline styles to all my typography.

More recently, I’ve come into some situations where I thought, “gee, it’d be nice if I had some starter for tables, too.”

So guess what? Now there’s a table-baseline.css.

Quintessential Pamene kuzindikira ulemu wobadwa nawo komanso ufulu wofanana ndi wosatha wa anthu onse ndiye maziko a ufulu, chilungamo ndi mtendere padziko lonse lapansi,
Pamene kunyalanyaza ndi kunyoza ufulu wa anthu kwachititsa zinthu zankhanza
zomwe zakwiyitsa chikumbumtima cha anthu, ndi kubwera kwa dziko
momwe anthu adzasangalalire ndi ufulu wolankhula, chikhulupiriro, ndi ufulu
kuopa ndi kusowa kwalengezedwa ngati chikhumbo chachikulu cha anthu wamba
,
Pamene ndikofunikira, ngati munthu sakakamizidwa kuti apeze njira yomaliza
yopandukira nkhanza ndi kupondereza, kuti ufulu wa anthu uyenera
kutetezedwa ndi lamulo,
Pamene ndikofunikira kulimbikitsa ubale wabwino pakati pa mayiko,
Pamene anthu a United Nations mu Charter atsimikiziranso chikhulupiriro chawo
mu ufulu wofunikira wa anthu, ulemu ndi kufunika kwa munthu
ndi ufulu wofanana wa amuna ndi akazi ndipo atsimikiza mtima kulimbikitsa
kupita patsogolo kwa anthu ndi miyezo yabwino ya moyo mu ufulu waukulu,
Pamene Mayiko Omwe Ali Mamembala alonjeza kukwaniritsa, mogwirizana
ndi

Introducing the Table Baseline

If you want to see it in action, well, take a look at the table below:

CSS Baselines
Package Name	Repository	Demo?
typography-baseline.css	https://github.com/paceaux/typography-baseline	https://codepen.io/paceaux/pen/grKWWe
typography-baseline.scss	https://github.com/paceaux/typography-baseline.scss
table-baseline.css	https://github.com/paceaux/table-baseline	https://codepen.io/paceaux/pen/KKWwyMa
form-baseline.css	https://github.com/paceaux/form-baseline	https://codepen.io/paceaux/pen/mdmBPPx

You can see it in its raw form on Codepen. There’s a bit more to the table baseline than there is the typography baseline. It accounts for typographical settings, borders, and even some basic backgrounds for alternating rows.

What it’s good for…

Starting your Tables

If you’re still in early in the implementation of a website and are trying to account for the presentation of some typical content types, this will get you started for tables.

You would want this before you start applying some specific branding to your tables.

Covering your table semantics

The HTML used to demo the styles is pulled partly from my own imagination, but also straight from some W3C examples. The HTML tables you see are meant to be a comprehensive example of how to cover a variety of ways to implement tables. You’ll see basic examples, cases with multiple tbody, use of col and colgroup, along with attributes used to denote column and row headers.

The HTML examples are as much a test of the CSS as they are a demo to you (and me) of the many ways to create good semantic, accessible tables.

It’s for “no-design” designs

If you’ve been on my blog before, you’ll notice that there ain’t much to it. No pictures, animations, delightful backgrounds; it’s text and a basic layout.

The table baseline is extremely useful if you’re building some tooling that requires showing stuff in a table, but you don’t want to think about making the table pretty.

This is a low-opinion approach that can work with, or independently of, the typography baseline. It focuses on text sizing, borders, padding, and decent visual appeal.

It’s Fairly Unopinionated

Focuses on text and spacing so it doesn’t disrupt layout
Styles with the lowest possible specificity so it’s easy to drop mid-stream on a project (almost everything is 0,0,1)
Uses the same neutral color palette from typography baseline so it can blend in to your specific color scheme
Written in good ol’ fashioned CSS so you don’t have to upset your lovely LESS/SASS/STYLUS/POSTCSS build
Uses CSS variables so that you don’t have to raise specificity in a ridiculous way

Now, unopinionated doesn’t mean no opinions. I did make some choices that you’re free to fight me on:

em for font-size and a unitless line-height
rem for any left/right spacing
Table Captions are capitalized and italicized
Table borders are two pixels
Table cells are left-aligned
Golden ratio sprinkled about (.618 / 1.618)
Empty td and th have 0 padding and 0 border-width

It’s the non-codependent friend of the Typography Baseline

This is probably the big deal that sets it apart from Bootstrap and other frameworks. As a baseline it’s meant to just set your base styles. You may not want the typography baseline, and that’s 100% a-ok.

The table baseline takes advantage of CSS variables and their ability to have a default value. This means it sets up its own set of variables that could use variables set by the Typography Baseline, if it’s there. If not, it’s got the original version there.

And similar to how the typography baseline sets all of the variables on :root, this sets all of the variables on table

table {
    /*=====
        #Text #Size
    =====*/

    --tableBiggestTextSize: var(--biggerTextSize, 1.2em);
    --tableBiggerTextSize: var(--bigTextSize, 1.1em);
    --tableBaseTextSize: var(--smallTextSize, .8em);
    --tableSmallerTextSize: var(--smallerTextSize, .75em);
    --tableSmallestTextSize: var(--smallerTextSize, .618em);

    /*=====
        #Title #Size
    =====*/
    --tableBiggestTitleSize: var(--baseTitleSize, 1.5em);
    --tableBiggerTitleSize: var(--biggestTextSize, 1.3em);
    --tableBaseTitleSize: var(--tableBiggestTextSize);
    --tableSmallerTitleSize: var(--tableBiggerTextSize);
    --tableSmallestTitleSize: var(--tableBaseTextSize);
}

Try it out

Fork it on Github, play with it on Codepen, or add it to your project with npm i table-baseline.css. I’ve used this with great success on personal projects and with clients, some of whom are on the Fortune 1000 list.