SIGN UP MEMBER LOGIN:    
ARTICLE

Table Align in HTML

Posted by Mayur Gujrathi Articles | ASP, JavaScript, CSS April 18, 2011
Sample code showing table alignment in HTML.
Reader Level:

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';" >ANDHRA
PRADESH</td>
                </tr>              
                <tr   >       
                          <td  style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';" >ARUNACHAL
PRADESH</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';">HIMACHAL
PRADESH</td>
                </tr>
                <tr   >
                          <td  style="height: 17px; width:10%" onmouseout="this.bgColor='#f2f7f0'" onmouseover="this.bgColor='red';">JAMMU AND
KASHMIR</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';">MADHYA
PRADESH</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';">UTTAR
PRADESH</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';">WEST
BENGAL</td>
                </tr>
   </table> 

Login to add your contents and source code to this article
share this article :
post comment
 

Thanks for the understanding!!!

Posted by Karthikeyan Anbarasan Apr 18, 2011

As per Kartikeyan sir i did in my one more article as follows http://www.c-sharpcorner.com/UploadFile/5eae74/6834/

Posted by Mayur Gujrathi Apr 18, 2011

I got it. now i will do from next article, actually i did it today. i have posted one more article

Posted by Mayur Gujrathi Apr 18, 2011

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!!!

Posted by Karthikeyan Anbarasan Apr 18, 2011
Nevron Gauge for SharePoint
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor