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>
- 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>