jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置

转载

mob64ca13f87273 2023-10-17 09:33:43

网页布局——表格布局

形如下图：

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页布局-表格布局</title>
	</head>
	<body>
		<h1>表格</h1>
		<!--
			表格布局
			div布局
			table标签中常用属性
        	border=X	-》边框-》给表格添加边框，数值非0
        	cellspacing =X	-》单元格之间的间距
        	cellpadding=X		-》内容与边框的像素（内边距）
        	width=X|S%		-》表格的宽度|百分号表示占浏览器显示的百分之多少
        	height=X|S%		->表格的高度|百分号表示占浏览器显示的百分之多少
        	bgcolor=color	设置表格颜色
        	align=center		设置表格对其方式（默认左对齐）
       -->
		<table align="center" border="1" cellspacing="0" cellpadding="5" width="400" height="200" bgcolor="pink">
			<!--tr：行-->
			<!--
            	tr常用
            	align：设置水平对齐	center left right
            	valign：设置垂直对齐	 top middle bottom
            	
            	td常用
            	align：设置水平对齐	center left right
            	valign：设置垂直对齐	 top middle bottom
            	width：设置某一列的宽度
            	rowspcing
           -->
			<tr align="center" valign="top">
				<!--td：列-->
				<td>编号</td>
				<td>名称</td>
				<td>金额</td>
			</tr>
			<tr>
				<td>1001</td>
				<td align="center">奥迪</td>
				<td>1090000</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>劳斯莱斯</td>
				<td>10900000</td>
			</tr>
			<!--            	
            	td常用
            	align：设置水平对齐	center left right
            	valign：设置垂直对齐	 top middle bottom
            	width：设置某一列的宽度
            	rowspcing：
         -->
			<!--合并单元格-->
			<tr>
				<td>1003</td>
				<td>宝马</td>
				<td>34723875</td>
			</tr>
		</table>
		<h1>跨列合并表格</h1>
        <!--            	
            	td常用
            	align：设置水平对齐	center left right
            	valign：设置垂直对齐	 top middle bottom
            	width：设置某一列的宽度
            	rowspan：跨行显示
            	colspan:跨列显示
          -->
		<table align="center" border="1" cellspacing="0" cellpadding="5" width="400" height="200" bgcolor="pink">
			<tr align="center" valign="top">
				<!--td：列-->
				<td colspan="2">编号/名称</td>
				<td>金额</td>
			</tr>
			<tr>
				<!--tr：行-->
				<td>1001</td>
				<td align="center">奥迪</td>
				<td>1090000</td>
			</tr>
			<tr>
				<td rowspan="2">1002</td>
				<td>劳斯莱斯</td>
				<td>10900000</td>
			</tr>
			<tr>
				<td>宝马</td>
				<td>34723875</td>
			</tr>
		</table>
	</body>
</html>

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_html_02

练习一

主页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网易邮箱登录</title>
	</head>
	<body>
		<table>
			<!--第一行-->
			<tr>
				<td><img src="../img/图片素材1/163logo.gif"/></td>
				<td align="right">  免费邮 企业邮 VIP邮箱 帮助  </td>
			</tr>
			
			<!--第二行-->
			<tr> 
				<td><img src="../img/图片素材1/imap.jpg"/></td>
				<td align="right" rowspan="2">
					<table border="1">
						<tr>
							<td>
								<form>
									<table  cellspacing="30">
										<tr>
											<td colspan="3">
												<img src="../img/图片素材1/loginIcon.gif" width="20" height="20"/>普通登录
											</td>
										</tr>
			
										<tr>
											<td>用户名：</td>
											<td><input type="text" /></td>
											<td>@163.com</td>
										</tr>
										
										<tr>
											<td>密    码：</td>
											<td><input type="text" /></td>
										</tr>
			
										<tr>
											<td>版    本:</td>
											<td><select>
														<option>默认</option>
														<option>版本1</option>
													</select>
											</td>
										</tr>
			
										<tr>
											<td colspan="3" align="center">
												<input type="checkbox" />自动登录
												<input type="checkbox" />SSL
											</td>
										</tr>
			
										<tr>
											<td colspan="3" align="center">
												<input type="submit" value="登录" />
												<input type="submit" value="注册" />
											</td>
										</tr>
									</table>
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td >
					<ul>删除线格式 						<li>163/126/yeah三大免费邮箱均默认开放</li>
						<li>全面支持iPhone/iPad及Android等系统</li>
						<li>客户端、手机与网页，实现发送、阅读<br />邮件立即同步普通登录手机号登录</li>
					</ul>
				</td>
			</tr>
			
			<!--第四行-->
			<tr>
				<td><img src="../img/图片素材1/netease_logo.gif"/></td>
				<td align="right"> 关于网易 免费邮 官方博客 客户服务 隐私政策 | 网易公司版权所有 ? 1997-2011 </td>
			</tr>
	
	</table>
	</body>
</html>

效果展示

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_html_03

图片素材

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_ci_04

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_ci_05

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_html_06

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_ci_07

练习二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阿里巴巴注册</title>
		<style>
			li{list-style-type: none ;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td><img src="../img/图片素材2/header.jpg"</td>
			</tr>
			
			<tr>
				<td>
					<form>
						<table  cellspacing="20">
							<tr align="right">
								<td>电子邮箱：</td>
								<td><input type="text" /></td>
							</tr>
							
							<tr align="right">
								<td>会员登录名：</td>
								<td><input type="text" /></td>
							</tr>
							
							<tr align="right">
								<td>密码：</td>
								<td><input type="text" /></td>
							</tr>
							
							<tr align="right">
								<td>再次输入密码：</td>
								<td><input type="text" /></td>
							</tr>
							
							<tr align="right">
								<td>会员身份：</td>
								<td>
									<input type="radio" name="identity" />买家
									<input type="radio" name="identity" />卖家
									<input type="radio" name="identity" />两者都是
								</td>
							</tr>
							<tr align="right">
								<td>验证码：</td>
								<td><input type="text" /></td>
								<td><img src="../img/图片素材2/verycode.gif"/><a href="http://www.baidu.com">看不清？换一张</a></td>
								<td></td>
							</tr>
							
							<tr align="center">
								<td></td>
								<td ><img src="../img/图片素材2/btn_reg.gif" /></td>
								<td></td>
							</tr>
							
							<tr align="center">
								<td></td>
								<td colspan="2" align="left">
									<textarea rows="8" cols="50">
										欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
									</textarea>
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			
			<tr>
				<td><img src="../img/图片素材2/footer.jpg"</td>
			</tr>
		</table>
			
	</body>
</html>

jQuery append html后导致表格宽度变窄 html中表格宽度怎么设置_ci_08