Tableception — All About Tables in HTML
You’ve made it this far, we’re already halfway through so don’t give up now! In the previous post we looked into lists and now it’s the turn to look into tables. Or even better, nested tables!
Tables are super useful for showing relevant information to the user in an ordered and clear manner. They are great for representing data, they are even used for list of items with multiple columns and sometimes… they are used for drawing anime girls in the browser. But that’s a little bit advanced topic so we will begin with the former one.
Defining a table is a breeze. Let’s see an example and how it would be displayed in the browser with the default styling.
<table> <thead> <tr> <th>Month</th> <th>Income</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$1024</td> </tr> <tr> <td>February</td> <td>$2048</td> </tr> <tr> <td>March</td> <td>$4098</td> </tr> </tbody></table>
As you can see, we start off by defining a
<table> element, everything we have inside a table goes inside these two tags. To group heading elements together, we use
<thead>, and to group body elements together we use either
<thead> is the header of your table, by default, everything inside the head becomes bold and centered.
Inside these grouping elements, each row is defined with a
<tr> tag and inside each row we have table data. For headers, each item is defined with a
<th> tag, all other table data are represented by a
<td>. (Note that we populate tables by inserting rows first and not by inserting columns.) You can define basically anything here, you can even have another table inside each
<td>, you can nest it just like we did with lists in this post.
Apart from these tags we have one additional which is not in the example above. It is the
<caption> tag and as the name suggests, it is used to add a caption to a table. If you would like to use it, you must make sure it is inserted immediately after the
<table> tag, like so:
<table> <caption>Monthly income</caption> <thead> <tr> <th>Month</th> <th>Income</th> </tr> </thead> ... </table>
As for lists, tables also have special attributes tied to them, that can only be used with table cells (
<td>) and these are rowspan and colspan. Say you have two addresses to show and you want to write “Address” on the left side and the addresses on the right. Since you are going to have multiple rows on the right side and only one on the left side, you will have tell the table to span multiple rows on the left, otherwise it would not be displayed right… right? That’s what rowspan and colspan are for. See the example below, we have two addresses so we tell the
<th> containing the word “Address” to span 2 rows. Also see the screenshots below the code example and the difference between using rowspan and omitting it. (I added a border for visual aid, note that the content will be centered vertically by default for rowspan, and it will be centered horizontally for colspan)
<table> <tbody><tr> <th rowspan="2">Address</th> <td>124 Conch Street, Bikini Bottom, Pacific Ocean</td> </tr> <tr> <td>120 Conch Street, Bikini Bottom, Pacific Ocean</td> </tr></tbody></table>
Since we don’t have the same amount of data for each row, we get an empty cell. Same goes for colspan, the only difference is the order. If we were to display “Address” on top and the addresses below, we just move the first address into the second row and change
colspan="2", just like so:
<table> <tbody><tr> <th colspan="2">Address</th> </tr> <tr> <td>124 Conch Street, Bikini Bottom, Pacific Ocean</td> <td>120 Conch Street, Bikini Bottom, Pacific Ocean</td> </tr></tbody></table>
Of course tables can be styled further with css but that should be for another article. As you can see, there’s not much to remember in terms of the markup apart from 5–6 tags and the intuitive naming also makes it easier to keep them in mind.
- Access exclusive interactive lessons
- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions