Table CSS Creating beautiful HTML tables with CSS

#html #css #webdev #design

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 (24)

Vesa Piittinen • Jul 20 '20 • Edited

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). But you can use 0.5px instead to get the same effect.