如何为HTML表格每行设置对齐与颜色样式并解决代码失效问题

你的代码存在几处关键错误，导致样式无法正常生效，具体修改点如下：

1. 修正CSS选择器与属性写法 #

• 原CSS中的#first_style td选择器错误，你把标识直接加在了<td>标签上，应该直接选中该<td>元素（更推荐用class而非重复id）；
• CSS里控制文本对齐的属性是text-align，不是align，且属性值不需要加单引号，正确写法为text-align: right;。

2. 用class替代重复id #

HTML中id是唯一标识符，不能多个元素共用同一个id，所以把<td>标签里的id替换为class，同时CSS选择器改为.first_style和.second_style（class选择器以点开头）。

3. 修正表格标签语法错误 #

原代码里<table table border='1'...>多写了一个table关键字，需要删除。

修正后的完整代码 #

<html>
<head>
    <style>
    .first_style {
        text-align: right;
        color: green;
    }

    .second_style {
        text-align: left;
        color: blue;
    }
    </style>
</head>

<body>
  <table border='1' align='center' 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>

修改后即可实现第1、3、5行右对齐且文字为绿色，第2、4行左对齐且文字为蓝色的效果。

内容的提问来源于stack exchange，提问作者user3668129