HTML Tutorial

Chapter 9 – HTML Tables

Welcome to the new chapter of our HTML Tutorial series. In the previous tutorial we learnt about using Images in HTML. In this chapter we shall learn about Tables in HTML.

Often we may come across 2 dimensional data in table format which you want to display on our web pages. If you try to directly copy and paste such table formatted data from an excel spreadsheet to your HTML code, it will be displayed in plain text format instead of table format. Hence, to display data with table formatting, we need to use HTML Table elements.

The general syntax of HTML Table is given below for reference:

<table>
    <tr>
        <td>S.No.</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>23</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Tom</td>
        <td>33</td>
    </tr>
</table>

                    

The output of the above HTML code is displayed as below:

The above table's borders are hidden due to CSS styles. You can be view the table borders by adding below style tag in your HEAD section of the HTML file.

<style>
table, th, td {
  border:1px solid black;
  width: 400px;
}
</style>
                    

The output of the above HTML code is displayed as below:

You can try running this code snippet on our Online HTML Editor to view the output.

The table element starts with a “<table>” tag. Unlike the tables in spreadsheet which can contain only text & numbers, tables in HTML can display various types of data such as Images, another HTML elements such as buttons, links, list items etc.

Once the table element is created, we need to create a table row. To create a new table row within the table, we need to use “<tr>” tag. Let’s say if we want to display 5 rows, we need to add 5 “tr” tag with corresponding closing tag as “</tr>”.

Once a row is created, we need to display the data in column wise format. To add a new cell within the table row, we need to add table data element using the “<td>” tag. If we want to display 3 columns within a row, we need to include 3 “td” tags with its corresponding closing tag as “</td>”, and we need to place the cell data inside the “td” tag as shown in earlier example.

Usually the data in tables contain a header rows which is basically the label or the name of the column for reference. If we want to highlight these header cells, we can use the “<th>” tag instead of “<td>” tag.

An example is shown below for reference.

<table>
    <tr>
        <th>S.No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>23</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Tom</td>
        <td>33</td>
    </tr>
</table>

                        

Output:

Sometimes, the table data may have headers in header columns instead of header rows. In that case “<th>” tags can also be used in the initial column. An example is shown below for reference.

Example

HTML

<table>
    <tr>
        <th>S.No.</th>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr>
        <th>1</th>
        <td>John</td>
        <td>23</td>
    </tr>
    <tr>
        <th>2</th>
        <td>Tom</td>
        <td>33</td>
    </tr>
</table>
        

Output:

Sometimes we may want to merge some cells spanning across multiple columns or rows. In that case, we can use the “colspan” and “rowspan” attribute. An example usage of these 2 attributes are given below for reference.

1) Colspan

<table>
    <tr>
        <td colspan="2">Data with 2 columns</td>
        <td>23</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Tom</td>
        <td>33</td>
    </tr>
</table>
                    

2) Rowspan

<table>
    <tr>
        <td rowspan="2">Data with 2 rows</td>
        <td>23</td>
    </tr>
    <tr>
        <td>33</td>
    </tr>
    <tr>
    <td>Row 3</td>
        <td>40</td>
    </tr>
</table>
              

I hope you liked reading this tutorial. Do share this among your social circles.

See you in the next tutorial.

Next Chapter Chapter 10 - HTML List