Duomly

Posted on May 5, 2020 • Originally published at blog.duomly.com

Everything you should know about HTML tables

#html #css #tutorial #webdev

This article was originally published at https://www.blog.duomly.com/how-to-build-an-html-table-tutorial/

When you are building a project which has some data to present, you need a good way to show the information easily and understandably. Depending on the type of data, you can select between different HTML elements.

In many cases, the table is the most convenient method to display large amounts of structured data nicely. That’s why in this article, I’d like to explain to you the structure of the table, show you how to create one, and give you a little advice when it’s a good idea to present your data as a table.

If you prefer to watch then read, I have a video version for you right here.

Let’s start and become an HTML tables master!

1. HTML table structure - what’s inside?

HTML tables consist of multiple elements, and each of those elements has different tags.

The first element which you have to use is <table> tag, which is a kind of container for elements that are building a table. And inside of this container, you have to put other elements like rows, columns, or cells.

In the image below, you can see what elements are part of the most basic table.

<tr> - a tag that should be created at first inside the table. It's used to build row. It's easy to remember because you can think bout tr as a table row.

Then, inside the row, you need to create the cells, which could also be considered as creating the columns. You can do it using two different tags, according to the needs:

<th> - it's an option to create header cells.
<td> - it's used to build plain cells, and you can put as many <td> elements per row as you wish.

Let’s take a look at short example:

<tr>
  <th>id</th>
</tr>
<tr>
  <td>1</td>
</tr>

The tags described above are just basic elements that you have to use to create an HTML table. There are some more HTML tags that can help you to build more advanced tables with additional elements. Let's see the image:

<caption> allows adding a caption or title for your table. It should be used directly after opening

tag;

<thead> | <tbody> | <tfoot> allows to build your table in a more structured way by placing your table header into <thead>, all body elements into <tbody>, and footer rows or other information into <tfoot>;

There are also two special attributes which allows us to manipulate the cell, it's colspan and rowspan.

Colspan example:

Rowspan example:

Those attributes take a numeric value and allow to extend table column or row across other rows or columns.

2. Creating HTML table with code example

After you got familiar with everything you should know about the HTML tables, let's build one.

At the beginning open your favorite code editor and create a simple .html file. You can call it as you prefer.
Start creating a simple HTML file structure with the table structure inside like in the code below:

<html>
  <head>
    <title>HTML Table by Duomly</title>
    <style></style>
  </head>
  <body>
    <table>
      <thead></thead>
      <tbody></tbody>
      <tfoot></tfoot>
    </table>
  </body>
</html>

Now, we have a structure and it's time to put some data inside. Let's create our table header.

<thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    <th colspan=2>Phone number</th>
  </tr>
</thead>

The table header is prepared, so let's add data to our table body. We are going to have 10 rows.

<tbody>
  <tr>
    <td>001</td>
    <td>Mark Smith</td>
    <td>m.smith@gmail.com</td>
    <td>0034 238 212 123</td>
    <td>0034 78 261 231</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Martha Collins</td>
    <td>martha.collins@yahoo.com</td>
    <td>0034 726 121 984</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Sam McNeal</td>
    <td>smn@gmail.com</td>
    <td>0022 081 273 552</td>
  </tr>
  <tr>
    <td>004</td>
    <td>Sarah Powels</td>
    <td>spowels@yahoo.com</td>
    <td>0044 019 937 133</td>
  </tr>
  <tr>
    <td>005</td>
    <td>Peter Kovalsky</td>
    <td>peter.kovalsky@outlook.com</td>
    <td>0022 836 657 342</td>
  </tr>
  <tr>
    <td>006</td>
    <td>John Doe</td>
    <td>john.doe@yahoo.com</td>
    <td>0021 384 482 173</td>
  </tr>
  <tr>
    <td>007</td>
    <td>Ann Flori</td>
    <td>a.flori@outlook.com</td>
    <td>0044 239 138 283</td>
  </tr>
  <tr>
    <td>008</td>
    <td>Martin Edwards</td>
    <td>m.edwards@yahoo.com</td>
    <td>0034 276 693 538</td>
    <td>0034 40 5793 963</td>
  </tr>
  <tr>
    <td>009</td>
    <td>Judy Malcolm</td>
    <td>judy.malcolm_2@gmail.com</td>
    <td>0021 845 304 287</td>
  </tr>
  <tr>
    <td>010</td>
    <td>Charles Richardson</td>
    <td>richardsonch@outlook.com</td>
    <td>0044 856 248 329</td>
  </tr>
</tbody>

Now our table body is ready. Let's just add a tfoot element:

<tfoot>
  <tr>
    <td colspan=5>Total amount of clients: 10</td>
  </tr>
</tfoot>

The structure of the table is ready, but we would like our table to look pretty, that's why we are going to add some styles. Let's go back to style in the head section of the HTML file and place the following code:

body {
  margin: 0;
  padding: 2rem;
}
.tablecontainer {
  max-height: 250px;
  overflow: auto;
}
table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
  background-color: #f6f6f6;
}
th, td {
  padding: 0.5em;
}
th {
  background: #ffc107;
  color: white;
  border-radius: 0;
  position: sticky;
  top: 0;
  padding: 10px;
}
td {
  border: 1px solid white;
  box-sizing: border-box;
}
tfoot > tr  {
  background: black;
  color: white;
}
tbody > tr:hover {
  background-color: #ffc107;
}

And voila!
Your HTML table is ready. You should get a result as in the image below:

In the code above we've created a simple table, using all the structural elements. We also added some styling to make our table more useful and good looking. Our table also have a fixed header so you can scroll through the big amount of data and still see the header row.

3. When you should use HTML tables in your project

If you are not sure when it’s a good idea to use the table and when it’s not you should take a look at the date you have to present. If it’s structures and tabular like data which I used above then its one of the best possible options to show it as a table.

Besides the clean data presentation, it’s easy to apply comfortable filtering and sorting with tables.

But, there’s one thing which you should avoid, and it’s building the layout of your website in the table.
It was a popular approach some time ago, but right now we have possibilities like flexbox and CSS grid, so you can do it in a much better way, keeping the responsiveness of your page.

Conclusion

HTML tables are a great way to present structured, tabular data in your layout. It can be created using basic elements like <table>, <tr> and <td> but you also have a possibility to play with it and add some more features and build a proper structure.

If you are not very happy with playing with CSS and HTML then you can check one of the popular CSS frameworks, which have ready, responsive tables with many ready options which you can easily use in your projects. But I truly encourage you to learn building it by yourself to be aware of how it works and what you can change.

Thanks for reading,
Anna from Duomly