In God we trust, all others must bring data.
- W. Edwards Deming
Data helps us understand everything better: from current news to buying habits, right down to which teams are on the top of the league each season. Most times, a table is often a great and simple way to present such data.
In this blog post, I'll show you how to use HTML and CSS to make tables that show your data in a simple, easy-to-understand way.
To create a table in HTML, we use the table element, , like so:
<table>
</table>
A table has rows and columns where your headings and the data you have can go. To add a row to a table, we use the table row element, , like this:
<table>
<tr>
</tr>
<tr>
</tr>
</table>
This piece of code will add two rows to our table. Let's assume that we have collected some data on new Netflix movies and we want to create a table to show them. We can quickly create two cells of data in the first row by using the table data element, , like this:
<table>
<tr>
<td>The Bling Ring</td>
<td>Sofia Coppola</td>
<td>January 18, 2020</td>
</tr>
<tr></tr>
</table>
In the browser, this would look something like,
Table Headings
Headings are pretty important if you want someone to look at our Netflix data and understand it. Without titles, they would just look like a bunch of random numbers and words strewn all over.
To create headings in HTML, we use the table heading element, , like so:
<th>
</th>
To add meaning to our data, we can add three headings nested in a new row element like this:
<table>
<tr>
<th>Movie Title</th>
<th>Director</th>
<th>Date Added to Netflix</th>
</tr>
<tr>
<td>The Bling Ring</td>
<td>Sofia Coppola</td>
<td>January 18, 2020</td>
</tr>
<tr></tr>
</table>
Now, our table in the browser will look like this:
The data looks better with headings, but they are all so squished together. We will see a fix for that below.
Table Borders
Our tabular data currently looks okay, but it will definitely look better with some good space in between them. This is where CSS comes in. We can add some styling to our table with some bits of CSS, like so:
table, td, th {
border: 1px solid black;
}
Here, I have created a border and our table now looks like this:
Yeah. That looks pretty ugly. To make the borders disappear, let's add a border collapse property:
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
Now, our table looks like this:
A little neater, heh?
If we add more data, our table will look a little more cluttered:
Styling a Table with CSS
Our table looks bland, no? I mean, it functions and presents data, but it could look nicer.
In this section, I'll show you how to style a table and make it pop with some CSS.
For starters, it could use a better font. One of my favourite fonts is called Montserrat and you can find it over at Google Fonts. We can add the link to the font to our HTML document like this:
<!DOCTYPE html>
<html>
<head>
<title>Netflix Movie Table Data</title>
<!-- Custom Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<!-- Custom Style -->
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
To make the our data look a little more laid out and take up 80% of our screen, we can style it with this:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
The table will then look like this:
Next, I'll go ahead and add a little colour to the header, switch up the font, make the text uppercase and give it a makeover with:
th {
background: #EA4C4C;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
Our table now looks like this:
Looking nice, huh?
Finally, I'll change the font for the rows, make the headings look better and space out the data with:
th, td {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
padding: 15px;
text-align: left;
width: 33%;
}
Our table now looks like this:
You'll find a live preview here.
And that, is how you create tables to hold data with HTML and CSS! I hope you found this post really helpful. If you have questions or would like to see more web development content, tweet at me or follow me on Twitter at @tbrmonster.