How To Add Table In Webpages Using HTML Tags

Sometimes we need to put data in rows and column, so we create table using table tags for it. We can also put images, links and table with in the table by using table tags in html.

Table are also used to create the basic structure for website, people design very beautiful home pages of their website by using table and pictures, links with in rows and column.

Before creating table you should aware about these table tags that are basic part of each table

<table>:

It declares a table for your webpage

<tr>:

It determines row of your table

<th>:

It determines table heading with in cell

<td>:

It define the data within table cell

Let us start creation of table form basic using above tags

Reg.No	Name	Semester
1343-343405	Asghar Ali Khan	Spring 2017

 

Code for this example:

 

 

 

Now we expand this table by adding more data, it has three rows and column respectively

Reg.No	Name	Semester
1343-343405	Asghar Ali Khan	Spring 2017
1343-343406	Laura Godin	Spring 2017
1343-343407	Stephan Hall	Spring 2017

 

Code this Example:

 

 

Table Attributes:

Table has many attributes that are used for different purposes such has, border, height, width, rowspan, colspan etc.

Lest discuss some important attribute that are used most of the time

Cellspacing=” ” :

This attribute used to set the space between cells.

Cellpadding= ” ” :

This attribute used to set the padding in cells

Height=” ” :

It defines the height of an table

Width= ” ” :

It define the width of your table.

Border: ” ” :

It define the border of a table , in table border is necessary to show lines.

Rowspan: ” ” :

Making a cell span to your defined rows, means you can merge two  or more than rows.

Colspan: ” ” :

Making a cell span to your defined column, means you can merge two or more than two column.

 

Using  Colspan & Rowspan:

We use colspan attribute if we want to merge two or more columns into a single column. Similary, we will use rowspan if we want to merge two or more rows in a single row.

 

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell2	Row 1 Cell 3
	Row 2 Cell2	Row 2 Cell 3
Row 3 Cell 1

 

 

In above table you can see in column 1 we merged two rows similarly we merged three columns in Row3.

Code Example of above table:

 

 

Nested Table in Html:

Nested table are use to create front page of website and structure, nested means table with in the table. Not only tables you can use almost all the tags inside table data tag <td>.

Code Example:

 

 

If you have any question related to this post put in under comment section