Example of simple Design in HTML
This is a simple Table Design for beginners, i will get this from some site.


<html>
<head>
<style type="text/css">
td
{
 font-family: Verdana, Tahoma;
 font-size:10;
}
input
{
 font-family: Verdana, Tahoma;
 font-size:10;
}
th
{
 font-family: Verdana, Tahoma;
 font-size:11;
}
div
{
 font-family: Verdana, Tahoma;
 font-size:11;
 font-weight:bold;
}
</style>
</head>
<div>Creating Border Using border Color Property</div>
<br>
   <table width="80%"   cellspacing="0" cellpadding="4"  border="0" style="border: navy 1px solid;">

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
                </table>
<br>
<div>Creating Border Using CellPadding =1 with nested Table</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="1"  border="0">
 <tr>
  <td  bgcolor="navy">
   <table width="100%"   cellspacing="0" cellpadding="4"  border="0" >

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
                </table>
  </td>
 </tr>
</table>
<br>
<div>Creating Inner Border Using Border=1</div>
<br>
   <table width="80%"   cellspacing="0" cellpadding="2"  border="1" bordercolor="navy">
    <tr>
     <th bgcolor="#EFEFEF">Name</th><th bgcolor="#EFEFEF">AGE</th><th bgcolor="#EFEFEF">Mobile</th>
                </tr>                  
    <tr>
     <td bgcolor="#FFFFFF">Ram</td><td bgcolor="#FFFFFF">25</td><td bgcolor="#FFFFFF">9855555525</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Raju</td><td bgcolor="#FFFFFF">23</td><td bgcolor="#FFFFFF">9445545625</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Sam</td><td bgcolor="#FFFFFF">24</td><td bgcolor="#FFFFFF">9444145285</td>
                </tr>
                </table>
<br>
<div>Creating Inner Border Using Cellspacing =1 with nested Table</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="0"  border="0">
 <tr>
  <td  bgcolor="navy">
   <table width="100%"   cellspacing="1" cellpadding="2"  border="0" >
    <tr>
     <th bgcolor="#EFEFEF">Name</th><th bgcolor="#EFEFEF">AGE</th><th bgcolor="#EFEFEF">Mobile</th>
                </tr>                  
    <tr>
     <td bgcolor="#FFFFFF">Ram</td><td bgcolor="#FFFFFF">25</td><td bgcolor="#FFFFFF">9855555525</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Raju</td><td bgcolor="#FFFFFF">23</td><td bgcolor="#FFFFFF">9445545625</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Sam</td><td bgcolor="#FFFFFF">24</td><td bgcolor="#FFFFFF">9444145285</td>
                </tr>
                </table>
  </td>
 </tr>
</table>
<br>
<div>Creating Double Border Using border Color Property</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="2"  border="0"  style="border: navy 1px solid;">
 <tr>
  <td  bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4"  border="0" style="border: navy 1px solid;">

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
                </table>
  </td>
 </tr>
</table>
<br>
<div>Creating Double Border Using border Color Property</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="2"  border="0"  style="border: navy 1px solid;">
 <tr>
  <td  bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4"  border="0" style="border: navy 1px solid;">
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
                </table>
  </td>
 </tr>
 <tr>
  <td  bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4"  border="0" style="border: navy 1px solid;">
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>  
                </tr>
                </table>
  </td>
 </tr>
</table>
<br>


The design looks like below,

00:08 | Category: | 0 comments

Comments (0)

Post a Comment