Skip to content

css

How to add fixed headers to a variable-width table

I've been updating my A useless analysis of macOS (OS X) release dates post for nearly 13 years now (OMG). Over the years, the one thing that's bugged me was that I couldn't find a good way to have fixed column headings on that post's incredibly long scrolling table.

I'd search occasionally, and find various solutions—some using two tables, some using JavaScript, some using pages of CSS, etc. But either I couldn't get them working, or they didn't work with variable-width tables, or they didn't seem worth the effort it looked like it would require to make them work.

But now…

Hooray for fixed headers! Read on if you'd like to use this trick yourself…

[continue reading…]



Create CSS gradients using an online tool

I recently needed a gradient background for a page I was making. My usual method of creating gradient backgrounds is to muck around in my image editor until I find some combination I like, then futz around in my text editor getting the syntax just right for CSS gradients across all the browsers.

But then I discovered the Ultimate CSS Gradient Generator from ColorZilla. This handy tool lets you create gradients directly in the browser, and it outputs all the required codes for full browser support. The UI is very much like any image editor's gradient tool:

Drag the slider thumbs, click them to change the colors, click along the gradient to add color stops, etc. This tools works like a charm, and saves me a bit of time and aggravation whenever I need to make a CSS gradient.



Control animated GIF playback on WordPress sites

I wanted to embed an animated GIF in my post about changing the iOS Settings screen. However, because the GIF was about 4MB in size, I didn't want it to auto-load—and in general, I find auto-playing GIFs annoying. I wanted something that would stop and start on click, like this (wonderfully subtle) example GIF

So I did what any WordPress user would do in such a situation: I went looking for a WordPress plug-in that offered control over GIFs.

I initially found WP GIF Player and GIF Animation Preview. Both did what I wanted, mostly, but they added a bunch of their own HTML and CSS, and/or relied on the WordPress media library (which I don't use). After testing both, I just couldn't get them to work with the GIF and the size/position that I wanted to use. Perhaps there are others that would work, but I got frustrated and gave up searching.

[continue reading…]



Center embedded tweets on WordPress sites

WordPress has a neat built-in feature that, when composing a post, if you put the URL to a specific tweet on its own line, like this…

https://twitter.com/rgriff/status/827901296258584576

…then WordPress will automatically convert it to a tweet link, like this:

By default, though, the embedded tweets will be left-aligned. I wanted them center aligned, as above. And because I just wasted 15 minutes figuring this out, I'm documenting the solution here to save myself future aggravations…

[continue reading…]



Got tables? Use TablesGenerator.com

Whether writing here or on Macworld, I often find myself relying on tables to convey lots of data points in an easy-to-read manner. As examples, check out the tables in my Nintendo add-ons pricing rant, or in my analysis on the cost of LED lighting. (Or even in my mother-of-all-tables post on OS X release dates.)

Tables play a key role in all of those articles…but creating tables in HTML (or even Markdown) is, quite simply, a pain in the butt. The syntax is simple enough, but structuring complex tables with some entries spanning multiple rows and/or columns can be time consuming.

Often, too, my work starts in Excel, and it seems like a lot of redundant effort to take Excel's table-based layout and recreate it in an HTML-based table layout. (Excel has an export to HTML function, but the HTML it builds is heavily styled and needs a lot of editing.)

Enter TablesGenerator, an amazing tool for creating tables. Not just HTML tables, but pure text tables, LaTeX tables, and even MediaWiki tables (whatever those might be).

[continue reading…]