Tables in CSS: The ultimate style guide

No Comments

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

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

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:

NameBirthday
Max Mustermann01.01.2000
Mia Musterfrau10.10.2010

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

And the next image visualizes them in an example table.

tables in css: terminology

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.

NameBirthday
Max Mustermann01.01.2000
Mia Musterfrau10.10.2010

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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;
}
idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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;
}
idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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:

idfirst_namelast_nameemailgenderbirthdate
1BryonBeszantbbeszant0@theguardian.comMale7/26/1984
2WillyDavidsohnwdavidsohn1@ucoz.comMale2/12/1986
3ReidarScullyrscully2@state.tx.usMale7/22/1989
4ClarineAbbisoncabbison3@php.netFemale10/14/1981
5TeddieWoolftwoolf4@xing.comMale5/20/1985
6RenePiggotrpiggot5@dell.comMale8/29/1981
7ErikaBreckwellebreckwell6@virginia.eduFemale4/29/1989
8NerteSassernsasser7@elpais.comFemale8/30/1994
9DeeanneBowkerdbowker8@archive.orgFemale12/4/1989
10ReinaFeeneyrfeeney9@surveymonkey.comFemale11/19/1995

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!).

Discussion (0)

Add Comment

Your email address will not be published.