Firstly, We need to understand that actually what a table is.

So, Let's Start

What is Table????

A table is a combination of rows and columns. It is a better way to share the information in tabular form. because it can be understood by any person whether they are professional or not.

Sometimes, we need to share the information on the website in tabular form.

For that purpose, we will use the <table> tag in our HTML document. It is a container tag.

A container tag means that the tag needs to be closed by using the closing tag </>.

<table> 

</table>

But in the above syntax, there is a problem in that, it can't do anything on the webpage because we need to some use more tags for adding rows and columns in the table.

List of tags used in <table>

<tr>

tr stands for "Table row". It is used to define the row of the table. By using rows, we can add data horizontally.

<th>

th stands for "Table Head". It defines the heading of the table columns. In columns, we add the data in vertical manner.

Syntax

<table>
        <tr>
           <th>Heading</th>  
        </tr>
</table

Example :-

Using one row having table headings (three columns).

<td>

td stands for "Table data". It is used to get added the data into rows according to the headings. <th> and <td> works in a same way but it is good practice to use <th> for table headings and<td> for content or data into the rows.

Syntax :-

 <table>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>

Example :-

<caption>

caption is a container tag used in table to give the caption to the table. It shows the caption outside the table boundary

Syntax

<table>
        <caption>Caption to show here</caption>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
        <tr>
            <td>Table data</td>
            <td>Table data</td>
            <td>Table data</td>
        </tr>
    </table>

Example : -

<thead>

thead is a tag which is used as a header of the table. It groups the header.

<tfoot>

tfoot is a tag which is used as a footer of the table. It is used to make the sum up of the data of the table .

<tbody>

tbody is a tag which is used to add the content of the table. It contains the data of the table.

Syntax : -

 <table>
        <caption>Caption Here</caption>
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data here </td>
                <td>Data here</td>
            </tr>
            <tr>
                <td>Data here</td>
                <td>Data here</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Footer </th>
                <th>Footer</th>
            </tr>
        </tfoot>
    </table>

Example : -

Attributes used in Table

span

span is used to group one or more cell. It can be either row or column.

For grouping cells horizontally, we can use row-span and for grouping cells vertically we can use col-span

Syntax :-

 <table>
            <tr>
                  <th colspan="Value">Table Heading/Data </th>
            </tr>
            <tr>
                  <td rowspan="Value">Table Heading/Data</td>

Example :-

scope

scope has no visual impact on the table but it is used in <th> tag to get know whether the heading is for row or column. In simple terms, scope is used for screen readers to let them know whether the head is for row or column.

Syntax :-

<table>
        <tr>
                <th scope = "row | column | colgroup | rowgroup"> </th>
        </tr>
</table>

#Summary

In this article, we have gone through the <table> tag and all its underlying tags i.e. <tr> , <th> ,<td> ,<thead> ,<tbody> , <tfoot> ,<caption> .We also talked about its main attributes i.e. scope and span.

Hope it was helpful.

Happy Learning!

LinkedIn Profile :- linkedin.com/in/simran-8b7310249

Github Profile :- github.com/simran-24