Tables in CSS: The ultimate style guide

Do you want to learn how to change the style of your tables in CSS? Then you are in the right place. In this post, we will look at how to create a table, how to style specific components, and lastly, how to make it responsive!

• Create a table with HTML
• Style Tables in CSS
  • Remove Spaces between Cells
  • Style Rows in CSS Tables
  • Style Columns in CSS Tables
  • Style Cells in CSS Tables
  • Combine Row, Column and Cell Effects
• Make the Table Responsive in CSS
• Conclusion

Create a Table with HTML

The first step in styling a table is creating one. This is possible by using the following HTML tags:

• table = table container
• tr = table row
• th = table header
• td = table data

These tags work together as follows. First, we create the table element as the container for the whole table. Then we define the number of rows the table should have by using the table row tags (tr). Inside the first row, we define header (th) elements, and inside the others, we define the values inside the data (td) elements.

For example, the HTML could look like this:

<table>
    <tr>
        <th>Name</th><th>Birthday</th>
    </tr>
    <tr>
        <td>Max Mustermann</td><td>01.01.2000</td>
    </tr>
    <tr>
        <td>Mia Musterfrau</td><td>10.10.2010</td>
    </tr>
</table>

and produce the following result:

Style Tables in CSS

Styling tables in CSS has many aspects, including styling the various columns, rows, and even cells. For the styling of rows, columns, and cells, we will use this table because it has more opportunities to show different stylings:

To get the code, check out the GitHub repository here.

To better understand the following styling, we have to decide on terminology for the different table elements. We have the terms:

If this guide is helpful to you and you like what I do, please support me with a coffee!

• row
• column
• cell

And the next image visualizes them in an example table.

Lastly, before we get started, you should have a basic understanding of CSS and some of the available properties. In case you do not have them yet, don’t worry. You can learn them in my blog post on CSS basics here.

Remove Space between Cells

First of all, before we start styling the tables, we will remove unwanted spaces between cells. You can do that by using the cellspacing attribute of the table element. For example, to completely remove the spaces, use it like this:

<table cellspacing="0">

To visualize the difference, we have two tables, where every cell has a border. On the left side, the cellspacing is greater than 0, and on the right side, it is 0.

Style Rows in CSS Tables

Styling table rows is a pretty intuitive act because you only have to add a style to the table row (tr) elements. For example, you could change the background and text color of some rows by creating a class like this:

.row-style {
    color: darkslategrey;
    background-color: lightblue;
}

and applying the class to the second row of the table:

But of course, you can also create more complex styles and interactions. The following examples will give you an idea of how it works:

Every second row

To create the well-known zebra effect, we can use the pseudo-class nth-element. As the name suggests, it applies the style to every nth row of the table. To learn more about pseudo-classes check out my post on CSS basics here.

The following style applies the zebra effect for a table with the id zebra-h:

#zebra-h tr:nth-child(even) {
    color: darkslategrey;
    background-color: lightblue;
}

The visual result is this:

Row hover effect

To add some interactive elements, we can use the CSS hover selector. The following style will add a nice hover effect for the row the user is currently on:

#hover-h tr:hover {
    color: darkslategrey;
    background-color: lightblue;
}

Style Columns in CSS Tables

Styling a table column is more complicated because the table is created with rows in mind. You have to add a certain style to all cells in one column to style a whole column. In the following example, we change the style of the second column in our table:

// change the header background
tr th:nth-child(2) {
  background: #ccc;
}

// change the cell background
tr td:nth-child(2) {
  background: #ccc;
}

Like with the rows, we can use this for more complex styles and interactions. The following examples show that:

Every second column

To create the well-known vertical zebra effect, we can use the pseudo-class nth-element of the data elements. So, with the following style, we can make the wanted effect:

#zebra-v tr td:nth-child(odd), #zebra-v tr th:nth-child(odd) {
    color: darkslategrey;
    background-color: lightblue;
}

displayed here:

Column hover effect

To make the columns hoverable, we have to apply multiple styles to the different elements in a table. The solution is taken from here:

#hover-v {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

#hover-v td, #hover-v th {
    cursor: pointer;
    position: relative;
}

#hover-v td:hover::after { 
    background-color: lightblue;
    content: '\\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

This results in the following outcome:

Style Cells in CSS Tables

Styling the individual cells of a table is much easier again. You create a new CSS class and apply it to a particular data element (td):

<td class="effect">Test</td>

Or you can apply a hover effect to all cells of a certain table by using this style:

#hover-c th:hover, #hover-c td:hover {
    color: darkslategrey;
    background-color: lightblue;
}

with the following result:

Combine Row, Column and Cell Effects

We can make a cool interactive effect that lets your table stand out with the following CSS! The effect highlights both the column and the row and, as a bonus, also the cell. The following table is here to showcase the effect:

And you can achieve it with the following CSS:

/* row */
#combine tr:hover {
    color: darkslategrey;
    background-color: lightblue;
}

/* col */
#combine {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

#combine td, #combine th {
    cursor: pointer;
    position: relative;
}

#combine td:hover::after { 
    background-color: lightblue;
    content: '\\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

/* cell */
#combine th:hover, #combine td:hover {
    color: white;
    background-color: darkturquoise;
}

Make the Table Responsive in CSS

After styling our tables in CSS in the way we want, there is just one important point left. How can we make them responsive?

Before we can answer this question, we have to answer what responsive means in the sense of tables. For a basic table, it means that the overflowing content will be accessible through a slider

To enable this, we have to add the overflow-x property to a container around the table (to get the overflow, I applied a lot of padding to the individual cells):

.scrollable {
	overflow-x: auto;
}

With the following HTML:

<div id="scrollable">
    <table>
        <!-- ... -->
    </table>
</div>

This results in the following table with a scrollbar:

To create responsive tables after a specific pattern, you have to use media queries. You can read more about them here.

Conclusion

In this post, we learned a lot about styling our tables. We, first of all, learned how to create a table and then looked at how to style specific aspects. These aspects were rows, columns, and cells. As a bonus, we also created a hover effect that combined styles of all three aspects into one.

I hope this post was helpful for you. In case you want to access the different classes and tables created in this post, you can check them out in this repository here.

Lastly, in case you are interested in more software and web development related stuff, consider subscribing to my newsletter (you will also receive a free e-book as a bonus!).

[convertkit form=2634876]