1. 基础表格样式
以下是一个简单的JSP表格示例,展示了基本的HTML和CSS样式。
```html

table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: f2f2f2;
}
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 28 | 程序员 |
| 李四 | 35 | 设计师 |
```
2. 带边框和背景色的表格
```html
table {
width: 100%;
border-collapse: collapse;
border: 2px solid 000;
background-color: f9f9f9;
}
th, td {
border: 1px solid ddd;
padding: 8px;
text-align: left;
}
th {
background-color: 4CAF50;
color: white;
}
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 28 | 程序员 |
| 李四 | 35 | 设计师 |
```
3. 带条纹的表格
```html
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: f2f2f2;
}
th {
background-color: f2f2f2;
}
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 28 | 程序员 |
| 李四 | 35 | 设计师 |
```
4. 带圆角的表格
```html
table {
width: 100%;
border-collapse: collapse;
border: 2px solid 000;
background-color: f9f9f9;
border-radius: 10px;
}
th, td {
border: 1px solid ddd;
padding: 8px;
text-align: left;
}
th {
background-color: 4CAF50;
color: white;
}
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 28 | 程序员 |
| 李四 | 35 | 设计师 |
```
以上就是一些常见的JSP表格样式实例。你可以根据实际需求,结合上述样式进行修改和调整。







