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
Let's write some boilerplate HTML code for the table.
<table class="styled-table">
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dom</td>
<td>6000</td>
</tr>
<tr class="active-row">
<td>Melissa</td>
<td>5150</td>
</tr>
<!-- and so on... -->
</tbody>
</table>
Notice we have two classes:
-
.styled-table
so we don't tamper with every<table>
on the site -
.active-row
which will be the "active" row - this class is used to highlight a specific row and will get it's own CSS as we'll see soon
Styling the table
Let's target the main <table>
element first:
.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:
- Add a bottom border to each row for separation
- Add a lighter background to every second row to help readability
- 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 (23)
If you want your borders to look sharp on high resolution displays you can use
thin
instead of1px
:)Update! This has apparently changed at some point and you only get regular 1px now (at least on iPhone). But you can use
0.5px
instead to get the same effect.Had no idea about this! Thanks ๐
Nice, did not know about this! Will be using it for sure :)
I second you!
Learn something new everyday!
Hmm, now that I paid attention to it this doesn't seem to work anymore on iPhones :(
Yeah, your right! Thanks๐ค
I really love it. I'm bored of tons of bootstrap-like tables and your guide is such a refreshing approach
Appreciate that mate! Cheers
I agree with you! Bootstrap is all over the place (even tough i like it and use too)!
Hard to believe we once used tables to layout entire pages :)
Great example, was there any particular reason you used
:nth-of-type
instead ofnth-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.
Make readable table headers with CSS
Charanjit Chana ใป May 28 ใป 3 min read
beautiful css...
Thanks for this! :)
I didn't like working with tables, maybe I'll consider them with this your post
Pretty ๐
I use your code in my website. Thank you so much.
what software does he used to code html?
I just went through a html lesson on tables, so I used your styling to go along with it. Thanks!