HTML table tag HTML table tag

The second container tag about which you will learn in this tutorial is the <table> tag. It is very different from the <div> tag you learnt in the previous tutorial and is used only for creating specific kind of layout. As you can easily understand from the name of this tag, the <table> tag is used to create a tabular structure with rows and columns.

What does the table tag do?

Let's take a small example to help you understand the <table> tag better. When you were in school your class teacher had an attendance register which had roll number and names of each student in the class and it was used to take attendance every day. If you have to create a similar table to store the roll number and name of each student in the class, it will look like this

Roll No. Name
1 Aman
2 Ajay
3 Binny
4 Candy


To create a table like the one shown above you have to use the <table> tag in HTML. The <table> tag will help you create rows and columns so that you can display your information in the tabular form on your page.

How to use the <table> tag?

Unlike the <div> tag, the <table> tag is not used alone. There are 3 tags you have to use together in order to create a table structure. These three tags are

  1. <table> - Used to mark the starting and end of a table.
  2. <tr> - Used to mark the starting and end of a row inside the table. The <tr> tag is always used inside the <table>tag.
  3. <td> - Used to mark the starting and end of a column inside a row. The <td> tag is always used inside the <tr> tag.

The <tr> tag cannot be used outside the <table> tag and the <td> tag cannot be used outside the <tr> tag.  The <table> tag creates the outer structure of the table, <tr> creates the rows and <td> creates the columns.

Let’s take an example

Suppose you want to create a table of all the students in the class and for each student you want to write their roll number, name and email ids. Below is the HTML code to create such a table

<html>      
    <head>                
        <title> Table of all students in the class </title>
        <meta name=”description” content=”This page contains a  table of all the students in my class.” />                
        <meta name=”keywords” content=”” />        
    </head>            
    <body>            
        <table border=”1”> <!-- We have set the border attribute to 1 -->              
            <tr>                  
                <td> Roll Number </td>                  
                <td> Name </td>                  
                <td> Email Id </td>              
            </tr>              

            <tr>                  
                <td> 1</td>                  
                <td> Aman </td>                  
                <td> aman@gmail.com </td>              
            </tr>              

            <tr>                  
                <td> 2</td>                  
                <td> Ajay </td>                  
                <td> Ajay@gmail.com</td>              
            </tr>              

            <tr>                  
                <td> 3</td>                  
                <td> Candy </td>                  
                <td> Candy@gmail.com</td>              
            </tr>              

            <tr>                  
                <td> 4</td>                  
                <td> Binny </td>                  
                <td> binny@gmail.com</td>              
            </tr>          
        </table>                
    </body>  
</html>

Notice that in the <table> tag we have used an attribute called border and set its value to 1

<table border=”1”>

By doing this we are telling the browser to show a border around our table so that you can see the rows and columns in your table. It is not mandatory to set the border attribute to 1, you can set it to 0 also. By default the border for the <table> tag has value 0 and is not visible.

Now when you run your page and see the output this is what you see in the browser

Image

 
This table has 5 rows and 3 columns. All the rows you see are created using the <tr> tag. The three columns you see for roll no, name and email id are created using the <td> tag. Below we have marked the rows and columns to help you understand the table structure better.

Image 


With this example hopefully you have understood the purpose and usage of the <table> tag. Just like <div> it is also a very useful container tag, but is only used when you want to display information in a table format.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp