Css for designing tables

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

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:

Need help or want to share feedback? Join my discord community!

 
 
Name
Birthday
 
 
Max Mustermann
01.01.2000
 
 
Mia Musterfrau
10.10.2010
 
 

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:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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:

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

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:

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:

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

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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:

The visual result is this:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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)

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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)

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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

This results in the following outcome:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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):

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

with the following result:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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

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):

This results in the following table with a scrollbar:

id	first_name	last_name	email	gender	birthdate
1	Bryon	Beszant	bbeszant0@theguardian.com	Male	7/26/1984
2	Willy	Davidsohn	wdavidsohn1@ucoz.com	Male	2/12/1986
3	Reidar	Scully	rscully2@state.tx.us	Male	7/22/1989
4	Clarine	Abbison	cabbison3@php.net	Female	10/14/1981
5	Teddie	Woolf	twoolf4@xing.com	Male	5/20/1985
6	Rene	Piggot	rpiggot5@dell.com	Male	8/29/1981
7	Erika	Breckwell	ebreckwell6@virginia.edu	Female	4/29/1989
8	Nerte	Sasser	nsasser7@elpais.com	Female	8/30/1994
9	Deeanne	Bowker	dbowker8@archive.org	Female	12/4/1989
10	Reina	Feeney	rfeeney9@surveymonkey.com	Female	11/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!).

Источник

CSS Table Style

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example

Table Color

The example below specifies the background color and text color of elements:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник