a UX cocktail with a southern twist

Tables Tabullar data rules the World

Tables are automatically styled with only a few borders to ensure readability and maintain structure. The .table class is required.

Name Album
Big Sam´s Funky Nation Peace, Love & Understanding
Galactic Carnivale Electricos
Meschiya Lake and the Little Big Horns Lucky Devill

Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

Name Album
Bo Dollis & The Wild Magnolias 1313 Hoodoo Street
Dr. John Dr. John´s Gumbo
Professor Longhair Tipitina

Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

Name Album
Stanton Moore All Kooked Out!
The Dirty Dozen Brass Band This is Jazz
The Soul Rebels Unlock Your Mind

Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

Name Album
The New Orleans Jazz Vipers Live on Frenchmen Street
Trombone Shorty Backtown
Youngblood Brass Band Is that a riot?

Gradient header

Es posible añadir un fondo degradado a los encabezados de columnas añadiendo la clase .table-gradient.

Name Album
The Meters Funkify your Life
Tuba Skinny Garbage Men
Kermit Ruffins hapy Talk

More table options...

Además de las clases ya explicadas, podemos dar anchos a las celdas de nuestras tablas. Para ello existen las clases .cell-* que con el mismo ancho que las columnas del grid, nos pueden ayudar a ajustar las divisiones de nuestras celdas.

cell-1 cell-2 cell-3 cell-1 cell-1
1 2 3 1 1