作业分析
本次使用table表格标签编写效果如下
image.png
代码实现
使用html代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=,, initial-scale=1.0">
<title>table test </title>
</head>
<body>
<h3>无畏契约</h3>
<table border="1" cellpadding="10" cellspacing="0" width="800">
<tr>
<th>类型</th>
<th>图片</th>
<th>名称</th>
<th>技能</th>
</tr>
<tr>
<td rowspan="2">先锋</td>
<td width="200px"><img src="img/猎枭.jpg" width="200px" height="auto"></td>
<td>猎枭</td>
<td>枭型无人机 雷击箭 寻敌箭 狂猎之怒</td>
</tr>
<tr>
<td width="200px"><img src="img/黑梦.jpg" width="200px" height="auto"></td>
<td>黑梦</td>
<td>黯兽 幽爪 鬼眼 夜临</td>
</tr>
<tr>
<td rowspan="2">决斗</td>
<td wigth="200px"><img src="img/霓虹.jpg" width="200px" height="auto"></td>
<td>霓虹</td>
<td>高速通道 闪电弹球 充能疾驰 超限暴走</td>
</tr>
<tr>
<td wigth="200px"><img src="img/雷兹.jpeg" width="200px" height="auto"> </td>
<td>雷兹</td>
<td>花车巡游 惊喜翻腾 彩雷飞溅 晚安焰火</td>
</tr>
<tr>
<td rowspan="2" >哨位</td>
<td width="200px"><img src="img/贤者.jpg" width="200px" height="auto"></td>
<td>贤者</td>
<td>玉城 薄冰 逢春 再起</td>
</tr>
<tr>
<td width="200px"><img src="img/尚博勒.jpg" width="200px" height="auto"></td>
<td>尚博勒</td>
<td>贵宾限行 金牌猎头 闪转自如 孤高火力</td>
</tr>
<tr>
<td rowspan="2" >控场</td>
<td width="200px"><img src="img/幽影.jpg" width="200px" height="auto"></td>
<td>幽影</td>
<td>践影 暗魇 黑瘴 离魂</td>
</tr>
<tr>
<td width="200px"> <img src="img/蝰蛇.jpeg" width="200px" height="auto"></td>
<td>蝰蛇</td>
<td>蛇吻 瘴云 毒幕 蝰腹</td>
</tr>
</table>
</body>
</html>
个人总结
对于table标签使用，需要熟练掌握<tr> <td><th>....等标签内容，同时还有对于行和列的修改，如<rowspan>(行合并 <colspan>(列合并）。
