初学者表格代码

最新推荐文章于 2021-06-04 07:43:08 发布

weixin_34247155

最新推荐文章于 2021-06-04 07:43:08 发布

阅读量608

点赞数

原文链接：http://www.cnblogs.com/2018-11-4/p/9905713.html

版权

<!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>Document</title>
	<style>
	table
	{
	width: 100%;
	border-collapse: collapse;
	}
	table tr
	{
	height: 50px;
	text-align: center;
	}
	table td,table th
	{
	border: 1px solid black;
	border-collapse: collapse;
	}
	caption h1
	{
	text-align: center;
	font-size: 24px;
	}
	thead
	{
	background: #49638C;
	color: white;
	}

	td[colspan="3"]
	{
	text-align: right;
	}
	tfoot
	{
	background: #8895ab;
	color: white;
	}
	tbody tr:nth-child(odd)
	{
	background: #c8cace;
	}
	tbody tr:hover
	{
	background:#C7C2F5;
	}
	tbody tr:nth-child(2n) td:first-child
	{
	color: aqua;
	}
	tbody tr:nth-child(2n+1) td:first-child
	{
	color: cornflowerblue;
	}
	</style>
	</head>
	<body>
	<table>
	<caption>
	<h1>lorem4</h1>
	</caption>
	<thead>
	<tr>
	<th>Lorem.</th>
	<th>Quibusdam!</th>
	<th>Repellat.</th>
	<th>Accusamus.</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Lorem.</td>
	<td>Similique.</td>
	<td>Excepturi!</td>
	<td>Ipsa!</td>
	</tr>
	<tr>
	<td>Laborum!</td>
	<td>Iure.</td>
	<td>Quia.</td>
	<td>Debitis.</td>
	</tr>
	<tr>
	<td>Nam?</td>
	<td>Natus.</td>
	<td>Omnis?</td>
	<td>Sunt!</td>
	</tr>
	<tr>
	<td>Praesentium?</td>
	<td>Quasi.</td>
	<td>Explicabo?</td>
	<td>Laudantium?</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td colspan="3">Lorem.</td>
	<td>Possimus.</td>
	</tr>
	<tr>
	<td colspan="3">Eos.</td>
	<td>Laudantium?</td>
	</tr>
	</tfoot>
	</table>
	</body>
	</html>

转载于:https://www.cnblogs.com/2018-11-4/p/9905713.html

关注