Find the best tutors and institutes for Web Designing

Find Best Web Designing Classes

Please select a Category.

Please select a Locality.

No matching category found.

No matching Locality found.

Outside India?

Search for topics

HTML Tables

Gaurav Rai
28 Mar 0 0

Introduction to HTML Tables

To use any data in a structured form you'll use table. By including tables in your webpage you can make it more structured and creative. To create tables in HTML you use <table> tag. There is a sub tag of this <table> tag which is known as <tr> table row tag. <tr> tag also has its sub tag which is called <td> table data tag. 

Creating Tables in HTML

 Any table is made by row and columns. So after <table> tag for creating row you use <tr> tag. The more you want to create rows the more you have to define <tr> tag. After creating rows columns were created in rows. The more you  want create columns the more have to define <td> tag.

The example has been given below:

  

<html>
<head><title>table web page</title>
</head>
<body>
<table border="1">
<tr>
<td>First row first column</td>
<td>First row second column</td>
</tr>
<tr>
<td>Second row First column</td>
<td>Second row Second column</td>
</tr>
</table>
</body>
</html>
The output of the above code is given below:
First row first column First row second column
Second row First column Second row Second column
While creating table you have to always remember order of tags. The first is <table> tag. After that <tr> tag. Then after that <th> and <td> tag will come.

One more thing you have remember when you'll not define the value of table by border attribute then table border will not show.

Creating Table Headings

If you want, you can create your heading in the first row of table. Heading is more bold than the other text of table. For example if you create a table which store the information of table, then you can create Name, Address, etc. for heading. <th> tag is used for creating heading. This is called table heading tag. In this tag whatever text you're using, it will show in the web page. This tag is used in the <tr> tag.
 
The example has been given below:
 
<html>
<head><title>Table Heading Tag</title>
<.head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>
Gaurav Rai
</td>
<td>India</td>
</tr>
</table>
</body>
</html>

 

The code given above is generated the following output in the web page:
 
Name Address
Gaurav Rai India

 

Colspan Atttribute

You can divide any particular row of column in more than one column. For doing this you have to define colspan attribute. The column you define the colspan they will sorrounds  as much space.
 
The has been given below:
 
<html> 
<head><title>colspan attribute</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">
Mobile No.
</th>
</tr>
<tr>
<td>Gaurav</td>
<td>9540168751</td>
<td>8506091548</td>
</tr>
<tr>
<td>Prarreek</td>
<td>8587078127</td>
</tr>
</table>
</body>
</html>

 

It will give the following output:
 
 
Name Mobile No.
Gaurav 9540168751 8506091548
Prarreek 8587078127

 

As you can see, Gaurav has two mobile number and Prateek has only one mobile number. If you normally create a table then you'll see the row of Prateek  table got empty. So, the table will not looks good. This is a benefit of colspan attribute.
 

Rowspan Attribute

Rowspan is also like a colspan. you could define it in a <tr> or <td> tag. As much value you give in this attribute that row surrounds as it is value.
 
The example has been given below:
 
<html> 
<head><title>Rowspan Attribute</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Colors</th>
<td>Red</td>
<tr>
<td>Lime</td>
</tr>
<tr>
<th rowspan="2">Fruits</th>
<td>Guava</td></tr>
<tr>
<td>Apple</td>
</tr>
</table>
</body>
</html>

 

The output of the above has been given below:
 
Colors Red
Lime
Fruits Guava
Apple

 

Naming The Table

You can give the name of table which is called caption. <caption> tag is used for this. It is defined after the <table> tag.
 
The example has been given below:
 
<html> 
<head><title>Naming the Table</title>
</head>
<body>
<table border="1">
<caption>Table Name</caption>
<tr>
<td>Gaurav Rai</td>
<td>India</td>
</tr>
</table>
</body>
</html>

 

The output of the above code is given below:
 
Table Name
Gaurav Rai India
0 Dislike
Follow 1

Please Enter a comment

Submit

Other Lessons for You

What Is Web Designing Or Composition?
What is web Designing or composition? Quickly, web designing implies arranging, creation and refreshing of websites. Web composition likewise includes data engineering, site structure, UI, route ergonomics,...

Why Angularjs Is Highly Popular?
AngularJS is a full-fledged JavaScript framework. It has made the life of JavaScript developers very easy. It provides some amazing features which were not present in any of the single JS framework ever....

Ashish Soni | 23/05/2018

1 0
0

Be Carefull While Uploading A file To Server Using PHP
With PHP, it is easy to upload files to the server. However, with ease comes danger, so always be careful when allowing file uploads. 1. Configure The "php.ini" File: First, ensure that PHP is configured...

Praveen Tyagi | 19/07/2017

0 0
0

A Guide To Become A Full-Stack Developer
Full-Stake Web Development, according to the Stack Overflow 2016 Developer Survey is the most popular developer occupation today. It’s no wonder then that there are dozens of online and in-person...

Ashish Soni | 18/07/2017

1 0
0

What Is PHP?
PHP stands for PHP: Hypertext Preprocessor PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP is free to download and use PHP files can contain text,...

Rohit Raj Verma | 24/06/2017

1 0
0

Find Best Web Designing Classes?

Find Now »

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 25 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 6.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more