ARTICLE

Table Align in HTML

Posted by Mayur Gujrathi Articles | 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
comments
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter