HTML Tables

Learn what is HTML tables and How its formed

Probably you have drawn tables on the papers with a pen or pencil for categorizing different kinds of data with rows and columns. Instead of drawing tables on the paper, you can draw on the HTML pages, which means in the web browser’s window.

To do that we will use specific HTML tags/elements that form the table structure. In this chapter, we will learn the most basic structure of HTML tables in detail.

Study Guides

We have studied the HTML tag/elements and attributes in the previous chapters. So you probably know whats they are. To form tables, we will use different table tags and attribute in this chapter.

Suggestion: Every tag in the Table Attributes section is linked with its references page of this site. Click on each tag, to learn in details about the tag/elements or attribute.

HTML Tables Definition

The parent tag of HTML tables is <table>and it has a closing tag </table>. Everything between the two tags is the table body.

html table body

The second-parent tag of HTML table element is the <tr> tag/element. It has also a closing tag </tr>. The <tr> tag form the table row inside the empty table. You can define as many <tr> tags as you want (the row number). See the example;

<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

Notice that we have uses four <tr> tags, it will create four rows. You can insert as many rows as you want. But our table is not yet completed. The above code is not going to give you any output.

Now, we will create table columns. You have to create at least one table column to represent a table. To create table columns use <td> tag. It also has a closing tag </td>. This tag also referred to as table data. because it contains the end data of a table in every table cell. See the example below:

<style>
    table, tr, td{border:2px solid black;
    border-collapse: collapse;
    padding: 8px;
    }
</style>
<table >
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
    <tr>
        <td>Cell 8</td>
        <td>Cell 9</td>
    </tr>
</table>

If you run the code you will get the following output. We will discuss the <style> section later.

INFO: The <td></td> tag can contain any kind of data like text, image, link, video, etc.

Table Output

html table data

Notice how the table’s columns and data are organized regarding the above code.

TIPS: Write tables using <table>, <tr> and <td> tags and shuffle the data for mapping out table data structure. Practice it for a while.

Messing up the <td> Tag

While forming a table, make sure each each <tr> tag contains the same number of <td> tags that every <tr> tag contains.

See the code and output below of unmeasured <td> tags:

<style>
    table, tr, td{border:2px solid black;
    border-collapse: collapse;
    padding: 8px;
    }
</style>
<table >
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 2.5</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 5</td>
        <td>Cell 6</td>
        <td>Cell 6.5</td>
    </tr>
    <tr>
        <td>Cell 8</td>
        <td>Cell 9</td>
    </tr>
</table>

Table Output

html tables unmeasured td

How do you think about the output? So be careful to use the <td> tags. But you can use it if you need a table looks like the above. 😀

Table Head <th>

Probably every table has a heading. And usually, the first column in the heading of a table. In HTML we use another tag for creating heading row and that is <th> which means table heading. So to implement a table heading, we will use <th></th> tags in the first <tr></tr> tag inserted of using the <td> tag.

Here is an example:

<style>
    h2 {
        color: #a83f22;
    }
    table, tr, td{border:2px solid #a83f22;
    border-collapse: collapse;
    padding: 8px;
    }
    th {
        background: #a83f22;
        color: #fff;
        font-weight: bold;
    }
</style>
<h2>Tutorials on PrograCoding</h2>
<table >
    <tr>
        <th>Tutorials</th>
        <th>Authors</th>

    </tr>
    <tr>
        <td>C Programming</td>
        <td>Mehrab Mohul</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>Shan Lina</td>
    </tr>
    <tr>
        <td>Haskell</td>
        <td>Jhon Doe</td>
    </tr>
</table>

Table Output

html tables head

You can distinguish the table head cell and data cell by following this way.

What about the <style> Section

We have used the <style> section in our code. It is the CSS properties for styling the table. We have used some CSS attributes to style our table, for example, we have used the border properties to border the table.

But the HTM table has some attributes that belong to HTML tables only.  For example, you can use the cell padding attribute to pad the table.

<style>
    h2 {
        color: #a83f22;
    }
</style>
<h2>Tutorials on PrograCoding</h2>
<table cellpadding="20px" bordercolor="#a83f22" border="1px">
    <tr bgcolor="#a83f22" color="#ff">
        <th>Tutorials</th>
        <th>Authors</th>
    </tr>
    <tr>
        <td>C Programming</td>
        <td>Mehrab Mohul</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>Shan Lina</td>
    </tr>
    <tr>
        <td>Haskell</td>
        <td>Jhon Doe</td>
    </tr>
</table>

HTML Table Attributes

 

WARNING: In HTML5 you can style tables using the CSS properties in all the ways. So you should use the CSS properties to style your tables. If you are interested to learn CSS, then refer to our Complete CSS Tutorials.

Posted in