-->

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:

HTML page to work with picture tag

We have following example to understand about picture tag.
----------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
HTMl with picture tag
</title>
</head>
<body><!--it is a container-->
<!--tag to display different picture-->
<!--that fits best to the browser-->
<!--the picture is chosen by the browser depending upon
the device or view.
-->
  <picture>
  <!-- we are using two pictures-->
  <!--which one to chose, it is decided by browser-->
  <!--depending upon device or view-->
  <source srcset="coffee.jpg">
  <source srcset="glass.jpg">
  <!--we use <img src...>at the end because
  if none of the src matched or
  if the browser does not support <picture> tag.
  then browser uses picture  with this im src.
  -->
  <img src="picture.jpg" alt="Beatles" style="width:auto;">
</picture>
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--it repeats the picture-->
<!-- to avoid it we use css.We will learn in css unit-->
</body>
</html>
--------------------------------------------------------------------------------
note: please store the picture in same folder as that html is.
To understand clearly, read the comment section.
 
No comments:
Labels: