表格（NBA）

黎明不管黑夜的星空

已于 2023-04-17 22:47:49 修改

阅读量317

点赞数 3

分类专栏： htmlcss 文章标签： html css 前端

于 2022-11-21 17:52:36 首次发布

本文链接：https://blog.csdn.net/weixin_50930483/article/details/127969504

版权

htmlcss 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

images文件夹

index.html

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style type="text/css">
		table {
			width: 450px;
			height: 200px;
			margin: 0 auto;
			border-top: solid 3px gray;
			border-left: solid 3px gray;
			border-right: solid 3px black;
			border-bottom: solid 3px black;
			border-collapse: collapse;
		}

		td {
			border: solid black 1px;
			text-align: center;
		}

		.t1 {
			background-color: #999;
		}

		.c1 {
			width: 100px;
			height: 80px;
			background-image: url(images/maci.jpg);
			background-repeat: no-repeat;
		}

		.c2 {
			background-image: url(images/rehuo.jpg);
			background-repeat: no-repeat;
		}

		.c3 {
			background: #CCC;
		}
	</style>
</head>

<body>

	<table>
		<tr>
			<td>球队</td>
			<td>球员</td>
			<td>夺冠次数</td>
		</tr>

		<tr class="c3">
			<td rowspan="3" class="c1">马刺队</td>
			<td>邓肯</td>
			<td rowspan="3">5次</td>
		</tr>

		<tr class="c3">
			<td>帕克</td>
		</tr>

		<tr class="c3">
			<td>吉诺比利</td>
		</tr>

		<tr class="c4">
			<td rowspan="3" class="c2">热火队</td>
			<td>詹姆斯</td>
			<td rowspan="3">3次</td>
		</tr>

		<tr class="c4">
			<td>韦德</td>
		</tr>

		<tr class="c4">
			<td>波什</td>
		</tr>


		<tr>
			<td colspan="3">比赛说明：黄健翔。姚明</td>
		</tr>

	</table>
</body>

</html>

效果：