Skip to content

Tables with PureCSS


This is the last entrance about PureCSS, the CSS framework from Yahoo! , easy to use for those who hate the front-end task. Today, tables!

For our example, let’s use the same table as we did when talking about Twitter Bootstrap. The results is:

purecss_tabla0Let’s start by applying a table style to the table, just by adding the pure-table class, and you’ll get this new look to the table:

tabla con PureCSS

tabla con PureCSS

You can use a few more classes. One of them let you enphatize the information on rows adding the pure-table-horizontal class (the previous image shows column). Another option is to show all lines of the tible using the class pure-table-bordered.

purecss en Tablas

purecss en Tablas

When you have a big table to show, it’s better to use a “zebra” style, just including the pure-table-striped class.

Tabla zebra con PureCSS

Tabla zebra con PureCSS

And … that’s it! Tables get a better looking just by adding a few classes. You can see here the examples.


This is the part of the framework I have use less, and it’s related to grids. In the documentation, you can read that you can use grid classes or unit classes (the number are fractions).

A very usefull detail:

All child elements of a grid must use unit classes, and you can do it with 2 metrics: 5 y 25. So, you have: 1/5, 2/5, 3/5, 4/5 y 5/5 for the 5, y 1/24, 1/12/ 3/24, … and so on. Too many classes for a flexible desing!

To make responsive design, you need to include -r in the classes: pure-g-r, for example. Also, thre framework includes classes to adapt it to mobiles, phone or desktop:pure-hidden-phone, pure-hidden-tablet y pure-hidden-desktop.

To end with, if you don’t create with responsive design is because you don’t want to, not because you don’t have tools!!

After this for entrances, I hope to show you how to use this nice framework, with a very proffesional looking provided by Yahoo, and only CSS.

I hope it can be useful to you, and have a nice day!

Manejando Datos Newsletter

Noticias, entradas, eventos, cursos, … News, entrances, events, courses, …

Gracias por unirte a la newsletter. Thanks for joining the newsletter.