在HTML(超文本标识语言)中,使用table标签创建表格,其使用形式为<table></table>。其中<table>为开始标签,</table>为结束标签。 其中tr是“table row(表格行)”的缩写,用于表示一行的开始和结束; td是“table data(表格数据)”的缩写,用于表示行中各个单元格的开始和结束。
其实现的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<strong>小说排行榜</strong>
<table border="1">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg"></td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>西游记</td>
<td><img src="down.jpg"></td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>甄嬛传</td>
<td><img src="up.jpg"></td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>水浒传</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>四大天王</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>倩女幽魂</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="http://www.baidu.com">贴吧 </a><a href="http:www.baidu.com">图片 </a><a href="http:www.baidu.com">百科</a></td>
</tr>
</tr>
</table>
</center>
</body>
</html>
实现的效果图如下图所示: