All About Tables • 18 min read

Introduction

Tables! A beautiful, simple way, of categorically organizing data into neat columns and rows, making data more easily understood and organized. So how can we make these wonders of the world! Freight not, because we shall delve deep into such and all secrets shall be revealed.

Markdown

First we’ll go over how to make markdown tables. The nice thing about markdown tables is the fact they actually look like tables when you’re coding them, which isn’t true for HTML tables. The following is an example of what a table in markdown make look like:

| Number      | In Binary   |
| ----------- | ----------- |
| 1           | 00000001    |
| 2           | 00000010    |

Output:

Number In Binary
1 00000001
2 00000010

However, making these tables are quite tedious and really a waste of time. Alas, there is a solution! Instead of actually coding a markdown table as that takes up too much time, there are markdown table generators where you can design a table as if it were a spreadsheet.

Markdown Table Generator

So, there you have it. Markdown tables and all their beauty. Expect… when they aren’t beautiful. Markdown tables, when stretched to their limit, can often turn into an ugly bunch of code that no one wants to deal with.

HTML

Now, for HTML, the preferred choice of tables. Not only is the code more neatly organized (even while not looking like a table) but also with a combination of javascript, tables become an amazing, interactive part of one’s website.

The following is an example of code for an HTML table.

<!-- Start of Table -->
<table>

  <!-- Table Headers-->
  <tr>
    <th>Watch</th>
    <th>Cost</th>
    <th>Battery Life (H)</th>
  </tr>
  
  <!-- Apple -->
  <tr>
    <td>Apple</td>
    <td>$250-$800</td>
    <td>18</td>
  </tr>

  <!-- Fitbit -->
  <tr>
    <td>Fitbit</td>
    <td>$200-400</td>
    <td>24-48</td>
  </tr>

  <!-- Garmin -->
  <tr>
    <td>Garmin</td>
    <td>$200-$1000</td>
    <td>1200</td>
  </tr>

<!-- End of Table -->
</table>

Anatomy of Code

Here’s a few things to note down about the code

  1. <table> - Indicates the start and end of the HTML table.
  2. <tr> - Groups table cells belonging to the same row.
  3. <th> - Indicates a header for a column.
  4. <td> - Contains the bulk of information for table.

An HTML has a structurally, intuitive methods for organizing their tables. The <table> cell indicates the start and end of tables and all information about the table must be contained with this cell. Further in, there is the <tr> cell, which organized separate cells into their own mini groups. You can see from the example above that the table headers are separate from the watches and the watches are separate from each other.

Within <tr> is either <th> or more commonly, <td>. <th> defines the table headers of the table, while <td> is the table data, where most of the information on the table goes into this cell.

Simple Template

<table>
    <!-- Row 1 -->
    <tr>
        <th>Header1</th>
        <th>Header2</th>
    </tr>

    <!-- Row 2 -->
    <tr>
        <th>Data</th>
        <th>Data</th>
    </tr>
</table>

Output:

Header1 Header2
Data Data

You can see how the output for both Markdown and HTML end up with the same format

While yes, HTML is more complex than a markdown table, it’s really simple to learn and much easier to setup once understood. Also, most importantly, as preluded before html tables can be combined with javascript which leads us into the next part of this guide.

Javascript Table

Javascript tables are the best of tables. Combined with the foundational code of html and with its own unique attributes, tables can be designed to interact with the user and allow the user to manipulate the data of a table to get the most comprehensive outlook on the data in that table.

Let’s use my own table (simplified) I created for this example.

<!-- Start of Table -->
<table>

  <!-- Table Headers -->
  <thead>
    <tr>
      <th>Continent</th>
      <th>Population (M)</th>
      <th>Growth Rate</th>
      <th>Life Expectancy</th>
      <th>GDP (T)</th>
      <th>Share (%)</th>
      <th>Richest Country</th>
    </tr>
  </thead>

  <!--Asia -->
  <tr>
    <td>Asia</td>
    <td>4694</td>
    <td>1.05%</td>
    <td>74.06</td>
    <td>$40.25</td>
    <td>38.1%</td>
    <td>China</td>
  </tr>

<!-- End of Table -->
</table>

We already know how this table works. What we want to find out is how to change this table so it can better categorize the data (we can view each column by greatest to least or alphabetically). So how do we do this? Well, like for many things before, we call upon code that someone else has already made! What we do is the easy part.


<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

This code essentially calls upon code from external sources to give HTML tables the ability to search, search, and have multiple pages. It contains all the CSS and Javascript needed for such a javascript table. It is in essence what part of the javascript code gives us the function for our table.

This is not all the code that you’ll need though, you still have to apply the code that has been called upon to your table. The first step in doing this is adding an id to your table which can add the code to the table. It should look something like the following.

<table id ="continents" class="table">
    all the table data
</table>

The final step would be calling upon the contients id and applying the javascript and css code to our table in order to finally give it the necessary functionality to work.

<!-- Script is used to embed executable code -->
<script>
    $("#continents").DataTable();
</script>

For reference, this is how the table code should look after adding this additional code.

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>


<!-- Start of Table -->
<table id ="continents" class="table">

  <!-- Table Headers -->
  <thead>
    <tr>
      <th>Continent</th>
      <th>Population (M)</th>
      <th>Growth Rate</th>
      <th>Life Expectancy</th>
      <th>GDP (T)</th>
      <th>Share (%)</th>
      <th>Richest Country</th>
    </tr>
  </thead>

  <!--Asia -->
  <tr>
    <td>Asia</td>
    <td>4694</td>
    <td>1.05%</td>
    <td>74.06</td>
    <td>$40.25</td>
    <td>38.1%</td>
    <td>China</td>
  </tr>

<!-- End of Table -->
</table>

<!-- Script is used to embed executable code -->
<script>
    $("#continents").DataTable();
</script>

Conclusion

Now you know the basics of setting up markdown, html, and simple javascript tables! This is only the beginning of tables however. As your programming experience evolves, so will your ability to develop more efficient ways of developing tables. Till then though, be satisfied with the knowledge you learned for that is more than enough.