How to change alignment of each cell in html table?

I want to create HTML table, which I can choose for each row its properties (alignment + color)

I tried with the following code, but that doesn’t give me the results I want:

<html>
<head>
    <style>

    #first_style td {
        align='right'
        color: green;
    }

    #second_style td {
        align='left'
        color: blue;
    }

    </style>
</head>

<body>

  <table table border='1' align='center' style='width:100%'>
    <tr> 
      <td id='first_style'>Alfreds Futterkiste</td>    
    </tr>
    <tr>
      <td id='second_style'>Berglunds snabbköp</td>    
    </tr>
    <tr>
      <td id='first_style'>Centro comercial Moctezuma</td>    
    </tr>
    <tr>
      <td id='second_style'>Ernst Handel</td>    
    </tr>
    <tr>
      <td id='first_style'>Island Trading</td>    
    </tr>
  </table>

</body>
</html>

enter image description here

  • Rows: 1, 3, 5 are not aligned to the right
  • All rows without a color

What I need to change to get the right results ?

>Solution :

Try this out it’s working.
replace your CSS with this.

<style>

#first_style
{
    text-align: center;
    color:blue;
}

#second_style
{
    text-align: right;
    color:red;
}
</style>

Leave a Reply