用HTML写 4X3的表格(可以设置表格的填充颜色,并且可以实现隔行换色的效果,点击某个单元格时可以高亮显示)
时间: 2023-06-11 22:07:05 浏览: 305
下面是一个使用HTML编写的4x3的表格,包含了填充颜色、隔行换色和点击高亮显示的功能:
```html
<table style="border-collapse: collapse;">
<tr>
<td style="background-color: #ccc; padding: 10px;">1</td>
<td style="background-color: #eee; padding: 10px;">2</td>
<td style="background-color: #ccc; padding: 10px;">3</td>
</tr>
<tr>
<td style="background-color: #eee; padding: 10px;">4</td>
<td style="background-color: #ccc; padding: 10px;">5</td>
<td style="background-color: #eee; padding: 10px;">6</td>
</tr>
<tr>
<td style="background-color: #ccc; padding: 10px;">7</td>
<td style="background-color: #eee; padding: 10px;">8</td>
<td style="background-color: #ccc; padding: 10px;">9</td>
</tr>
</table>
<style>
tr:nth-child(even) td {
background-color: #eee;
}
tr:nth-child(odd) td {
background-color: #ccc;
}
td:hover {
background-color: yellow;
}
</style>
```
在上面的代码中,我们使用`<table>`标签创建了一个表格,并使用`<tr>`和`<td>`标签创建了3行4列的表格。每个单元格都有一个`style`属性,用于设置填充颜色和内边距。然后,我们使用CSS选择器来设置隔行换色的效果和鼠标悬停时的高亮显示效果。
阅读全文