CSS Snippets: How to Style a Table

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.

Units of Measurement: Vmin and Vmax

In CSS there are so many different units that can be used to define the size of your HTML elements. There are fixed units, like px, cm, in, etc, and then there are relative units, like em, rem, vh and vw. Some less popular units (but still just as useful) are vmin and vmax. The […]

Read on...

CSS3’s Text Decoration Property

Screen Shot 2016-11-26 at 2.28.53 PM

Knowing how to add an underline your text and knowing how to remove an underline from your text are equally as important skills to have in CSS (the default style rules in every browser give anchor tags an underline, and knowing how to remove this will go a long way in making your pages look more […]

Read on...

CSS Snippets: Media Queries

We’ve come to a point in web development where if you’re not creating or designing sites that are mobile friendly and responsive, you’re doing something wrong. Responsive design is no-longer optional, as more and more users continue to access the internet via their mobile devices. If you’re just getting started with mobile development (or even […]

Read on...

How to Add Zebra Striping to Your Tables

Screen Shot 2016-11-20 at 10.22.08 AM

With CSS, it’s really easy to add a zebra striping effect to your tables (where every other row is shaded grey — or whatever color you like!) with only ONE simple line of code. Let’s say you have a standard table: The table has four columns and three rows. Maybe you’re like us an don’t […]

Read on...

CSS3’s Margin Property

Screen Shot 2016-11-13 at 10.09.49 AM

In CSS, the margin property is used to create space around elements. Without margins, all of our HTML elements would appear pretty right next to each other, with no spacing in between them, which would make for some unattractive designs. To understand how margins work, take a look at the example below: Without margins, you can […]

Read on...

CSS’s font-stretch Property

CSS’s font-stretch property allows you to expand and condense text. As of right now, the property isn’t supported on any of the major browsers, but it’s still an interesting property to learn about. Here’s how it would look to use it in your CSS: The values that this properties will take are: normal (this is […]

Read on...

Using Images as Backgrounds with CSS3

Screen Shot 2016-11-06 at 3.44.26 PM

With CSS you can make an image the background not only of the entire body of pages, but also of individual elements too. All you need to do is use the background property and provide the path to the image. Let’s say you have this boring page, and you want to punch it up by […]

Read on...

Create Superscript and Subscript Text in CSS

Screen Shot 2016-11-06 at 3.17.36 PM

With CSS3’s vertical-align property, its super easy to create superscript and subscript effects in your HTML text. Often this is done by using inline HTML tags, but that’s not really a great practice. Using CSS rather than HTML to achieve this effect makes your code more flexible and dynamic, especially if there are a lot […]

Read on...

How to Use CSS3’s Text-Align Property

Screen Shot 2016-10-30 at 2.51.09 PM

CSS3’s text-align property defines how text should be horizontally aligned in relation to its parent element. You can use it to align text left (this is the default value), center, or right. The default value (text-align: left) is shown above. Here’s how you would center align text: To align your text to the right, use […]

Read on...