学生信息表html代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息表</title>
</head>
<body>
<h2>学生信息表</h2>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>女</td>
<td>78</td>
</tr>
<tr>
<td>王五</td>
<td>19</td>
<td>男</td>
<td>92</td>
</tr>
</table>
</body>
</html>
这个HTML代码创建了一个简单的学生信息表,包含姓名、年龄、性别和成绩等字段。你可以根据需要修改表格内容以及样式。
如果你想添加更多学生信息到表格中,只需在 <table> 标签内添加更多的 <tr> 行,并在每一行中填写相应的学生信息即可。例如:
html<tr>
<td>赵六</td>
<td>22</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>18</td>
<td>女</td>
<td>88</td>
</tr>
你也可以通过CSS样式来美化表格,例如添加背景色、调整字体样式等。
html<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
将这段样式代码添加到 <head> 标签中,就可以改变表格的外观了。