HTML表格制作简历（CSS、HTML小作业）

最新推荐文章于 2024-07-21 17:58:14 发布

转晴喵

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量348

点赞数 6

文章标签： html css 前端

本文链接：https://blog.csdn.net/th891166/article/details/140562179

版权

HTML表格是网页设计中用于展示数据的一种结构化方式。表格由<table>标签定义，并通过行(<tr>)和列(<td>)来组织数据。下面是一些创建和使用HTML表格的基本知识点：

基本结构：
- <table>：定义表格。
- <tr>：定义表格的行。
- <td>：定义表格中的单元格。
- <th>：定义表格的表头单元格，通常用于标题行或列。
行和列：
- 表格由行组成，每行由<tr>标签定义。
- 每行由多个列组成，每列由<td>或<th>标签定义。
表头：
- 表头通常使用<thead>标签来定义，它包含表格的标题行。
- 表头单元格使用<th>标签，而不是<td>。
表格标题：
- caption标签用于为表格添加标题或说明。
跨行或跨列：
- rowspan属性允许一个单元格横跨多行。
- colspan属性允许一个单元格横跨多列。
对齐和样式：
- align属性可以设置单元格内容的水平对齐方式（例如：left, right, center）。
- valign属性可以设置单元格内容的垂直对齐方式（例如：top, middle, bottom）。
边框和间距：
- border属性可以设置表格的边框大小。
- cellpadding属性可以设置单元格内容与单元格边界之间的空间。
- cellspacing属性可以设置单元格之间的空间。
表格分组：
- <tbody>标签定义表格的主体部分，通常包含数据行。
- <tfoot>标签定义表格的脚注部分，通常用于总结或额外信息。
CSS样式：
- 可以使用CSS来增强表格的视觉效果，如背景色、边框样式等。
可访问性：
- 使用<th>标签和scope属性可以提高表格的可访问性，scope属性定义了<th>元素是行标题还是列标题。

下面展示一个例子：

CSS代码：

table{
	margin: 0px auto;
}
.thead1{
	font-size: 40px; 
	font-family: 楷体;
	letter-spacing: 3px;
	height: 80px;

	text-align: center;
	border-bottom: aliceblue;
}
.thead2{
	font-family: 黑体;
	font-size: 25px;
	text-align: center;
	height: 38px;
	border-bottom: aliceblue;
	padding: 5px;

}
.thead3{
	font-family: 黑体;
	font-size: 25px;
	text-align: center;
	height: 38px;
	border-bottom: aliceblue;
	padding: 5px;
}
.thead3:hover{
background-color: green;
color: #F0F8FF ;
}
th,td{
			width: 200px;
			height: 50px;
			text-align:center ;
			font-size: 20px;
		}
.text1{
	padding: 10px;
	text-align: unset;
}
.photo{
	background-image: url(../img/1.jpg);
	background-size:100% 100%;
	width: 400px;
	height: 250px;
}

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet"  type="text/css" href="./css/table.css"/>
		<title>个人简历</title>
	</head>
	<body>
		<table  border="1" cellspacing="0" width="750px" height="100px">
			<tr>
				<td colspan="5" class="thead1">个人简历</td>
				
			</tr>
			<tr>
				<td colspan="5" class="thead2">个人概况</td>
			</tr>
			<tr>
				<th>姓&emsp;名</th>
				<td>喵喵喵</td>
				<th>专&emsp;业</th>
				<td>软件工程</td>
				<td rowspan="5" class="photo"></td>
			</tr>
			<tr>
				<th>性&emsp;别</th>
				<td>女</td>
				<th>联系电话</th>
				<td>146483355779</td>
		
			</tr>
			<tr>
				<th>民&emsp;族</th>
				<td>汉</td>
				<th>E-mail</th>
				<td>33@163.com</td>
				
			</tr>
			<tr>
				<th>出生年月</th>
				<td>2005.1</td>
				<th>学&emsp;历</th>
				<td>本科</td>
		
			</tr>
			<tr>
				<th>现居住地</th>
				<td>巴南南泉</td>
				<th>毕业院校</th>
				<td>重庆工程学院</td>
	
			</tr>
			<tr>
				<td colspan="5" class="thead3">主修课程</td>
			</tr>
			<tr>
				<td colspan="5" class="text1">计算机应用基础、软件工程、人机交互、程序设计基础、面向对象程序设计</td>
			</tr>
			<tr>
				<td colspan="5" class="thead2">特长</td>
			</tr>
			<tr>
				<td colspan="5" class="text1" >熟练使用各类办公软件、擅长沟通组织协调</td>
			</tr>
			<tr>
				<td colspan="5" class="thead2">主要经历</td>
			</tr>
			<tr>
				<td colspan="5" class="text1">
					2022-2023 重庆工程学院双桥校区<br />
					2022-2023 重庆工程学院双桥校区<br />
					2022-2023 重庆工程学院双桥校区<br />
					</td>
			</tr>
			<tr>
				<td colspan="5" class="thead2">自我评价</td>
			</tr>
			<tr>
				<td colspan="5" class="text1">本人爱岗、敬业、诚信、友善</td>
			</tr>
		</table>
	</body>
</html>

最终效果展示：