使用table创建表格，使用href跳转网页，使用图片超链接插入图片。
网页代码
使用VScode工具编写代码，如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table
border="1"
cellpadding="10"
cellspacing="0"
width="400"
height="80">
<tr>
<td>定位</td>
<td>图片</td>
<td>名称</td>
<td>被动</td>
<td>技能</td>
</tr>
<tr>
<td>射手</td>
<td>
<a href="https://pvp.qq.com/">
<img src="https://shp.qpic.cn/ishow/2735111912/1668833467_1265602313_39024_sProdImgNo_2.jpg/0" width="400px" height="300px"/>
</a>
</td>
<td>狄仁杰</td>
<td>迅捷：
狄仁杰的普攻能够获得1层迅捷效果，每层迅捷效果增加3.5~7%攻速与5%移速，最多叠加5层。
狄仁杰的第三次普攻将会随机使用一张蓝牌或红牌进行攻击。</td>
<td>六令追凶，
逃脱，
王朝密令。
</td>
</tr>
<tr>
<td>战士</td>
<td>
<a href="https://pvp.qq.com/">
<img src="https://shp.qpic.cn/ishow/2735020417/1707038724_829394697_31531_sProdImgNo_2.jpg/0" width="400px" height="300px"/>
</a>
</td>
<td>凯</td>
<td>修罗之魂：
铠的普攻和【极刃风暴】只命中一个目标时将会额外造成50%伤害。</td>
<td>回旋之刃，
极刃风暴，
不灭魔躯。
</td>
</tr>
<tr>
<td>坦克</td>
<td>
<a href="https://pvp.qq.com/">
<img src="http://shp.qpic.cn/ishow/2735122815/1545980757_-888937974_10980_sProdImgNo_2.jpg/0" width="400px" height="300px"/>
</a>
</td>
<td>白起</td>
<td>反击之镰：
白起造成或受到伤害时会获得暗影之力，增加移速和治疗效果，最多增加70点移速和80％的治疗效果。
</td>
<td>血之回响，
死神之镰，
傲慢嘲讽。
</td>
</tr>
<tr>
<td>刺客</td>
<td>
<a href="https://pvp.qq.com/">
<img src="https://shp.qpic.cn/ishow/2735010515/1704438699_829394697_25715_sProdImgNo_2.jpg/0" width="400px" height="300px"/>
</a>
</td>
<td>澜</td>
<td>狩猎：
当敌人的生命值低于30%，会被澜视作“猎物”。澜的技能和普攻对“猎物”额外造成7.5%~15%真实伤害。
</td>
<td>破浪，
断空，
处决。
</td>
</tr>
<tr>
<td>辅助</td>
<td>
<a href="https://pvp.qq.com/">
<img src="http://shp.qpic.cn/ishow/2735012115/1579592727_84828260_26798_sProdImgNo_2.jpg/0" width="400px" height="300px"/>
</a>
</td>
<td>庄周</td>
<td>自然意志：
在自然梦境中，庄周解除并免疫所有控制效果，获得15%减伤，并增加15%移速，持续2秒。庄周每6秒进入一次自然梦境。</td>
<td>化蝶，
蝴蝶效应，
天人合一。
</td>
</tr>
</table>
</body>
</html>