Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Saturday 5 October 2013

tabular format using css and html


--save it as .html and open in browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Reimbursement</title>
<style type="text/css">
body
{line-height: 1.2em;text-align: center;}

                                                        #box-table-b
{font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;font-size: 12px;
margin: 5px;width: 670px;text-align: left;border-collapse: collapse;border-bottom: 7px solid #808080;}
#box-table-a1
{font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;font-size: 13px;margin: 10px;
width: 670px;text-align: left;background: #e8edff;border-collapse: collapse;border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;}
#box-table-b th
{font-size: 13px;font-weight: normal;padding: 8px;background: #e8edff;
border-right: 1px solid #C0C0C0;border-left: 1px solid #C0C0C0;color: #000000;}
#box-table-b td
{padding: 8px;background: #C0C0C0;border-right: 1px solid #C0C0C0;
border-left: 1px solid #808080;color: #000000;}
#box-table-a
{font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;font-size: 11px;
margin: 5px;width: 670px;text-align: left;border-collapse: collapse;border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;}
#box-table-a td
{padding: 0px;background: #C0C0C0;border-right: 1px solid #ffffff;border-left: 1px solid #ffffff;
border-top: 1px solid #ffffff;border-bottom: 1px solid #ffffff;color: #000000;}
.note
{font-size: 10px;text-align: center;font-weight: normal;padding: 0px;
text-align: center;color: #000000;}
.LoginMsg
{font-size: 13px;font-weight: normal;padding: 5px;background: #808080;
color: #000000;text-decoration: none;}
A:visited
{font-size: 13px;font-weight: normal;padding: 5px;background: #C0C0C0;
font-weight: bold;color: #000000;text-decoration: underline;}
A:link
{font-size: 13px;font-weight: normal;padding: 5px;background: #808080;
font-weight: bold;color: #000000;text-decoration: underline;}
A:active
{font-size: 13px;font-weight: normal;padding: 5px;background: #C0C0C0;
font-weight: bold;color: #000000;text-decoration: underline;}
A:hover
{cursor: hand;font-size: 13px;font-weight: normal;padding: 5px;background: #C0C0C0;
color: #000000;text-decoration: underline;font-weight: bold;}
.abc
</style>
</head>



<body>

<table id="box-table-b" border="0px">
<tr>
<td>
<strong>Dear Ruchi <br /><br />
I miss you a lot. My Second Love letter in Tabular form<br /> <br />
</strong>
</td>
</tr>


<tr>
<td align="center">
<table id="box-table-a" style="vertical-align: top; text-align: left">



<tr style="height:24px">
<td style="background-color: #FF7F50; width: 155px; padding-right: 2px; padding-left: 2px; padding-bottom: 10px; padding-top: 2px;" valign="top">
GELHI WHY ?:
</td>





<td colspan="3" style="background-color: #87CEFA; padding-right: 2px; padding-left: 2px;padding-bottom: 2px;padding-top:2px; width:187px;" valign="top">
BECAUSE OF YOUR SWEETNESS IN YOUR VOICE
</td>
</tr>



<tr style="height:24px">
<td style="background-color: #FF7F50; width: 135px; padding-right: 2px; padding-left: 2px;padding-bottom: 2px; padding-top: 2px;" valign="top">
Cute
</td>

<td style="background-color: #87CEFA; padding-right: 2px; padding-left: 2px; padding-bottom:2px;padding-top: 2px; width: 187px;" valign="top">
Because you are Nadaan
</td>

<td style="background-color: #FF7F50; width: 112px; padding-right: 2px; padding-left: 2px;padding-bottom: 2px; padding-top: 2px;" valign="top">
Pyari
</td>

<td style="background-color: #87CEFA; padding-right: 2px; padding-left: 2px; padding-bottom:2px;padding-top: 22px;" valign="top">
Because you are soft hearted
</td>
</tr>




<tr style="height:24px"><td style="background-color: #FF7F50; width: 135px; padding-right: 2px; padding-left: 2px;padding-bottom: 2px; padding-top: 2px;" valign="top">
Lovable
</td>
<td style="background-color: #87CEFA; padding-right: 2px; padding-left: 2px; padding-bottom:2px;padding-top: 2px; width: 187px;" valign="top">
Because you are sweety pieee
</td>


<td style="background-color: #FF7F50; width: 112px; padding-right: 2px; padding-left: 2px;padding-bottom: 2px; padding-top: 2px;" valign="top">
your Eyes
</td>
<td style="background-color: #87CEFA; padding-right: 2px; padding-left: 2px; padding-bottom:2px;padding-top: 2px;" valign="middle">
Glaze like stars
</td>
</tr>



<tr style="height:24px">
<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; width: 135px;padding-top: 2px; background-color: #FF7F50;" valign="top">
you Hair
</td>
<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; width: 187px;" valign="top">
Like waves in Ocean
</td>

<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; width: 112px;padding-top: 2px; background-color: #FF7F50;" valign="top">
Beautiful
</td>


<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; height: 24px;" valign="middle">
Like An angel
</td>
</tr>



<tr style="height:24px"><td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; width: 135px;padding-top: 2px; background-color: #FF7F50;" valign="top">
Who Created this Angel:
</td>

<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; width: 187px;" valign="top">
God
</td>

<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px;width: 112px; padding-top: 2px; background-color: #FF7F50;" valign="top" >
Your Sense of Humour
</td>

<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; height: 24px;" valign="middle">
Like Kapil in Comedy Nights
</td>
</tr>



<tr style="height:24px">
<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; width: 112px;padding-top: 2px; background-color: #FF7F50;" valign="top">
Your Gussa
</td>
<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; height: 24px;" valign="middle" >
Like Reopening Trinetra of Shiva
</td>


<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; width: 112px;padding-top: 2px; background-color: #FF7F50;" valign="top">
you Miss
</td>

<td style="padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;background-color: #87CEFA; height: 24px;" valign="middle" >
Me and only Me :)
</td>
</tr>


</table>
<br />


</td>
</tr>


<tr>
<td align="center" style="padding: 1px; background-color: #808080;">
</td>
</tr>


<tr>
<td>
Regards,<br />
Your Sweet ANU
<br />
Mai din maai itna hi taarif karta hu...:P



<a href="http://www.google.co.in/imgres?imgurl=http://upload.wikimedia.org/wikipedia/commons/5/51/Small_Red_Rose.JPG&imgrefurl=http://commons.wikimedia.org/wiki/File:Small_Red_Rose.JPG&h=1704&w=2272&sz=1348&tbnid=vvzCDxby-i-RLM:&tbnh=131&tbnw=175&zoom=1&usg=__-JRrVas9KRcvVFSLb_jt8m1k3i4=&docid=85oZuug9auVp-M&sa=X&ei=qwpPUtDuCMqUrAflnID4Aw&sqi=2&ved=0CC0Q9QEwAA">Clik here for your gift</a>
</td>
</tr>

<tr>
<td align="center" style="padding: 1px; background-color: #808080;">
<span class="note">(This is an Auto Generated Love Letter. Please love me till end of your life)</span>
</td>
</tr>




</table>
</body>
</html>