html之表格详解及table表格实现页面布局

本文链接：https://blog.csdn.net/weixin_49855251/article/details/112778855

html表格
1、table>标签：声明一个表格，它的常用属性如下：

border属性定义表格的边框，设置值是数值
cellpadding属性定义单元格内容与边框的距离，设置值是数值
cellspacing属性定义单元格与单元格之间的距离，设置值是数值
align属性设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、tr>标签：定义表格中的一行

3、和th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值

代码演示上面属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格</title>
</head>
<body>
	<h1>表格</h1>
	<table border="1" width="300" height="200" align="center">
		<!-- th:是标题的那一行-->
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>

		<tr>
			<td align="center">1</td>
			<td align="center">2</td>
			<td align="center">3</td>
		</tr>

		<tr>
			<td valign="top" align="center">1</td>
			<td>2</td>
			<td>3</td>
		</tr>

		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>

	</table>

</body>
</html>

运行结果：
在这里插入图片描述
完成下面的表格：

在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格</title>
</head>
<body>
	<h1>表格</h1>


	<!-- table>(tr>td*5)*6 -->

	<table border="1" width=700 height=300 align="center">
		<tr>
			<td colspan="5">基本情况</td>
		</tr>
		<tr>
			<td width="15%">姓名</td>
			<td width="25%"></td>
			<td width="15%"></td>
			<td width="25%"></td>
			<td rowspan="5"><img src="images/person.png" alt="大头贴"</td>
		</tr>
		<tr>
			<td>民族</td>
			<td></td>
			<td>性别</td>
			<td></td>
			
		</tr>
		<tr>
			<td>政治面貌</td>
			<td></td>
			<td>出生日期</td>
			<td></td>
		
		</tr>
		<tr>
			<td>籍贯</td>
			<td></td>
			<td>学历</td>
			<td></td>
			
		</tr>
		<tr>
			<td>电子邮箱</td>
			<td></td>
			<td>联系电话</td>
			<td></td>
			
		</tr>
	</table>

</body>
</html>

运行结果：
在这里插入图片描述

页面布局概述
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：

1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

table布局及实例
table来做整体页面的布局，布局的技巧归纳为如下几点：

1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。

2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。

3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。

4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式

5、通过属性或者css样式设置单元格中元素的样式

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人简历</title>
</head>
<body topmargin="0">

					<!--border="0" cellpadding="0" cellspacing="0"让表格线消失掉 -->
	<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr>                             <!--底色-->
			<td width="260" valign="top" bgcolor="#f2f2f2">

				<!--嵌套表格-->
				<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td height="100"></td>
					</tr>
					<tr>
						<td align="right"><img src="images/person.png"></td>
					</tr>
					<tr>
						<td align="right">张达山 </td>
					</tr>
					<tr>
						<td align="right">18210898888 </td>
					</tr>
					<tr>
						<td align="right">zhangdasan@126.com</td>
					</tr>
				</table>


			</td>
			<td width="30"></td>
			<td width="480" valign="top">
				
				<table width="480" border="0" cellpadding="0" cellspacing="0">
					<tr><td height="80"></td></tr>
					<tr>
						<td align="right"><img src="images/resume.png"></td>
					</tr>
				</table>
				<br>
				<hr />
				<br>

				<table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="2"><b>个人基本情况</b></td>					
					</tr>
					<tr>
						<td><b>姓 名：</b>张达山	</td>
						<td><b>籍 贯：</b>北京昌平</td>
					</tr>
					<tr>
						<td><b>性 别：</b>男</td>
						<td><b>身 高：</b>175cm</td>
					</tr>
					<tr>
						<td><b>民 族：</b>汉</td>
						<td><b>体 重：</b>70kg</td>
					</tr>
					<tr>
						<td><b>出生日期：</b>1992.03.28	</td>
						<td><b>电 话：</b>18210898888</td>
					</tr>
					<tr>
						<td><b>现居住地：</b>昌平天通苑</td>
						<td><b>专 业：</b>工业设计</td>
					</tr>
				</table>
				<br>
				<br>

				<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>教育背景及工作经历</b></td>
					</tr>
					<tr>
						<td><b>2008.09-2011.06</b> 北京邮电大学 工业设计专业</td>
					</tr>
					<tr>
						<td><b>2011.06-2012.09</b>北京微创信息科技有限公司 任前端开发工程师</td>
					</tr>


				</table>

					<br>
				<br>

				<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>所获证书</b></td>
					</tr>
					<tr>
						<td><b>2009年：</b> 荣获“高级美术设计师”证书</td>
					</tr>
					<tr>
						<td><b>2009年：</b>荣获“优秀班干部”证书</td>
					</tr>


				</table>

			</td>
			<td width="30"></td>
		</tr>
	</table>


</body>
</html>