用jsp写一个三行六列的表格并且美化
时间: 2024-03-14 14:44:52 浏览: 81
js实现漂亮的table表格
5星 · 资源好评率100%
好的,以下是使用JSP和CSS美化的三行六列的表格示例代码:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美化表格</title>
<style>
table{
border-collapse: collapse;
width: 100%;
margin: auto;
border: 1px solid #ddd;
}
th, td{
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
th{
background-color: #f2f2f2;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
tr:hover{
background-color: #ddd;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
<th>标题6</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个例子中,我们定义了一个边框折叠的表格,并设置了表头、表身、单元格和鼠标悬停的背景颜色等样式。这个表格可以根据实际需求自定义修改样式,以达到美化的效果。
阅读全文