Styling tables using css

Table CSS Creating beautiful HTML tables with CSS

It’s easy to make your HTML tables look great — in today’s post, we’re gonna take a look at around 30 lines of CSS to do just that!

Video Tutorial

Before I get into it, if you prefer this tutorial in video form, you may watch it on my YouTube channel, dcode, right below.

Writing the HTML

 class="styled-table">   Name Points     Dom 6000   class="active-row"> Melissa 5150   

Styling the table

.styled-table  border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); > 

Most of these are self explanatory but let’s have a look at the main ones:

• box-shadow to add a subtle transparent shadow around the table
• border-collapse to ensure there is no space between the cell borders

Styling the header

For the header, we can simply change the background color and apply some basic styles to the text:

.styled-table thead tr  background-color: #009879; color: #ffffff; text-align: left; > 

Moving onto the table cells

Let’s space things out a bit:

.styled-table th, .styled-table td  padding: 12px 15px; > 

And the table rows.

For these, we want to do 3 things:

1. Add a bottom border to each row for separation
2. Add a lighter background to every second row to help readability
3. Add a dark border to the very last row to signify the end of the table

.styled-table tbody tr  border-bottom: 1px solid #dddddd; > .styled-table tbody tr:nth-of-type(even)  background-color: #f3f3f3; > .styled-table tbody tr:last-of-type  border-bottom: 2px solid #009879; > 

Lastly, let’s make the active row look different

For this, we’re just going to make changes to the text:

.styled-table tbody tr.active-row  font-weight: bold; color: #009879; > 

And that’s it! If you have any suggestions for improvements please let me know in the replies below 😁

Enrol Now 👉 JavaScript DOM Crash Course

If you’re learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Top comments (21)

#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.

If you want your borders to look sharp on high resolution displays you can use thin instead of 1px 🙂

Update! This has apparently changed at some point and you only get regular 1px now (at least on iPhone).

30 likes Like Comment button

Had no idea about this! Thanks 😊

8 likes Like Comment button

Nice, did not know about this! Will be using it for sure 🙂

4 likes Like Comment button

2 likes Like Comment button

Learn something new everyday!

1 like Like Comment button

#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.

Hmm, now that I paid attention to it this doesn’t seem to work anymore on iPhones 🙁

1 like Like Comment button

I really love it. I’m bored of tons of bootstrap-like tables and your guide is such a refreshing approach

7 likes Like Comment button

Appreciate that mate! Cheers

3 likes Like Comment button

I agree with you! Bootstrap is all over the place (even tough i like it and use too)!

2 likes Like Comment button

Hard to believe we once used tables to layout entire pages 🙂

Great example, was there any particular reason you used :nth-of-type instead of nth-child ?

I would be interested to know how you would make this responsive if you had a few more columns or where the data is a little longer.

Источник

CSS Tables

The look of an HTML table can be greatly improved with CSS:

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Try it Yourself »

Table Borders

To specify table borders in CSS, use the border property.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

Full-Width Table

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

Double Borders

To remove double borders, take a look at the example below.

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Источник

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.

Источник