Creating beautiful HTML tables with CSS
Tags: html, css, webdev, design
Published: 2020-07-20 14:44:04

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.

{% youtube biI9OFH6Nmg %}

### Writing the HTML
Let's write some boilerplate HTML code for the table.
```html
<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:
```css
.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:
```css
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}
```

### Moving onto the table cells
Let's space things out a bit:
```css
.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

```css
.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:
```css
.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](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
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](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)


![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2z3timz15pb93howzzk.jpg)