用html代码做一份相亲择偶表,并让表格更美观
时间: 2024-09-23 15:05:55 浏览: 29
创建一个美观的HTML相亲择偶表格,我们可以使用`<table>`标签以及CSS样式来美化它。下面是一个基本的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
.name {
font-weight: bold;
}
.age-range {
width: 30%;
}
.location {
width: 40%;
}
.interests {
width: 30%;
}
</style>
</head>
<body>
<h2>相亲择偶表</h2>
<table>
<thead>
<tr>
<th class="name">姓名</th>
<th class="age-range">年龄范围</th>
<th class="location">所在地</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<!-- 这里替换为你想要的数据 -->
<tr>
<td class="name">张三</td>
<td class="age-range">25-30岁</td>
<td class="location">北京</td>
<td>喜欢阅读、旅行</td>
</tr>
<tr>
<td class="name">李四</td>
<td class="age-range">28-33岁</td>
<td class="location">上海</td>
<td>热爱运动、烹饪</td>
</tr>
<!-- 添加更多行... -->
</tbody>
</table>
</body>
</html>
```
在这个例子中,我们创建了一个包含姓名、年龄范围、所在地和兴趣爱好的简单相亲表格,并使用CSS设置了列宽、边框和背景颜色,使得表格看起来更整洁。你可以按需添加更多数据行。