HTML-表格

最新推荐文章于 2024-07-22 22:37:58 发布

高朵

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量327

点赞数 3

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

本文链接：https://blog.csdn.net/qq_48019875/article/details/114990925

版权

html_css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、表格基本构成
表格标签构成
table:表格区域
border 边框距离
width height 宽度；高度
bgcolor 背景颜色
background 背景图
cellpadding:内容到边框的距离
cellspacing:单元格与单元格之间的距离
align=“center”:控制表格在本行中的水平位置
tr:定义表格行
height
bgcolor
background
align=“center” 让本行所有单元格内容居中
valign 设置内容的垂直位置 top middle bottom
td:表格的单元格
width
bgcolor
background
align=“center”
valign 设置内容的垂直位置 top middle bottom
th:表头,也是单元格,内容加粗居中显示
学生信息表表格标题
注意:表格中的内容都必须写在单元格中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="500" height="300" bgcolor="antiquewhite" cellspacing="0">
			<caption>学生管理表</caption>
			<tr height="80">
				<th width="200">姓名</th>
				<th width="200">性别</th>
				<th width="200">学籍</th>
			</tr>
			<tr>
				<td valign="center" align="center" >王平</td>
				<td align="center">男</td>
				<td align="center">北京</td>
			</tr>
			<tr>
				<td align="center">王辉</td>
				<td align="center">男</td>
				<td align="center">上海</td>
			</tr>
			<tr>
				<td align="center">高鹏</td>
				<td align="center">男</td>
				<td align="center">深圳</td>
			</tr>
		</table>

2、单元格合并

	 colspan="合并的数量"  记得删除多余的单元格
	 rowspan="合并的数量" 跨多行操作
	简历制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2 align="center">个人简历</h2>
		<table border="1" width="1000" height="600" align="center" cellspacing="0">
			<tr align="center" >
				<td width="20%" bgcolor="pink">姓名</td>
				<td width="20%"></td>
				<td width="20%" bgcolor="pink">性别</td>
				<td width="20%"></td>
				<td rowspan="5" width="20%">照片</td>
			</tr>
			<tr align="center">
				<td bgcolor="pink">出生年月</td>
				<td></td>
				<td bgcolor="pink">籍贯</td>
				<td></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink">政治面貌</td>
				<td></td>
				<td bgcolor="pink">民族</td>
				<td></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink">健康状况</td>
				<td></td>
				<td bgcolor="pink">婚姻状况</td>
				<td></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink">联系电话</td>
				<td></td>
				<td bgcolor="pink">电子邮箱</td>
				<td>www.53jan.com</td>
			
			</tr>
			<tr align="center">
				<td bgcolor="pink">求职意向</td>
				<td colspan="4"></td>
				
			</tr>
			<tr align="center">
				<td height="150" bgcolor="pink">工作经历</td>
				<td  colspan="4"></td>
				
			</tr>
			
			
			<tr align="center">
				<td bgcolor="pink" height="50">教育经历</td>
				<td colspan="4"></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink" height="50">英语水平</td>
				<td colspan="4"></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink" height="50">计算机水平</td>
				<td colspan="4"></td>
				
			</tr>
			<tr align="center">
				<td bgcolor="pink" height="50">自我评价</td>
				<td colspan="4"></td>
				
			</tr>
			
		</table>
	</body>
</html>

高朵

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
HTML-表格

1、表格基本构成表格标签构成table:表格区域border 边框距离width height 宽度；高度bgcolor 背景颜色background 背景图cellpadding:内容到边框的距离cellspacing:单元格与单元格之间的距离align=“center”:控制表格在本行中的水平位置tr:定义表格行heightbgcolorbackgroundalign=“center” 让本行所有单元格内容居中valign 设置内容的垂直位置 top middle b
复制链接

扫一扫