DEV Community

Cover image for Creating beautiful HTML tables with CSS
Dom (dcode)
Dom (dcode)

Posted on • Updated on

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

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 ๐Ÿ˜

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

Course Thumbnail

Top comments (23)

Collapse
 
merri profile image
Vesa Piittinen • 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.

Collapse
 
dcodeyt profile image
Dom (dcode)

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
 
merri profile image
Vesa Piittinen

Hmm, now that I paid attention to it this doesn't seem to work anymore on iPhones :(

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)

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
 
Sloan, the sloth mascot
Comment deleted
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
Autumn

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
 
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?

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!