-->

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: