<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小说排行榜</title>
<!--定义内部样式表,使用标签选择器,对超链接标签进行修改-->
<style>
a:link{color: blue}
</style>
</head>
<body>
<table align="center" width="500" height="300" border="1" style="border-collapse:collapse;">
<!--定义表格,border表示表格边框的粗细为1,style为表格边框的样式-->
<caption><h3>小说排行榜</h3></caption>
<tr> <!--用table定义表格,tr表示一行,td表示一个单元格(或者表示一列)-->
<th>排名</th><!--表格头部的单元格用th,th会加重单元格里面的内容-->>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="作业素材/关卡2素材/up.jpg"></td> <!--之前有尝试用字符↓表示向上的箭头并用font标签改变颜色-->
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</td>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="作业素材/关卡2素材/down.jpg"></td> <!--同样的有尝试用↑符号表示向下的箭头-->
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="作业素材/关卡2素材/up.jpg"></td>
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href=""><u>贴吧</u></a> <a href=""><u>图片</u></a> <a href=""><u>百科</u></a></td>
</tr>
</table>
</body>
</html>
效果图如下: