写一个美观的html小组成员介绍表格
时间: 2023-08-05 19:10:04 浏览: 123
当然,我可以帮你设计一个美观的HTML小组成员介绍表格。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>小组成员介绍</title>
<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;
}
img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>小组成员介绍</h1>
<table>
<tr>
<th>姓名</th>
<th>职位</th>
<th>简介</th>
<th>照片</th>
</tr>
<tr>
<td>张三</td>
<td>前端开发工程师</td>
<td>拥有丰富的前端开发经验,熟悉HTML、CSS和JavaScript。</td>
<td><img src="zhangsan.jpg" alt="张三"></td>
</tr>
<tr>
<td>李四</td>
<td>后端开发工程师</td>
<td>熟练掌握Java和Spring框架,有多年的后端开发经验。</td>
<td><img src="lisi.jpg" alt="李四"></td>
</tr>
<tr>
<td>王五</td>
<td>UI设计师</td>
<td>擅长使用Photoshop和Illustrator,对用户界面设计有独特的见解。</td>
<td><img src="wangwu.jpg" alt="王五"></td>
</tr>
</table>
</body>
</html>
```
你可以根据需要添加更多的成员信息行,只需复制 `<tr>` 标签并修改其中的内容即可。同时,你可以根据自己的图片命名和路径来替换示例中的图片路径。
这个表格使用了CSS样式来设置表格的样式,包括边框、背景色和悬停效果等。你也可以根据自己的喜好对样式进行修改。希望这能帮到你!如果还有其他问题,请随时提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)
![](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)
![](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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)