<table class="table text-center"> <tr> <td class="table-light" style="width: 45px" > <input type="checkbox" id="selectAll"> </td> <td class="table-primary">学生编号</td> <td class="table-info">学生学号</td> <td class="table-success">学生姓名</td> <td class="table-danger">学生性别</td> <td class="table-warning">学生出生日期</td> <td class="table-info">学生地址</td> <td class="table-light">学生电话</td> <td class="table-primary">学生照片</td> <td class="table-danger">学生班级</td> <td class="table-dark">操作</td> </tr> <c:forEach items="${list.list }" var="student" varStatus="status"> <tr> <td style="width: 45px" ><input type="checkbox" name="idCheckbox" value="${student.stuId }"> </td> <td>${student.stuId }</td> <td>${student.stuNo}</td> <td>${student.stuName }</td> <td>${student.stuSex }</td> <td>${student.stuBirth }</td> <td>${student.stuAddress }</td> <td>${student.stuPhone }</td> <td><img alt="" src="${pageContext.request.contextPath}/images/StudentPhoto/${student.stuPhoto }" width="100px" height="100px"></td> <td>${student.classes.className }</td>美化一下
时间: 2023-07-19 22:39:24 浏览: 74
你可以使用 Bootstrap 或者其他 CSS 框架对这个表格进行美化。例如,可以添加表头样式、表格边框、表格行的鼠标悬停效果等等。以下是一个简单的示例:
```html
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th style="width: 45px"><input type="checkbox" id="selectAll"></th>
<th>学生编号</th>
<th>学生学号</th>
<th>学生姓名</th>
<th>学生性别</th>
<th>学生出生日期</th>
<th>学生地址</th>
<th>学生电话</th>
<th>学生照片</th>
<th>学生班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list.list}" var="student" varStatus="status">
<tr>
<td><input type="checkbox" name="idCheckbox" value="${student.stuId}"></td>
<td>${student.stuId}</td>
<td>${student.stuNo}</td>
<td>${student.stuName}</td>
<td>${student.stuSex}</td>
<td>${student.stuBirth}</td>
<td>${student.stuAddress}</td>
<td>${student.stuPhone}</td>
<td><img alt="" src="${pageContext.request.contextPath}/images/StudentPhoto/${student.stuPhoto}" width="100px" height="100px"></td>
<td>${student.classes.className}</td>
<td>操作按钮</td>
</tr>
</c:forEach>
</tbody>
</table>
```
你可以根据自己的需求进行调整,达到更好的视觉效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<title>医院住院管理系统</title> </head> <body> 药品发放 <form id="drugs_delivery"> <label>*住院号:</label> <input results="s" type="search" readonly name="patientId" id="patientId" /> <label>*姓名:</label> <input type="text" readonly name="patientName" id="patientName" /> <label>*药品编号:</label> <input type="search" results="s" readonly name="drugId" id="drugsId" /> <label>数量:</label> <input type="text" name="drugCount" id="num" onblur="checkdrugsnum()" /> <input type="hidden" name="num1" id="num1"> <label>*药品名称:</label> <p cla
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)