-->

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: