The Simplest HTML Table Tutorial

Creating an HTML Table is quite tricky for new programmers. The structure is not very intuitive, but once you understand it, you can create it very fast. The thing that is very interesting in HTML Table is it is very standard among all platforms. Wherever you create and run it, the script standard is always exactly the same.

To create a HTML Table, you don’t actually need a web server. You can just save the text into HTML file, then run it on your browser. Nevertheless, if you want to run it under a web server, you can definitely do it. Check out my post about creating your own web server on your computer : Let’s Begin Your PHP Programming Using XAMPP.

Start Creating Your First HTML Table

To start creating your first HTML Table, let’s start with a simple one. You can use your favorite text editor, or if you still don’t know what editor to use, check out my post about Using Visual Studio Code to begin Your Programming Carreer.

<table>
  <tr>
    <th>Employee ID</th>
    <th>Employee Name</th> 
    <th>Address</th>
  </tr>
  <tr>
    <td>00001</td>
    <td>Justine Remy</td> 
    <td>Germany</td>
  </tr>
  <tr>
    <td>00002</td>
    <td>Scott Gordie</td> 
    <td>China</td>
  </tr>
</table>

Save the file as an HTML file, let’s say htmltable.html. You can directly open the file using your favorite web browser. Simply right click the html file –> Open With –> choose your web browser.

You might not be satisfied with the result because of the poor styling, but that is officially an HTML Table. Notice that the title row is already styled a little bit by having a bold type font. That is because we defined the first row using the <th> tag. To really understand this, you need to take a look at the script once again. The tag <tr> that defines the table row, is always consistent whether it is a header or body row. The tag <td> is a standard table cell element, which tells the browser to form table cells from left to right.

HTML Table with Cells Merging

Now we are going to show you a little more advanced HTML Table. You can actually modify the title row to have row or column spans. This something equivalent to merging rows or columns in spreadsheets. So take a look at this example below.

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>
<table>
    <tr>
        <th colspan="3">Employee Data</th>
        <th rowspan="2">Joined Date</th>
    </tr>
    <tr>
        <th>Employee ID</th>
        <th>Employee Name</th> 
        <th>Address</th>
    </tr>
    <tr>
        <td>00001</td>
        <td>Justine Remy</td> 
        <td>Germany</td>
        <td>Aug 29 2001</td>
    </tr>
    <tr>
        <td>00002</td>
        <td>Scott Gordie</td>
        <td>China</td>
        <td>Sep 01 2015</td>
    </tr>
</table>

The <style> tag is just to add some borders so you can read the table easier.

Okay, I agree that this is usually a little bit hard to understand if you are doing this for the first time. But let’s take a look once again at the script. Note that there are four rows or four <tr> tags in total. The first row only includes ‘Employee Data’ and ‘Joined Date’, because they are indeed in the first row. The field Joined Date is merged into the second row, therefore there is no fourth column in the second row. To make you easier to understand, here are some important pointers about example above.

1. Every <th> and <td> has to be wrapped by the <tr> tag, to tell which row it lays on.
2. Cells merging has to be considered as rowspan or colspan, so you have to know exactly which row and which column to merge. The process is not the same as merging cells in spreadsheets.
3. The number of columns (<th> or <td>) for each rows have to be precise according to how it is supposed to be. You have to look at the rowspan or colspan on the previous row, otherwise the table will break.
4. You can use free HTML table generators out there, but it is not recommended since you need to put dynamic values in the table most of the time in the future.

Conclusion

HTML Table is one of the most important thing you need to know in programming. To master HTML table, you need to start from a simple one. Once you are used to all mandatory tags and attributes, including rowspan and colspan, it is very easy to create an HTML table. Keep in mind that this post is only showing the basic usage of HTML Table. You can create better styling, dynamic table, and other more advanced HTML table that I will cover in the future posts.