HbuilderX表格练习2

表格练习（数据仅供参考）<!DOCTYPE html><html><head><meta charset="utf-8"><title>表格4</title><style type="text/css">table {border: 1px solid aqua;border-collapse: collapse;

亓冕

3911人浏览 · 2021-05-06 11:48:58

亓冕 · 2021-05-06 11:48:58 发布

表格练习
（数据仅供参考）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格4</title>
		<style type="text/css">
			table {
				border: 1px solid aqua;
				border-collapse: collapse;
			}
			th,
			td {
				border: 1px solid blueviolet;
				padding: 4px;
				margin: 4px;
			}
			.one {
				font-weight: bold;
			}

			.two {
				background-color: gainsboro
			}
		</style>
	</head>
	<body>
		<table>
			<caption class="one">今日小说排行榜</caption>
			<tr class="two">
				<th>排名</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近七日</th>
				<th>相关链接</th>
			</tr>
			<tr>
				<th>1</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/up.jpg"></td>
				<td>61236</td>
				<td>1234667</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
			<tr>
				<th>2</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/up.jpg"></td>
				<td>61235</td>
				<td>1234666</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
			<tr>
				<th>3</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/up.jpg"></td>
				<td>61234</td>
				<td>1234665</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
			<tr>
				<th>4</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/down.jpg"></td>
				<td>61233</td>
				<td>1234664</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
			<tr>
				<th>5</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/up.jpg"></td>
				<td>61232</td>
				<td>1234663</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
			<tr>
				<th>6</th>
				<td>武动乾坤</td>
				<td align="center"><img src="images/down.jpg"></td>
				<td>61231</td>
				<td>1234662</td>
				<td><a href="#">贴吧 图片 百科</a></td>
			</tr>
		</table>
	</body>
</html>