HTML之table布局

最新推荐文章于 2024-09-04 18:16:53 发布
最新推荐文章于 2024-09-04 18:16:53 发布
阅读量1.1k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42038955/article/details/104736999
版权

解释详细，适合新手观看

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>table布局</title>
</head>
<body topmargin="0"><!--topmargin参数设置0，是将内容上面顶格，不留空隙。-->
	<!-- HTML表格
		1、<table>标签：声明一个表格，它的常用属性如下：
			* border属性：定义表格的边框，设置值是数值。
			* cellpadding属性：定义单元格内容与边框的距离，设置值是数值。
			* cellspacing属性：定义单元格与单元格之间的距离，设置值是数值。
			* align属性：默认值是left靠窗口左边，设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left|center|right。
		2、<tr>标签：定义表格中的一行。
		3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们常用属性：
			* align 设置单元格中内容的水平对齐方式，默认是left左对齐，设置值有：left|center|right。
			* valign 设置单元格中内容的垂直对齐方式，设置值有：top|middle|bottom。
			* colspan 设置单元格水平合并，设置值是数值。
			* rowspan 设置单元格垂直合并，设置值是数值。
	-->
	<h1>表格</h1>
	<!--定义表格整体，border表格的样子，width宽度(默认是像素，就是xp)，height高度，align将表格在窗口居中-->
	<table border="1" width="300" height="200" align="center">
		<tr>
			<!-- 定义表头，表头自带加粗字体和居中。 -->
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr><!--tr代表行-->
			<td align="center">1</td><!--td代表列，align定义center居中-->
			<td>2</td>
			<td>3</td>
		</tr>
		<tr><!--tr代表行-->
			<td valign="top" align="center">1</td><!--td代表列，valign设置靠上(top)，align并且居中(center)-->
			<td>2</td>
			<td>3</td>
		</tr>
		<tr><!--tr代表行-->
			<td>1</td><!--td代表列-->
			<td>2</td>
			<td>3</td>
		</tr>
	
	</table>
	
	<h3>小测试：</h3>
	<table border="1" width="700" height="300" align="center">
		<tr height="16%">
		<!-- colspan设置横向单元格合并，5代表合并5个单元格 -->
			<th colspan="5" align="left">基本情况</th>
		</tr>
		<tr>
		<!-- width写百分比的话，就是占总宽度的百分之20，这里有5个格子，每一个格子占20，那就刚好占了100 -->
			<td width="15%">姓名</td>
			<td width="25%"></td>
			<td width="15%">性别</td>
			<td width="25%"></td>
			<!-- rowspan设置纵向单元格合并，5代表合并5个单元格，是从这一个单元格开始算。 -->
			<td rowspan="5" width="20%">
				<img src="images/03.png" alt="人物图片" width="100%" height="200" />
				<!-- 设置图片 width宽度占百分之100，height高度占200像素-->
			</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>
	<p>----------------------------------------------------------------------------</p>
	<!-- 页面布局： -->
	<!-- 页面布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，
		布局的方式分为两种：
		1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格，
			隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用EDM(广告邮件中的页面)
			中，主流的布局方式不用这种。
		2、HTML+CSS布局(也叫DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子
			模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，
			目前是主流的布局方式。
		现在暂时先学习用table做布局，等以后学了CSS，再用CSS做布局。
		每一个单元格里面也可以嵌套表格的。
	-->
	<!-- table布局实例：
		table来做整体页面的布局，布局的技巧归纳为如下几点：
		1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
		2、将表格border、cellpadding、cellspacing属性全部设置为0，表格的边框和间距就不占有页面空间，
			它只起到划分空间的作用。
		3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分为局部的空间。
		4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式。
		5、通过属性或者css样式设置单元格中元素的样式。
	-->
	<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0">
	<!-- 将表格的宽和高设置为800像素，居中，单元格内容与边框的距离和单元格与单元格之间的距离都设置为0 -->
		<tr>
			<td width="260" valign="top" bgcolor="#f2f2f2">
			<!-- bgcolor属性给这个td单元格设置背景颜色 -->
				<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td height="100"></td>
					</tr>
					<tr>
						<td align="right">
						<img src="images/头像.jpg" alt="头像图片" width="100%" /></td>
						<!-- img里面设置width属性就是限定图片的宽度 -->
					</tr>
					<tr>
						<td align="right">杨先森</td>
					</tr>
					<tr>
						<td align="right">1006810068</td>
					</tr>
					<tr>
						<td align="right">10086@qq.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>
							<img src="images/个人简历.jpg" width="100%" height="100" />
						</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>180cm</td>
					</tr>
					<tr>
						<td><b>民 族：</b>汉</td>
						<td><b>体 重：</b>70KG</td>
					</tr>
					<tr>
						<td><b>出生日期：</b>2000.01.01</td>
						<td><b>电话：</b>1008610086</td>
					</tr>
					<tr>
						<td><b>现居住地：</b>昌平天通苑</td>
						<td><b>专业：</b>工业设计</td>
					</tr>
				
				</table>
				<br />
				<br />
				<table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>教育背景及工作经历</b></td>
					</tr>
					<tr>
						<td>2008.09-2011.06 北京邮电大学 工业设计专业</td>
					</tr>
					<tr>
						<td>2011.06-2012.09 北京微创信息科技有限公司 任前端开发工程师</td>
					</tr>
				
				</table>
				<br />
				<br />
				
				<table width="480" height="50" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><b>自我评价：</b></td>
					</tr>
					<tr>
						<td>好，很好，非常好！</td>
					</tr>
				
				</table>
				
			
			</td>
			<td width="30"></td>
		</tr>
	
	</table>
</body>

</html>
小叶丶
关注
html 用table布局,HTML--Table布局
weixin_36269724的博客
07-17 1183
table布局Main Title of The web pageHTMLCSSJavaScriptJqueryContent Goes hereCopyRight W3CSchool.com.cn效果图：table布局， td内部元素溢出边界问题。 (已解决)今天,我尝试用table布局有多个输入需要提交的页面, 为了使输入元素占满td,我对其宽度设置为100%, 结果text输入元素溢出td,...
HTML table布局
量子波动猫的博客
05-29 144
表格table 表格由 table 标签来定义，每个表格均由 tr 标签定义，每行有若干单元格，由 td 标签定义。 td代表表格数据table data 。 一、表格标签 table ------------------ 定义表格 thead ----------------- 表格页眉 tbody ----------------- 主体 tr ----------------------- 行 td----------------------- 列 tfoot ----------
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
weixin_64294248的博客
07-12 4904
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
[HTML]布局、表单、框架、颜色、颜色名、颜色值
最新发布
qq_48501521的博客
09-04 1234
网页布局对改善网站的外观非常重要。
HTML--Table布局
a0103122120的博客
07-04 172
1 <DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html" charset="utf-8"/> 5 <title>table布局</title&...
【html布局】table布局
m0_67768261的博客
06-23 584
【html布局】table布局
HTML入门-------table布局
Funny54的博客
05-24 3743
一.table表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格是以行和列的形势显示信息，常用于显示网格结构的数据。 二.创建表格 ...
html5 div布局与table布局详解
01-19
本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 #container中height不能写成百分数，必须为具体高度。 <!DOCTYPE html> <html> <head lang=...
Table布局的优缺点介绍及为什么不建议使用
09-22
Table布局，作为一种传统的HTML布局方式，曾在Web开发的早期阶段被广泛使用，特别是在处理数据表格时。然而，随着时间的推移和技术的发展，Table布局逐渐暴露出一些显著的缺点，这使得现代网页设计倾向于使用更灵活...
table布局练习.html
09-29
是同学老师布置的一个作业，作业要求是用DW做，我拿来写代码练手了，因为我还没有系统的学习完看起来有点乱，至少在命名规范这一方面，而且很多HTML5不在用的标签也在用，是跟着作业要求一步一步来的。我最后还是用...
HTMLtable布局
Aries_Stark的博客
05-28 253
属性 border（边框 默认为0） width height（单位 px %占容器） align （对齐 left center right） bgcolor（背景颜色） background（背景图片 图片优先级高于颜色） cellpadding（边距） cellspacing（间距） <table border="3" width="10%" height="10%" align="center" bgcolor="grey" cellpadding="30" cellspacing="20
【HTML】11-使用 table进行布局
JeffHan^_^的博客
07-25 625
<!-- table布局：传统布局方式 div+css布局：推荐使用的布局方式 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用table标签进行页面布局</title> </head> <body> <h1 align="center">标题</h1>
html之表格详解及table表格实现页面布局
热门推荐
weixin_49855251的博客
01-18 1万+
html表格 1、table>标签：声明一个表格，它的常用属性如下： border属性 定义表格的边框，设置值是数值 cellpadding属性 定义单元格内容与边框的距离，设置值是数值 cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、tr>标签：定义表格中的一行 3、和th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们
HTML/CSS -- 利用table进行布局
wust_cyl的博客
12-28 1350
cssTable布局：table布局 布局1：高度固定，左边宽度固定，右边自适应 &lt;style&gt; .content-wrap { display: table; height: 100px; width: 100%; } .content-left ...
7.HTML——table布局
weixin_46319702的博客
03-22 300
table布局 代码： 运行效果： 1.table作为一个大身体，所有的内容都在其中显示，故在table中直接定义总高度。 2.<tr>中一定要有<td>,一整行的完整内容要通过colspan和<td>来进行处理 3.height等也是<td>的属性。其中的颜色要用style的书写。 ...
前端开发--HTML--table布局
sundanping_123的博客
07-03 518
做一个上图的简历，先分析，四列，分别是260 30 480 30 ，总共是800. <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>布局</title> </head> <body topmargin='0'...
css table-layout.html
weixin_42193179的博客
03-14 386
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格布局</title> <style> table.auto { /*自动表格布局*/ ...
HTML 一个table布局
除了你无可取代
11-10 227
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="type_1" style="border:0px solid Silver;height:90%; width:100%"&gt;       &lt;table width=100% height=100% border=0 cellspacing=0 ce
HTML-table布局
Judian6974的博客
07-12 1169
table布局，div块，标签总结
jq 将html div布局转table布局
05-26
jq是一个针对HTML文档进行操作的JavaScript库，它本身并不提供将div布局转换为table布局的功能。但可以使用jq来实现这个功能。 假设我们有如下的div布局： ```html <div class="container"> <div class="row"> <div class="col">内容1</div> <div class="col">内容2</div> <div class="col">内容3</div> </div> <div class="row"> <div class="col">内容4</div> <div class="col">内容5</div> <div class="col">内容6</div> </div> </div> ``` 我们可以使用以下jq代码将其转换为table布局： ```javascript $(document).ready(function(){ // 创建一个新的table元素 var table = $("<table></table>"); // 遍历每一个行元素 $(".row").each(function(){ // 创建一个新的tr元素 var tr = $("<tr></tr>"); // 遍历每一个列元素 $(this).find(".col").each(function(){ // 创建一个新的td元素，并将列元素的内容添加到td中 var td = $("<td></td>").html($(this).html()); // 将td添加到tr中 tr.append(td); }); // 将tr添加到table中 table.append(tr); }); // 将table添加到原来的容器中 $(".container").html(table); }); ``` 这段代码将创建一个新的table元素，并遍历每一个行元素和列元素，将它们转换为table布局。最后，将新的table元素添加到原来的容器中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值