Html Question posted in
Some basic documentation can be found here.

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 ?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Here is the updated code using which you can align the content of the 1st, 3rd and 5th row to right and remaining ones to left. you have used id selector which is used to uniquely identify every element of your code. But as per your requirement we can use class selector to apply same style to selected rows(i.e, 1,3 and 5). I hope this is what you want to do.

    <html>
<head>
    <style>
      td.first_style {
        text-align: left;
        color: red;
      }
      td.second_style {
        text-align: right;
        color: blue;
        
      }
    </style>
</head>

<body>

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

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search