本次要使用table表格标签编写如下的效果
image.png
代码实现
使用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>
<table border="1" cellspacing="0" cellpadding="10" width="900" align="center">
<tr bgcolor="grey">
<td >种类</td>
<td>名称</td>
<td>图片</td>
<td>干员技能</td>
<td>被动</td>
</tr>
<tr>
<td rowspan="2" bgcolor="red">突击</td>
<td>威龙</td>
<td><img src="微信图片_20241211092939.jpg" width="200px"></td>
<td>虎蹲炮，磁吸炸弹，动力推进</td>
<td>动能辅助系统</td>
</tr>
<tr>
<td>红狼</td>
<td><img src="微信图片_20241211092929.jpg" width="200 px"></td>
<td>动力外骨骼，三联装手跑，突破形烟雾弹</td>
<td>战术滑铲</td>
</tr>
<tr>
<td rowspan="2" bgcolor="green">支援</td>
<td>蜂医</td>
<td><img src="微信图片_20241211093017.jpg" width="200px" alt=""></td>
<td>激素枪，蜂巢科技烟雾弹，烟幕</td>
<td>专业救援</td>
</tr>
<tr>
<td>蛊</td>
<td><img src="微信图片_20241211094215.jpg" width="200px" alt=""></td>
<td>流萤集群系统，肾上腺素，致盲毒雾</td>
<td>高效治疗</td>
</tr>
<tr>
<td rowspan="2" bgcolor="orange">工程</td>
<td>牧羊人</td>
<td><img src="微信图片_20241211092915.jpg" width="200 px " ></td>
<td>声波震撼，强化型破片手雷，声波陷阱</td>
<td>减震防御</td>
</tr>
<tr>
<td>乌鲁鲁</td>
<td><img src="微信图片_20241211092946.jpg" width="200px" height="auto" alt=""></td>
<td>巡飞弹，速凝掩体，复合型燃烧弹</td>
<td>久经沙场</td>
</tr>
<tr>
<td rowspan="2" bgcolor="pink">侦察</td>
<td>露娜</td>
<td><img src="微信图片_20241211092957.jpg" width="200px" alt=""></td>
<td>侦察箭矢，增强型破片手雷，电击箭矢</td>
<td>敌情分析</td>
</tr>
<tr>
<td>骇爪</td>
<td><img src="微信图片_20241211092949.jpg" width="200px" alt=""></td>
<td>信号破译器，闪光巡飞器，数据飞刀</td>
<td>隐匿消声</td>
</tr>
</table>
</body>
</html>
个人总结：
还需多多练习才能更加熟练使用标签的各种属性，对各种表格标签的灵活运用
