-->

HTML with table tag

table is an important tag we use to store and display our data.
To understand table tag with attributes, let's use following examples.
-----------------------------------------------------------------------------
1) HTML page to understand table tag 
                                                                         click here

2)HTML page with table tag and attributes

                                                                       click here

3)HTML page with table tag and attributes border color

                                                                       click here

4)HTML page with table tag and attributes background color

                                                                       click here

5)HTML page with caption tag.

                                                                          click here

6)HTML page with heading 

                                                                       click here

7)HTML page with heading using heading tag(th)

                                                                        click here
8)HTML page with heading with centered data

                                                                       click here
9)HTML page with heading with centered data using row align

                                                                       click here



10)HTML page with cellpadding and cellspacing

                                                                         click here

11)HTML page with rowspan property.

                                                                         click here
12)HTML page with colspan property

                                                                          click here

13)HTML page with rowspan and colspan

                                                                        click here

14)HTML page with rowspan and colspan

                                                                     click here
 15)HTML page with rowspan and colspan

                                                                      click here


No comments:

HTML with colspan and rowspan

another example of rowspan and colspan is given below.
---------------------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan and colspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<caption align="top">student's details</caption>
<tr>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
</tr>
<tr>
<!--merges two rows and columsn -->
<td colspan=2 rowspan=2 bgcolor="purple">two</td>
<td>three</td>
<td>one</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
</tr>

</table><!--closing of table-->
</body> <!--closing of body-->
</html> <!--closing of html-->

 
No comments:
Labels:

HTML with colspan property

if we merge two or more columns then it is called colspan.
-------------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">

<caption align="top">student's details</caption>
<tr>
<!-- it merges two columns-->
<td colspan=2>one</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table><!-- closing of table-->
</body><!-- closing of body-->
</html><!-- closing of html-->

 
No comments:
Labels:

html with colspan and rowspan tags

we can understand better about colspan and rowspan using following example.
--------------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan and colspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<caption align="top">student's details</caption>
<tr>
<td>one</td>
<!--following code merges two columns and rows-->
<td colspan=2 rowspan=2>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
</tr>
</table><!--closing of table-->
</body> <!--closing of body-->
</html> <!--closing of html-->

 
No comments:
Labels:

HTML with caption tag

caption tag is a name of table.
-------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan and colspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<!-- it puts the caption at the top-->
<caption align="top">student's details</caption>
<tr>
<th>id</th>
<th>name</th>
<th>grade</th>
</tr>
<tr align="center" bgcolor="purple">
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
</table><!--colsing of table-->
</body> <!--closing of body-->
</html> <!--closing of html-->

 
No comments:
Labels:

HTML with cellpadding and cellspacing

What is cellpadding and cellspacing, let's take following example.
-----------------------------------------------------------------------------------------
HTM<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with cellpadding and cellspacing
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<!--it changes the padding to 8px and spacing to 10 px
-->
<table border="1" width="100%" bordercolor="green" CELLPADDING=8 cellspacing="10">
<caption align="top">student's details</caption>
<tr>
<td rowspan=2 COLSPAN=2>one</td>
<td>THREE</td>
</tr>
<tr>
<td>SIX</td>
</tr>
<tr>
<td>SEVEN</td>
<TD>EIGHT</TD>
<TD>NINE</TD>
</tr>
</table><!--closing of table-->
</body> <!--closing of body-->
</html> <!--closing of html-->

 
No comments:
Labels:

html page with data align in row


instead of applying align to different data, we can directly apply to row.
------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">

<tr>
<th>id</th>
<th>name</th>
<th>grade</th>
</tr>
<!--instead of using align separately with td,
simply we can use with tr tag.
it applies to all cell of that row-->
<tr align="center">
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
</table>
</body>
</html>

 
No comments:
Labels:

HTML page with headings and centered data

Following example can be taken to understand this.
----------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with centered data
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<tr>
<th>id</th>
<th>name</th>
<th>grade</th>
</tr>
<!--following code is used with center align-->
<!--we can also use right/left/justify-->
<td align="center">001</td>
<td align="center">Rajan</td>
<td align="center">10</td>
</tr>
</table>
</body>
</html>

 
No comments:
Labels:

HTML with heading tag(th)

We can also use th as heading tag n our page.
------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with th tag
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<tr>
<!--following code is used as heading-->
<!--simply we use th instead td tag-->
<th>id</th>
<th>name</th>
<th>grade</th>
</tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
</table><!--closing-->
</body> <!--closing-->
</html> <!--closing-->

 
No comments:
Labels:

HTML page with heading

look at following example to understand about heading.
---------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
understanding table tag with attribute
</title>
</head>
<body>
<!--we have using heading-->
<h1>we are going to creat table</h1>
<!--we use table tag with attribute border to change its border width. otherwise there will no border-->
<!-- we are using width to 100% and border color green-->
<table border="1" width="100%" bordercolor="green">
<!--we use tr(table data) tag to create row-->
<tr>
<!--we use tag td (table data)to create 
cell/column-->
<!--it creats three cells with respective data-->
<!--following part acts as heading-->
<td>id</td>
<td>name</td>
<td>grade</td>
<!--closing of first row-->
</tr>
<!-- again we create second row-->
<tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
<!--closing of table tag-->
</table>
</body>
</html>

 
No comments:
Labels:

HTML page with colspan and rowspan property

Somewhere we have to use both colspan and rowspan together.
-----------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan and colspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<!-- it is used fo caption i.e. title of table-->
<caption align="top">student's details</caption>
<tr>
<!--following code merges two rows and columns-->
<td rowspan=2 COLSPAN=2>one</td>
<td>THREE</td>
</tr>
<tr>
<td>SIX</td>
</tr>
<tr>
<td>SEVEN</td>
<TD>EIGHT</TD>
<TD>NINE</TD>
</tr>
</table><!-- closing of table tag-->
</body> <!--closing of body tag-->

</html> <!-- closing of html-->

 
No comments:
Labels:

HTML with rowspan property

To understand about rowspan property, let's take an example,
--------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--used for meta tag-->
<title><!-- it is for title tag-->
understanding table tag with rowspan
</title>
</head>
<body><!-- is container-->
<!--following tag is used as heading-->
<h1>we are going to creat table</h1>
<!-- we are going to create table-->
<table border="1" width="100%" bordercolor="green">
<!-- it is used fo caption i.e. title of table-->
<caption align="top">student's details</caption>
<tr>
<!--following code merges two rows so we use rowspan=2-->
<td rowspan=2>one</td>
<td>data two</td>
</tr>
<tr>
<td>three</td>
</tr>
</table>
</body>
</html>

 
No comments:
Labels:

HTML with attributes

We can change the color of background of table ans shown in code.
----------------------------------------------------------------------------
<html>
<head>
<title>
understanding table tag with background color
</title>
</head>
<body>
<h1>we are going to creat table</h1>
<table border="1" width="100%" bordercolor="green" bgcolor="purple">
<tr>
<td>id</td>
<td>name</td>
<td>grade</td>
</tr>
<tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
</table>
</body>
</html>

 
No comments:
Labels:

html with border color

we can apply color to border of table as shown below.
----------------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
understanding table tag with attribute
</title>
</head>
<body>
<!--we have using heading-->
<h1>we are going to creat table</h1>
<!--we use table tag with attribute border to change its border width. otherwise there will no border-->
<!-- we are using width to 100% and border color green-->
<table border="1" width="100%" bordercolor="green">
<!--we use tr(table data) tag to create row-->
<tr>
<!--we use tag td (table data)to create 
cell/column-->
<!--it creats three cells with respective data-->
<td>id</td>
<td>name</td>
<td>grade</td>
<!--closing of first row-->
</tr>
<!-- again we create second row-->
<tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
<!--closing of table tag-->
</table>
</body>
</html>

 
1 comment:
Labels:

html with table and attributes

We can apply different attributes to table.
--------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
understanding table tag
</title>
</head>
<body>
<!--we have using heading-->
<h1>we are going to creat table</h1>
<!--we use table tag with attribute border to change its border width. otherwise there will no border-->
<table border="1" width="100%">
<!--we use tr(table data) tag to create row-->
<tr>
<!--we use tag td (table data)to create 
cell/column-->
<!--it creats three cells with respective data-->
<td>id</td>
<td>name</td>
<td>grade</td>
<!--closing of first row-->
</tr>
<!-- again we create second row-->
<tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
<!--closing of table tag-->
</table>
</body>
</html>

 
No comments:
Labels:

HTML with table tag

Let's understand this with the help of example.
------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
understanding table tag
</title>
</head>
<body>
<!--we have using heading-->
<h1>we are going to creat table</h1>
<!--we use table tag with attribute border to change its border width. otherwise there will no border-->
<table border="1">
<!--we use tr(table data) tag to create row-->
<tr>
<!--we use tag td (table data)to create 
cell/column-->
<!--it creats three cells with respective data-->
<td>id</td>
<td>name</td>
<td>grade</td>
<!--closing of first row-->
</tr>
<!-- again we create second row-->
<tr>
<td>001</td>
<td>Rajan</td>
<td>10</td>
</tr>
<!--closing of table tag-->
</table>
</body>
</html>

 
No comments:
Labels: