Copy the following code into any editor you want and save it as .html. This will show table alignment and also changing color on mouseover event:
<table align="left" border="0" cellpadding="0" cellspacing="0" > <tr <th align="left" style="height: 17px; width:10%">STATE</th> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';" >ANDHRAPRADESH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';" >ARUNACHALPRADESH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">ASSAM</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">BIHAR</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'"onmouseover="this.bgColor='red';">CHATTISGARH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">GOA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">GUJARAT</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">HARYANA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">HIMACHALPRADESH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">JAMMU ANDKASHMIR</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">JHARKHAND</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">KARNATAKA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">KERALA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">MADHYAPRADESH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'"onmouseover="this.bgColor='red';">MAHARASHTRA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">MANIPUR</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">MEGHALAYA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">MIZORAM</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">NAGALAND</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">ORISSA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">PUNJAB</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">Rajasthan</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">SIKKIM</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">TAMILNADU</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">TRIPURA</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">UTTARPRADESH</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'"onmouseover="this.bgColor='red';">UTTARAKHAND</td> </tr> <tr > <td style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">WESTBENGAL</td> </tr> </table>
Table Align in HTML
Some old school HTML and JavaScript goodies
Thanks for the understanding!!!
As per Kartikeyan sir i did in my one more article as follows http://www.c-sharpcorner.com/UploadFile/5eae74/6834/
I got it. now i will do from next article, actually i did it today. i have posted one more article
It would be good if we have some explanation and screen shot of the purpose of the article... so tht readers will have clear idea on the same!!!