Table Align in HTML

Introduction

 

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>