2024/3/25
所花时间：1小时
代码行：70行
博客量：1篇
了解到的知识点：写web作业，对表格进行了进一步学习
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息展示</title>
<style>
body {
text-align: center; /* 让内容在页面水平居中 */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
table {
/*margin: 0 auto; *//* 让表格在页面水平居中 */
border-collapse: collapse;
width: 80%; /* 设置表格宽度 */
height: 98%;
}
td, th {
padding: 10px;
border: 1px solid black;
}
td.image {
width: 30%; /* 左侧图片列宽度 */
}
td.info {
width: 70%; /* 右侧信息列宽度 */
}
</style>
</head>
<body>
<table>
<tr>
<td class="image"><img src="" alt="个人照片" style="max-width: 100%;"></td>
<td class="info">
<table>
<tr>
<td>姓名</td>
<td class="separator">张三</td>
<td>生日</td>
<td class="separator">1990-01-01</td>
</tr>
<tr>
<td>国籍</td>
<td class="separator">中国</td>
<td>出生地</td>
<td class="separator">北京</td>
</tr>
<tr>
<td>身高</td>
<td class="separator">175cm</td>
<td>体重</td>
<td class="separator">70kg</td>
</tr>
<tr>
<td>血型</td>
<td class="separator">A型</td>
<td>星座</td>
<td class="separator">水瓶座</td>
</tr>
<tr>
<td colspan="2">个人简介: 个人简介内容...</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
