gpt4 book ai didi

HTML First column wise 着色和对齐中心

转载 作者:太空宇宙 更新时间:2023-11-04 06:51:49 25 4
gpt4 key购买 nike

enter image description here我有下面的 HTML 表格,我正在尝试的是“彩色表格标题”在这个例子中必须显示不同的颜色,比如蓝色。Peter、Lois、Joe、Cleveland 应为绿色(与 FistName LastName 保存格式相同)

有什么可以帮助我实现的。下面是我到目前为止尝试过的代码

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: center;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>

<table align="center">
<tr>
<th>Colored Table Header</th>
</tr>
</table>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

最佳答案

<!DOCTYPE html>
<html>
<head>
<title>coloured column</title>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: center;
padding: 8px;
}


th {
background-color:yellow;
color: black;
}
</style>
</head>
<body>

<table>
<colgroup>
<col style="background-color:yellow">
</colgroup>
<tr>
<th colspan=3 style="background-color:orange">Coloured Table Header</th>
</tr>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>



</table>

</body>
</html>

检查一下,如果您想对其进行更多更改但仍然感到困惑,请在下面发表评论。如需更多引用,请访问 here .我希望这能解决您的问题。

关于HTML First column wise 着色和对齐中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52799796/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com