DEV Community

loading...
Cover image for Creating beautiful HTML tables with CSS

Table CSS Creating beautiful HTML tables with CSS

dcodeyt profile image Dom (dcode) ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Moving onto the table cells

Let's space things out a bit:

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (18)

Collapse
merri profile image
Vesa Piittinen

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

Collapse
dcodeyt profile image
Dom (dcode) Author

Had no idea about this! Thanks 😊

Collapse
nombrekeff profile image
Keff

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

Collapse
hyaovi profile image
Yaovi

I second you!

Collapse
cchana profile image
Charanjit Chana

Learn something new everyday!

Collapse
shzcoders profile image
Shiraz Coders

Yeah, your right! ThanksπŸ€”

Collapse
btlm profile image
btlm • Edited

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

Collapse
dcodeyt profile image
Dom (dcode) Author

Appreciate that mate! Cheers

Collapse
hyaovi profile image
Yaovi

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

Collapse
raulsz profile image
RaulSZ

fuck you

Collapse
cchana profile image
Charanjit Chana

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.

Collapse
raounek profile image
touibeg mohamed

beautiful css...

Collapse
brandonskerritt profile image
Brandon

Thanks for this! :)

Collapse
kalashin1 profile image
Kinanee Samson

I didn't like working with tables, maybe I'll consider them with this your post

Collapse
webdeasy profile image
webdeasy.de

Pretty 😊

Collapse
anthonygrear profile image
anthony-grear

I just went through a html lesson on tables, so I used your styling to go along with it. Thanks!

Collapse
kilasuelika profile image
ZhouYao

I use your code in my website. Thank you so much.

Collapse
denzeljoy_sugayan_7b7338 profile image
Denzel Joy Sugayan

what software does he used to code html?

Forem Open with the Forem app