Creating HTML Table: A Learning Journey to Web Development
Hi! Welcome back to the journey once again! We’ve learned about HTML Lists in the last post. Another very important element that is crucial for representing certain data in an easy to understand format is table. When it comes to presenting structured data, which we often come across, There is no alternative to table. Today, we are going to learn about creating HTML table.
N.B: This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
Tables in HTML
Tables were always intended to be a form of presenting tabular data. But back when CSS wasn’t widely supported in browsers, people used to use table to create page layouts. They would create crazy tables with wired columns and rows and then put web page data, no matter what kind of data it is, in those cells. But that wasn’t what table was invented for, right? Those days are now long gone. CSS is now supported everywhere and now we make much more sense because we only create tables to present tabular data. So, my message is, use table for showing tables only, not for anything else.
Creating tables might seem a little intimidating to the beginners at first. That is because, unlike other HTML elements, table isn’t made up of single tags. It’s a structure made up of a couple of elements. They only produce desired result when they are placed together correctly. But, fear not! It’s really not as hard as it seems. Once you get the underlying concept, it’ll all make sense to you.
Creating a Table
Tables are created with HTML table element, <table>. It initiates the beginning of a table on a web page. As you already know, tables are made up of rows and columns. So, the obvious thing that comes next after table is the table row element, <tr>. Each row may contain several columns. In HTML, you don’t have to specify how many columns you are going to use. You simply put the data for every column, and HTML creates columns to put those in. Or, in other words, you create columns by proving the data for it.
To pass a column data, you have to use table data elements, <td>, inside of table row element <tr>. You can put as many data as your table needs. The number of table data, <td>, you create, the number of columns you’ll get. So, the simplest HTML table may look like this:
Note: This may look like plain text, but it’s actually a table with columns and rows. Our table will start to look like a table once we add some style to it by adding CSS.
So, in the above example, we have three different table row, <tr> elements, and thus we have a table with 3 row. Same way, we have three table data, <td> element in each of those table row, which is why we have 3 columns in each of our table rows. Makes sense, right?
That’s is the most basic concept of building table. Once you understand that, you need to polish on it. You need to structure it so that both, the user and the browser find it easier to understand the context of your table. Let’s go ahead and do that!
Table Heading
Almost every table we see in real life have a table header on the top row. It contains names in each column which represent the type of data that is presented later in that same column. In our example table, We have three column named: Name, Age, Favorite Food. Meaning that Everything that the first column have later in the table, is a name. Similarly, The second column represents age and the third column represents favorite food of the subject.
So, those things in the first column are actually table heading and not table data. To add some semantic meaning as well as distinguishing look and feel to it, we put these in table heading element, <th>, instead of <td>.
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Favorite Food</th>
</tr>
<tr>
<td>Kitty</td>
<td>2.5</td>
<td>Milk</td>
</tr>
<tr>
<td>Milli</td>
<td>0.8</td>
<td>Fish</td>
</tr>
</table>This will make the table heading bold and center aligned.
Table Head, Table Body & Table Footer
That’s was the first tweak. If we take an even closer look at well-formatted tables, we’ll find that a table usually has three main part. A head part, a body part and a Footer part at the end of the table which summarizes the data. To reflect that in our table, we should split it into these parts.
Let’s examine our example table once again! We have a row where we’ve put our table heading. So that’s clearly the head part of our table. And in other three row, we have our table data, which we can be considered the main body of our table. We don’t really have anything to summarize here, so we don’t have any table footer here. But let’s assume, for some weird reason, we want to summarize the food that most cats like. That would be the footer of our table.
HTML provides us with table head, <thead>, table footer, <tfoot>, and table body, <tbody> elements for these segmenting purpose. We put all the row related to our table heading inside the <thead> element. And similarly, we put body part in <tbody> and footer part on <tfoot>. So, let’s reorganize out table according to this.
Note: Table Head, Table Body, Table Footer doesn’t have any visual affect on table. I have added border in the table for your convenience. We’ll learn how to style table in details once we reach CSS section.
Did you notice one weird thing that I’ve done? I’ve placed the table foot, <tfoot> element right after the table head, <thead> element and before the table body, <tbody> element. Doesn’t that seem messed up? Actually, no. Check out the output of the table. Even though I’ve put the table foot before the table body, but it still showing the table foot after the table body, at the end of the table.
This is because Our table body may contain a numerous number of rows. When browser receives the data, it may take some time to fetch the full table due to slow internet speed, or due to the length of our table. In those scenarios, it’s useful to pass the table summary first so that the user have an idea about the table context even before the full table loads.
Combining Rows and Columns
One critical aspect of creating a table in HTML is to merge columns and rows. We may often need to do that. We use the colspan attribute to merge columns sitting next to each other, and the rowspan attributes to join multiple rows sitting vertically. This might seem confusing, I know. But cool down, you’re gonna get this.
Let me rephrase this again. If you need to stretch a single cell over a few columns, you use the colspan attribute. If you want to extend a cell over a few row, you use the rowspan attribute. These attribute is applied on <th> or <td> elements. So, if you apply colspan on a <td>, it’ll take its own space and then it’ll take more to the right as much as you specify. Same goes for rowspan but towards vertical direction.
Let’s see an example. Take a look at our example table again. It has an empty cell in table foot. We can stretch the ‘Most liked food’ cell to occupy the next column also, to fill up the empty space of the next column. So, which attribute we need to apply on this <td> element? Yes, the colspan attribute. Because we trying to take up the next column space. Let’s fix it now!
<table>
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
<th>Favorite Food</th>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Most liked food:</td>
<td>Milk</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Kitty</td>
<td>2.5</td>
<td>Milk</td>
</tr> <tr>
<td>Milli</td>
<td>0.8</td>
<td>Fish</td>
</tr> <tr>
<td>Binni</td>
<td>1.2</td>
<td>Milk</td>
</tr>
</tbody>
</table>
The colspan and rowspan takes integer value starting from 2. This is the number of cells/rows you want that single cells to take up. And as this single cell will be taking up that many cells space, you need to omit those cells from next row to keep the layout of your table consistent.
I am telling again, don’t let this little tricky things confuse you. Just keep trying to figure this out until you get it clearly. Once you get it, you’ll wonder why you found it confusing in the first time.
Table Caption
Now that we have quite everything we want in our table, but something is still missing. We didn’t tell what our table is about. The <caption> element is a nifty way to name your table. It expresses to your user what your table is about. The condition is, you must declare the <caption> element right after starting the <table> element. See codepen below for code demonstration.
Summery
Let’s take a look back at what we’ve discussed so far. Table is created with the <table> element. We have three main part of table, the table head, <thead>, table body, <tbody>, and table footer, <tfoot>. We construct column by creating table data, <td> element. All the columns resides inside table rows, <tr>, elements. We can join multiple columns and rows using the colspan and rowspan attribute.
Now, let’s create one final table applying everything we have learned so far!
In the final table, We’ve added another cat named Dublet who also happen to like milk just like Binni. So, we didn’t want to create a separate row for the same content. We’ve used the rowspan attribute on Binni’s milk element, and so it’s taking up the space of Dublet’s row. And that is why we have one less <td> in Dublet’s row.
Look at the code carefully and tinker with it. Apply colspan and rowspan on different element and see what happens. Remember, Making mistakes is the best way to learn.
Conclusion
So that’s it for today. Feel free to leave a comment below if you have any questions, confusion or, If you like cats or milk or anything! Please share this post on your social networks so that I can find more people to embark on this learning journey.
Try to combine the lesson we learned from HTML list with what we’ve learned today. Keep mistaking, and I’ll see you soon!
