英文:
How to change alignment of each cell in html table?
问题
我想创建HTML表格，每一行我都可以选择其属性（对齐方式 + 颜色）。
我尝试了以下代码，但没有得到我想要的结果：
<html>
<head>
<style>
#first_style td {
text-align: right;
color: green;
}
#second_style td {
text-align: left;
color: blue;
}
</style>
</head>
<body>
<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>
- 行：1、3、5 的对齐方式不正确。
- 所有行都没有设置颜色。
要获得正确的结果，您需要将CSS样式中的 "align" 更改为 "text-align"，并确保每个行的样式正确应用。
英文:
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 ?
答案1
得分: 2
尝试这个，它正在工作。
用这个替换你的CSS。
<style>
#first_style
{
text-align: center;
color: 蓝色;
}
#second_style
{
text-align: right;
color: 红色;
}
</style>
英文:
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>
答案2
得分: 0
这是使用更新后的代码，您可以将第1、3和5行的内容对齐到右侧，其余行对齐到左侧。您使用了id选择器，它用于唯一标识代码中的每个元素。但根据您的要求，我们可以使用class选择器来将相同的样式应用于所选行（即1、3和5）。希望这符合您的要求。
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论