html表格制作

最新推荐文章于 2023-04-29 14:59:13 发布

-随_风-

最新推荐文章于 2023-04-29 14:59:13 发布

阅读量199

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/zhanlong11/article/details/105812613

版权

前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

标签:声明一个表格,它的常用属性如下:
●border属性定义表格的边框,设置值是数值
●cellpadding属性定义单元格内容与边框的距离,设置值是数值
●cellspacing属性定义单元格与单元格之间的距离,设置值是数值
●align属性设置整体表格相对于浏览器窗口的水平对齐方式，设置值有: left | center I right
2.标签 :定义表格中的一行
3.<td和th>标签 :定义一行中的一个单元格, td代表普通单元格, th表示表头单元格,它们的常用属性如下:
●align 设置单元格中内容的水平对齐方式，设置值有: left | center | right
●valign 设置单元格中内容的垂直对齐方式top | middle I bottom
●colspan 设置单元格水平合并,设置值是数值
●rowspan 设置单元格垂直台并,设置值是数值
例子：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>
		<meta charset="utf-8">
		表格练习
	</title>
</head>
<body>
	<!--table>(tr>td*5)*6-->	
	<table border="1" width="700" height="300" align="center">
		<tr>
			<td colspan="5">
				<meta charset="utf-8">
				基本情况</td>
		</tr>		
		<tr>
			<td width="15%" align="center">姓名</td>
			<td width="25%" align="center">宋轶</td>
			<td width="15%" align="center">性别</td>
			<td width="25%" align="center">女</td>
			<td width="20%" rowspan="5"> <img src="images/person.jpg" alt="人物图片"> </td>
		</tr>
		<tr>
			<td align="center">民族</td>
			<td align="center">汉族</td>
			<td align="center">出生日期</td>
			<td></td>
		</tr>
		<tr>
			<td align="center">政治面貌</td>
			<td align="center"></td>
			<td align="center">健康状况</td>
			<td></td>
		</tr>
		<tr>
			<td align="center">籍贯</td>
			<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>
			<td align="center"></td>
		</tr>
	</table>
</body>
</html>