Open In App

Which tags are used to displaying data in tabular form in HTML ?

In this article, we will discuss the tags used to display the data in tabular form.

Tags: Tags are the starting and ending parts of an HTML element. Every tag starts with the “<” symbol and ends with the”>” symbol. Whatever inside these symbols are called tags. Opening and closing tags are used to store any information inside the tag.

Opening tags are represented by <tag_name> and closing tags are represented by </tag_name>.

Syntax:

<table> INFORMATION INSIDE THE TAG </table>

Attributes: Attributes are used to describe the characteristics of an HTML element. All HTML elements can have attributes. An attribute has two parameters, name and value, to define the properties of an element and these parameters are placed under the opening tag of the element.

Syntax:

<tag_name attribute_name="attribute_value">
    DATA INSIDE THE TAG
</tag_name>

Note: Please refer to the HTML attribute article for a better understanding. 

The tags used to create a table in HTML are:

Approach: Now to display data in a tabular format using the above tags and attributes we will be following below steps:

Below is the implementation of the above approach.

Example 1: In this example, we will create a simple table and display it without using any attribute.




<!DOCTYPE html>
<html lang="en">
  
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Ram</td>
            <td>Dwarika East</td>
            <td>9999999999</td>
        </tr>
        <tr>
            <td>Arjun</td>
            <td>Mumbai</td>
            <td>0808080808</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>Delhi</td>
            <td>7979797979</td>
        </tr>
    </table
</body>
  
</html>

Output:

Example 2: In this example, we will create a table with attributes and will use the style attribute to display content that covers the full width and align the text in the center of the table.




<!DOCTYPE html>
<html lang="en">
  
<body>
    <table style="width:100%; text-align:center">
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Ram</td>
            <td>Dwarika East</td>
            <td>9999999999</td>
        </tr>
        <tr>
            <td>Arjun</td>
            <td>Mumbai</td>
            <td>0808080808</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>Delhi</td>
            <td>7979797979</td>
        </tr>
    </table
</body>
  
</html>

 Output:


Article Tags :