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

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:

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