HTML5网页设计基础——表格的运用

最新推荐文章于 2022-08-23 18:32:38 发布

无聊玩玩~

最新推荐文章于 2022-08-23 18:32:38 发布

阅读量702

点赞数

文章标签： html5 elementui html css3 网页设计

本文链接：https://blog.csdn.net/shengming_tutou/article/details/122794187

版权

案例：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	table{
		margin:50px auto;
		padding:0;
	}
	table,td{
		width: 600px;
		border-collapse: collapse;
		border:1px solid;
	}
	tr{
		height:20px;
	}
	.one{
		height:150px;
	}
	
</style>

<body>
	
	<table>	
	<thead>
		<caption>表格的名称</caption>	
		<tr  height="30">
			<td colspan="3">
				网站的LOGO
			</td>
		</tr>
		<tr align="center">
			<td>
				<a href="#">首页</a>
			</td>
			<td>
				<a href="#">关于我们</a>
			</td>
			<td>
				<a href="#">联系我们</a>
			</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
		<td colspan="3" align="center">
			底部基本企业信息◎【版权信息】
		</td>
		</tr>
		
	</tfoot>
	<tbody>
		<tr class="one">
		<td>
			主体的左栏
		</td>
		<td>
			主体的中间
		</td>
		<td>
			主体的右栏
		</td>
		</tr>
		<tr class="one">
		<td>
			主体的左栏
		</td>
		<td>
			主体的中间
		</td>
		<td>
			主体的右栏
		</td>
		</tr>
	
	</tbody>
	</table>
</body>
</html>