Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 31 Aug, 2021
Geek Week

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:

  • table: In HTML “table” tag is used to define a table.
  • tr: For defining table rows, the “tr” tag is used.
  • th: “th” stands for a table header, for defining table header “th” tag is used. A table header is bold and centred.
  • td: To insert or add data in each cell, Table Data “td” tag is used.

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

  • Create a table tag under the body tag.
  • To define rows, add the Table Row(tr) tag under the table.
  • For table headers use Table Header(th) tag in the particular row.
  • To add data to a table, create a row and use the “td” tag to insert data inside each row.

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.

index.html




<!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.

index.html




<!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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :