Table of Contents
Let’s do something crazy today. Something like talking about HTML tables. I’m using the HTML here because you can work with tables also in CSS. What am I talking about now is using display property with some of these values – inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row and table-row-group. With these values you can easily imitate the behavior of native tables. Remember that these values are not supported in IE7 and lower. However, today we are going to talk about table-related elements and how to create proper valid tables. Without further ado, let’s dive in …
Before we start, I want to state here that tables should not be used for creating layout of the page, no matter how crazy you or your client is. Never, never, never, never—in nothing, great or small, large or petty—never use tables for layout (sorry Churchill). Tables are supposed to be used for tabular data. If you want to show some data, stats or whatever that could be as well in Excell sheet, than you are free to bring the table elements into the game.
CSS values for display mentioned above can be exception. Sometime it can be useful to set some element to display of table or table-cell. This way you can make it “unbreakable” when browser width is smaller than the element (page will scroll) or you can implement this to use vertical-align later. One example of this approach can be found in Twitter’s Bootstrap where table for display is used on :before and :after pseudo-classes of many elements. Now, back to our subject …
Basics
In order to create proper and valid table, your table should include following elements – table, caption, thead, tr, th, tbody, tr, td and tfoot again with tr and td. You can also use colgroup to group together columns to format them at once. The table element, I guess, does not require any further explanation. On the other hand, some of you may not be familiar with all the other elements. Let’s take the caption, thead and tbody as first. caption is for the name of the table or the “heading” that will be displayed above the table (it will not be included in the grid of table). thead stands for “table head” and should contain the header content – main categories of content, etc – something headings in article. tbody stands for “table body” contains all the remaining data. Both of these elements are divided into single row by tr element which stands for “table row” and then into columns via td element which means “table data”.
thead
In this part of table you have to use tr to create new row before anything else. After this, the only element that should be used here is th for table heading. As said above, these elements mark individual categories (the top of the table). In case some of the categories need to span over more than one column, use colspan attribute on this element with specific number of columns it should cover.
HTML:
<table> <thead> <tr> <th>First category<th> <th>Second category<th> <th>Third category<th> </tr> </thead> … </table>
tbody
In tbody element you are going to place all the content (except the headings) you want the table to show. You will again use tr to create individual table rows where you will insert the data into columns via td element. This will create the rows and columns of the table – place for the data. You can use as many rows and columns in your table as you want. You can imagine the tr element like a single column in the row. Here, you will place the data (as “table data” name says).
HTML:
<table> … <tbody> <tr> <td>First column<td> <td>Second column<td> <td>Third column<td> </tr> </tbody> </table>
tfoot
This element is supposed to contain summary of the individual columns of table. So, for example, in table containing profits of company, tfoot can contain the sum of individual columns. It is important to mention here that it does not matter where in your table will you declare it. It will always be shown on the bottom of the table (last row). So, you feel free to place it before the tbody or after it. As in tbody, you will again use tr to create a rows and td for columns.
HTML:
<table> <tfoot> <tr> <td>Summary for the first column<td> <td>Summary for the second column<td> <td>Summary for the third column<td> </tr> </tfoot> </table>
So, how the complete table can look like? Well, let’s say we want to create a table about couple Star Wars characters (yes, I am Star Wars fan) and divide them to Jedis and Siths categories. The name of the table (caption) will be “Star Wars main characters”. Table will be split into two columns – “Name” and “Side”. In tfoot will will show which category – Jedis or Siths – have more mentions in the table.
HTML:
<table> <caption>Star Wars main characters</caption> <thead> <tr> <th>Name</th> <th>Side</th> </tr> </thead> <tbody> <tr> <td>Darth Plagueis</td> <td>Sith</td> </tr> <tr> <td>Darth Maul</td> <td>Sith</td> </tr> <tr> <td>Darth Sidius</td> <td>Sith</td> </tr> <tr> <td>Yoda</td> <td>Jedi</td> </tr> <tr> <td>Mace Windu</td> <td>Jedi</td> </tr> <tr> <td>Qui-Gon Jinn</td> <td>Jedi</td> </tr> <tr> <td>Obi-Wan Kenobi</td> <td>Jedi</td> </tr> <tr> <td>Anakin Skywalker</td> <td>Both</td> </tr> </tbody> <tfoot> <tr> <td>Winner</td> <td>Jedi</td> </tr> </tfoot> </table>
Necessary elements
Before we finish this post, let’s talk about which elements are REALLY necessary and required to be used to create a table. If you want, for whatever reason, shorten the code for table by excluding some of the elements, here are few you can safely omit without changing the layout of table. Basically, all you need is table element with tr and td nested inside. That’s it. You can get rid of thead, tbody, tfoot and move all the rows with their content right into table element. The result will look the same. However, it would be harder to style and also a bit mess if you care about semantics.
HTML:
<table> <caption>Star Wars main characters</caption> <tr> <th>Name</th> <th>Side</th> </tr> <tr> <td>Darth Plagueis</td> <td>Sith</td> </tr> <tr> <td>Darth Maul</td> <td>Sith</td> </tr> <tr> <td>Darth Sidius</td> <td>Sith</td> </tr> <tr> <td>Yoda</td> <td>Jedi</td> </tr> <tr> <td>Mace Windu</td> <td>Jedi</td> </tr> <tr> <td>Qui-Gon Jinn</td> <td>Jedi</td> </tr> <tr> <td>Obi-Wan Kenobi</td> <td>Jedi</td> </tr> <tr> <td>Anakin Skywalker</td> <td>Both</td> </tr> <tr> <td>Winner</td> <td>Jedi</td> </tr> </table>
Summary
And that’s all for today. I hope that this post was useful to you and from now, you will be able to create pro table in no time. Also, don’t forget to rate the post.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
