网页基础（五）表格

最新推荐文章于 2024-02-23 19:42:38 发布

@大娱乐家

最新推荐文章于 2024-02-23 19:42:38 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104407127

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-20
        	描述：table：表格标签
        	tr:行标签
        	td:单元格标签
        	
        -->
        <table border="1">
        	
        	<!--
            	作者：770267939@qq.com
            	时间：2020-02-20
            	描述：表头的表格用th定义标签
            	caption 标题标签
            -->
            <caption><h3>学生信息表</h3></caption>
        	<tr>
        		<th>姓名</th>
        		<th>学校</th>
        		<th>性别</th>
        		<th>班级</th>
        		
        	</tr>
        	<tr>
        		<td>张三</td>
        		<td>南开大学</td>
        		<td>男</td>
        		<td>研一</td>
        	</tr>
        	<tr>
        		<td>赵四</td>
        		<td>山东大学</td>
        		<td>男</td>
        		<td>研一</td>
        	</tr>
        	
        </table>
	</body>
</html>

下面展示一个居中表格的实例下带有注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生成绩表</title>
		<style>
			table{
				width:500px;
				text-align: center;/*设置字体居中*/
				margin:0 auto;/*body居中*/
			}
			table,th,td{
				border-collapse: collapse;/*表示把所有table，th，td标签边框合并*/
			}
		</style>
	</head>
	<body>
		<table border="1">
			<caption>学生成绩表</caption>
			<tr>
				
				<th>学号</th>
				<th>高数</th>
				<th>英语</th>
				<th>政治</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>100</td>
				<td>20</td>
				<td>30</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>100</td>
				<td>80</td>
				<td>70</td>
			</tr>
		</table>
	</body>
</html>

@大娱乐家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页基础（五）表格

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 作者：770267939@qq.com 时间：2020-...
复制链接

扫一扫