CSS Snippets: How to Style a Table

Published December 4, 2016 by CSS Newbies.

Tables are one of the trickiest and most complex of the “basic” HTML elements. They require a lot of specific tags to create, every browser has its own very different inherent styles for them (this can make styling a nightmare), and they’re not particularly mobile-friendly, at least not unless you really manipulate them with CSS or jQuery. And still, tables aren’t obsolete. While they aren’t used to create layouts like they were before, they’re still very necessary and useful for things like displaying data. If you’re looking for some cool, modern ways to update your tables (and every make them responsive!), check out some of the snippets below:

1. Stylish Data Table

Screen Shot 2016-12-04 at 11.44.38 AM

 

This snippet demonstrates how to create a simple but very sleek and modern table. It also includes some subtle highlighting hover effects and a light box shadow to create the illusion of a floating table element.

2. Basic Data Table

Screen Shot 2016-12-04 at 11.47.11 AM

 

This tutorial demonstrates how to make a very basic data table. It’s much less flashy than the one in the first example, however it still manages to be a clean, modern departure from any default table styles.

3. Responsive Table

Screen Shot 2016-12-04 at 11.50.37 AM

Have you ever struggled with creating a responsive table? If so, this snippet has your answers. The data table created is fully responsive so that it works when it’s viewed at full size, but if the screen shrinks the cells rearrange so that the data not only fits within a smaller viewport, but can also still be read logically at that size.

4. Pure CSS Table with Highlight

Screen Shot 2016-12-04 at 11.53.13 AM

 

This stylish table comes with very cool highlight effects that appear when a cell is hovered upon. It’s pure CSS so it’s very lightweight and easy to customize and add to any of your projects.

5. Table with Fixed Header

Screen Shot 2016-12-04 at 11.55.21 AM

 

The great thing about this table snippet is that it creates a table where the header is fixed, so no matter how far you scroll down through the data, the header always remains at the top, in case you need to reference which data belongs to which column or category.

Leave a Reply

Your email address will not be published. Required fields are marked *