🎄 Get 20% off from our HTML course for the holidays! 🎄
Tableception — All About Tables in HTML

Tableception — All About Tables in HTML

Ferenc Almasi • 2019 August 12 • Read time 4 min read
Get your weekly dose of webtips
  • twitter
  • facebook
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.

Copied to clipboard!
<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>
table.html
undefined
Wish my income would be like this.

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<tbody>or <tfoot>.<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:

Copied to clipboard! Playground
<table>
  <caption>Monthly income</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Income</th>
    </tr>
  </thead>
  ...
</table>
caption.html

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)

Copied to clipboard!
<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>
rowspan.html
undefined
Using rowspan on the left and omitting it on the right

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 rowspan="2" to colspan="2", just like so:

Copied to clipboard!
<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>
colspan.html
undefined
with colspan on the left, without it on the right

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.


TOC

  1. Introduction to HTML
  2. The Structure of HTML
  3. Attributes in HTML
  4. Lists of Lists in HTML
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended