首页 > 其他分享 >第3章 表格布局与表单交互

第3章 表格布局与表单交互

时间:2024-09-27 19:51:00浏览次数:11  
标签:表格 表单 3.4 设置 按钮 交互 属性


3.1 表格概述


3.1.1 表格的结构

3.1.2 表格的基本语法

在 HTML中,常用表格主要通过5个标记来构成:<table>,<caption>,<th>,<tr>和< td>。

<table>
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

 


3.2 表格属性的设置


3.2.1 表格边框属性

(1)border属性。用于设置边框的粗细,单位是像素。
(2)bonderedlor属性。用于设置表格边框的颜色,可以使用rgb函数、十六进制数和颜色英文名。
(3)bordereolorlight属性。用于设置表格亮边框,对表格左上边框生效。

(4)bordercolordark属性。用于设置表格暗边框,对表格右下边框生效。


3.2.2 表格的宽度和高度属性

<table width="200" height="150" border="3px">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

运行结果: 


3.2.3 表格背景颜色与表格图像属性

设置表信的 bgeolor属性可以改变表格的背景颜色,设置表格的backgound 属性可以为表格增添背景图像效果,使表格更加美观。
语法:
<table bgealor " " baekground=" "></table>
(1)bgeolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
(2)baeksmoumd。设置背景图像,图像的路径可以是绝对路径或相对径。
(3)同时设置背景颜色和青景图像属性时,背景图像会部分或完全覆盖背景颜色。

<table bgcolor="#aaaaff">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

 运行结果:

<table width="200" height="150" background="img/aa.jpg">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

 运行结果: 

响应式布局
        <table width="20%" height="15%" background="img/aa.jpg">他会随着页面的缩放而进行表格的缩放,占页面宽20%,高15%。 

 
3.2.4 表格边框样式属性

<table frame="vsides" rules="all">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

 运行结果: 

 


3.2.5 表格单元格间距、单元格边距属性

间距:

<table cellspacing="15" border="2px">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

边距 :

<table cellpadding="15" border="2px">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

 


3.2.6 表格水平对齐属性

<table align="center">
			<caption>23软件二班名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>2</td>
			<td>零三</td>
			<td>男</td>
			</tr>
			<tr>
			<td>3</td>
			<td>噢三</td>
			<td>男</td>
			</tr>
		</table>

  运行结果:


3.2.7 设置表格的(tr)标记行的属性

<table border="2px" width="500px" height="500px">
				<caption>23软件二班名单</caption>
				<tr align="left" valign="top">
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				</tr>
				<tr align="center" valign="middle">
				<td>1</td>
				<td align="left" valign="top">张三</td>
				<td>男</td>
				</tr>
				<tr align="center" valign="bottom">
				<td>2</td>
				<td>零三</td>
				<td>男</td>
				</tr>
				<tr align="right">
				<td>3</td>
				<td>噢三</td>
				<td>男</td>
				</tr>
			</table>

  valign="top"->上

valign="middle"->中

valign="bottom"->下

 


3.2.8 设置单元格的属性


3.2.9 表格单元格跨行、跨列属性


3.2.9.1 单元格跨行

<tr align="center">
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>


3.2.9.2 单元格跨列

<tr align="center">
<td rowspan="2">学校领导讲话</td>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置单元格跨列跨行属性</title>
</head>
<body>
	<h3 align="center">设置单元格跨列、跨行属性</h3>
	<table border=" 1" width=" 500px" align="center" bordercolor="#3366ff">
	<caption>专业研讨会日程安排</caplion>
	<tr align="center">
	<td colspan="2">上午</td>
	<td colspan="2">下午</td>
	</tr>
	
	<tr >
	<td>8:00-10:00</td>
	<td>10:10-12:00 </td>
	<td>14:00-16:00</td>
	<td>16:10-18:00</td>
	</tr>
	
	<tr align="center">
	<td rowspan="2">学校领导讲话</td>
	<td>大会主题报告</td>
	<td>行业企业专题报告</td>
	<td rowspan="2">总结报告</td>
	</tr>
	
	<tr align="center">
	<td>专家报告</td>
	<td>分组讨论</td>
	</tr>
	
	<tr align="center">
	<td colspan="4">全天参观人工智能实训中心</td>
	</tr>
	</table>
</body>
</html>

运行结果 


3.3 表格嵌套

<!--示例 3.8程序-->
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
				<title>嵌套表格布局页面</title>
					<style>
						body{font-size:36px;}
					</style>
		</head>
			<body>
				<h4 align="center">嵌套表格布局页面</h4>
				<table width="660px" border="1" align="center" bordercolor=" #3333f" >
					<tr>
						<td height=" 100" >
							<table width="100%" border="1" bordercolor="red">
								<tr height="50" align="center" >
									<td rowspan=" 2" width=" 100" >logo</td>
									<td>广告条</td>
								</tr>
								<tr height="50" align="center">
									<td>导航</td>
								</tr>
							</table>
						</td>
					</tr>
					
					<tr>
						<td height = " 300" >
							<table width =" 100% " border=" 1" bordercolor=" #33f99" >
								<tr align = " center" >
									<td height="300" width="30%">左栏目</td>
									<td height="300" width="70%">正文内容</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr align = " center" >
						<td height="100">版权信息</td>
					</tr>
				</table>
			</body>
	</html>

运行结果


3.4 表单

3.4.1 表单标记

表单 form 标记为成对标记,以<form>开始和</form>结束。表单定义了采集数据的范围,其所包含的数据内容将被完整地提交给服务器。


3.4.2 定义域和域标题

<fieldset>
            <legend align="center">个人信息</legend>

  </fieldset>


3.4.3 表单信息输入


3.4.3.1 单行文本输入框

设置input 标记的 type属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输入的数据只能单行显示,不能换行。语法:
<input name="" type=" text" maxlength="" size="" value="" readonly/>
说明:单行文本输入框的主要属性有 name,maxlength ,size,value 和 readonly

<form>
	用户名:<input type="text" name="user"/>
</form>


3.4.3.2 密码输入框

设置imnput 标记的type属性值为password,可以实现向表单中插入一个密码输入框。密码输人框中可以输人任意类型的数据,与单行文本输入框有所不同,这些数据不是实时地显示在页面上,而是被显示字符“·”所取代,这样设计可以保障用户输入的密码不被泄露。
语法:
<input name = " " type= " password" maxlength = " " size = " " />
说明:密码输人框的主要属性有name,maxlenth和size,取值及说明与单行文本输入框
相同。

    <form>
		用户名:<input type="text" name="user"/>
		密码:<input type="password" name="password"/>
	</form>


3.4.3.3 复选框

设置imput 标记的type属性值为checkbox,可以实现向表单中插入一个复选框,用户利用复选框在网页上设置多项选择。
语法:
<input name =" " type= " checkbox" value= " " checked/>

        <form>
			姓名:<input type="text" name="name"/>
			爱好:
			<input type="checkbox" name="n1" value="sing" checked/>唱歌
			<input type="checkbox" name="n2" value="dance"/>跳舞
			<input type="checkbox" name="n3" value="basketball"/>篮球
			<input type="checkbox" name="n4" value="run"/>长跑
		</form>


3.4.3.4 单选按钮

设置 imput 标记的type 属性值为radio,可以实现向表单中插入一个单选按钮,用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name = " " type = " radio" value =" " checked/>
说明:单选按钮的属性有name,vae和checked等,其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的,在一组单选按钮中,只能选择一个单选按钮,所以一组单选按钮的所有name属性值必须相同,value属性取值应该不同

	<form>
性别:<input type="radio" name="sex" value="male"/>男
		<input type="radio" name="sex" value="female"/>女
	</form>


3.4.3.5 图像按钮

设置impu! 标记的type 属性值为image,可以实现向表单中插入一个图像按钮,用户可利用图像按钮在网页中插人一张图像,通过sre 属性加载图像
语法:
<input name=" " type=" image" src=" " width=" " height=" "/>说明:图像按钮主要属性有name,src,width和height。

	<form>
<input type="image" src="img/aa.jpg"/>
	</form>


3.4.3.6 提交按钮

可以实现向表单中插入一个提交按钮,提交按设置 input 标记的 type 属性值为 submit,钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value=" 提交"/>
说明:提交按钮的属性主要有name和value

<form>
<input type="submit"/>
</form>


3.4.3.7 重置按钮


设置 imput 标记的type属性值为reset,可以实现向表单中插人一个重置按钮,用于将表单中所有的输入信息清空,然后让用户可以重新填写。
语法:
说明:重置按钮的属性主要有name和value,其属性、取值及说明与提交按钮的相同,<input name = " " type = " reset" value = " "/>

	<form>
		用户名:<input type="text" name="user"/>
		密码:<input type="password" name="password"/>
		<input type="reset" />
	</form>

 


3.4.3.8 普通按钮

设置imput 标记的type属性值为button,可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用,如果不通过表单提交按钮来处理事件,则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name= " " type=" button" value=" " onclick =" "/>
说明:普通按钮的属性有name,value和onclick

<form>
    <input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
</form>


3.4.3.9 文件选择框

<form>
	请选择材料<input type="file" />
</form>


3.4.3.10 隐藏框

设置input 标记的 type 属性值为 hidden,可以实现向表单中插入一个隐藏框,用户提交表单时,隐藏框的信息也会一起提交到服务器,但隐藏框在网页中是不可见的。
10.隐藏框
语法:
<input name = " " type = " hidden" value = " "/>

<form>
    <input type="hidden" name="abc" value="123"/>
</form>


3.4.4 多行文本输入框

<form>
		请输入您的宝贵意见:
		<textarea rows="9" cols="30"></textarea>
</form>


3.4.5 下拉列表框

        form>
			你的选项是:
			<select multiple>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</form>


3.5 综合案例——表格与表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室————联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:hold;
			}
			.zil{
				font-family: "微软雅黑";
				font-size: 20px;
				font-weight: bold;
				color: #ED630A;
			}
			.zi2{
				font-family: "微软雅黑";
				font-weight: bold;
				color: #f60;
				text-decoration: underline;
			}
			.zibai{
				font-family: "微软雅黑";
				color: #fff;
			}
			body{
				background-image: url("img/bj.jpg");
			}
		</style>
	</head>
	<body>
		<table width="1190" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">
							<img src="img/logo.jpg" alt="" width="100" height="63"/></td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">网站首页</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">关于我们</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">团队合作</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">相关作品</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">设计理念</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">人物介绍</td>
						<td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">联系我们</td>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellpadding="0" cellspacing="20">
						<tr>
							<td height="318" width="25%">&nbsp</td>
							<td height="280" valign="top">
								<table width="100%" border="0" cellpadding="20" cellspacing="0">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
									</tr>
									<tr>
										<td height="196" bgcolor="#ffaf03">
											<p class="zibai">地址:广东省江门市XXXXXXXXXXXXX<br />
											电话:0750-XXXXXXX<br />
											传真:0750-XXXXXXX<br />
											QQ:12345678<br />
											电子邮箱:<br />
											[email protected]<br />
											工作室网站:<br />
											www.XXXX.com</p >
										</td>
									</tr>
								</table>
							</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellpadding="20" cellspacing="0">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">关于我们</td>
									</tr>
									<tr>
										<td height="278" valign="top" bgcolor="#fc880d"><p class="zibai">达维工作室是专业
										从事互联网相关开发的公司。<br />
										专业提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br />
										达维工作室成立于2014年,已经成为国内著名的王国站建设提供商。多年的风雨历程.....
										</p>
										<p class="zibai">&nbsp;</p>
										<p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280">
								<table width="100%" border="0" cellspancing="0" cellpadding="20" style="border-spacing: 0px;">
									<tr>
										<td height="30" align="center" bgcolor="#ffffff" class="zil">团队合作</td>
									</tr>
									<tr>
										<td height="332" valign="top" bgcolor="#66A00e"><p class="zi2">我们的团队:
										</p>
										<p class="zibai">成员都具有多年的实际设计工作经验,满足客户的国际化需求。
										根据每个公司特点,设计出属于客户....</p>
										<p class="zi2">我们的承诺:</p>
										<p class="zibai">本工作室设计与制作的网站均属于原创、不套用网上任何模板,
										根据每个公司特点,设计出属于客户....</p>
										<p class="zibai chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册信息</title>
		<style type="text/css">
		fieldset{
			width: 700px;
		}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
			<fieldset>
				<legend>用户注册</legend>
				<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
				<td><img src="img/aa.jpg" width="600" height="195" /></td>
				  </tr>
				</table>
				<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
				  <tr>
				    <td width="200" align="right">用户名:</td>
				    <td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
				  </tr>
				  <tr>
				    <td width="200" align="right">密码:</td>
				    <td><input type="password" name="textfield2" id="textfield2" /></td>
				  </tr>
				  <tr>
				    <td width="200" align="right">确认密码:</td>
				    <td><input type="password" name="textfield3" id="textfield3" /></td>
				  </tr>
				  <tr>
				    <td width="200" align="right">性别:</td>
				    <td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
			男<img src="img/Male.gif" width="22" height="21" align="absmiddle" />
				      <input type="radio" name="radio" id="radio2" value="radio2" />
				女<img src="img/Female.gif" width="23" height="21" align="absmiddle" /></td>
				  </tr>
				  <tr>
				    <td width="200" align="right">出生日期:</td>
				    <td><input name="textfield4" type="text" id="textfield4" size="12" />
				      年
				        <select name="select" id="select">
				          <option>1</option>
				          <option>2</option>
				          <option>3</option>
				          <option>4</option>
				          <option>5</option>
				          <option>6</option>
				          <option>7</option>
				          <option>8</option>
				          <option>9</option>
				      </select>
				        月
				        <select name="select2" id="select2">
				          <option>1</option>
				          <option>2</option>
				          <option>3</option>
				          <option>4</option>
				          <option>5</option>
				          <option>6</option>
				          <option>7</option>
				          <option>8</option>
				          <option>9</option>
				        </select>
				        日</td>
				  </tr>
				  <tr>
				    <td width="200" align="right">业余爱好:</td>
				    <td><input type="checkbox" name="checkbox" id="checkbox" />
				      看书
				      <input type="checkbox" name="checkbox2" id="checkbox2" />
				      上网
				      <input type="checkbox" name="checkbox3" id="checkbox3" />
				      打球</td>
				  </tr>
				  <tr>
				    <td width="200" align="right">头像:</td>
				    <td height="25"><input type="file" name="fileField" id="fileField" /></td>
				  </tr>
				  <tr>
				    <td width="200" align="right">意见或建议:</td>
				    <td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
				  </tr>
				  <tr>
				    <td colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
				    <input type="reset" name="button2" id="button2" value="重置" /></td>
				  </tr>
				</table>
			</fieldset>
 
</form>
	</body>
</html>

 

 

标签:表格,表单,3.4,设置,按钮,交互,属性
From: https://blog.csdn.net/2402_83227353/article/details/142374028

相关文章

  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线打开 word文件并提取数据区
    PageOffice国产版:支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel、兆芯、海光等)、ARM(飞腾、鲲鹏、麒麟等)、龙芯(LoogArch)芯片架构。查看本示例演示效果本示例关键代码的编写位置Vue+Springboot注意本文中展示的代码均为关键代码,复制粘贴到您的项目中,按照实际的情况,例如......
  • 表单的学习笔记
    表单就是用来收集信息,填入数据的。就像我们在生活中填的调查表,保险单等。表单元素允许我们在页面里填入信息、选择对应信息等,下面我们就来学习一下,也做出来一个表单。首先要先了解表单元素,通过元素才能做出大概轮廓,再用属性来设置需求。一、表单元素form:定义供用户输入的表......
  • pbootcms提示:登录失败:表单提交校验失败,请刷新后重试!
    当使用PBootCMS后台登录时遇到“登录失败:表单提交校验失败,请刷新后重试!”的错误提示时,这通常是由于一些配置或环境问题导致的。以下是一些常见的解决方法:常见解决方法删除 runtime 目录切换PHP版本清除浏览器缓存检查CSRF令牌解决方法详细步骤方法一:删除 runtime......
  • pbootcms通过会员自带上传实现留言表单图片文件上传功能
    在PBootCMS3.0会员版本中,你可以通过修改会员上传头像的功能来实现留言上传图片的功能。以下是详细的步骤和示例代码:步骤复制上传文件将member/comm/upload.html文件复制到上一层目录,命名为comm/upload.html。修改上传接口修改upload.html文件中的上传接口。将upload......
  • 比较好用的调节Table表格的表头和内容的宽度的方法
    因为大部分的Table组件的表头宽度不太适合我们所使用的,我们可以通过封装函数来适应表头的宽度。getColumnWidth(label,prop,tableData){   //label表头名称   //prop对应的内容   //tableData表格数据   constminWidth=150;//最小宽度......
  • Axure解决列表项中"触发内部元件交互"的冲突问题
    背景在绘制列表项中“更多”菜单按钮的时候,我想在我鼠标悬浮上去时会出现一个底色的效果如下图:但我在做的过程中发现如果在一个组下勾选了"触发内部元件鼠标交互样式",那你鼠标还没放到"更多"按钮上就已经给触发了制作过程1、所需元件2、结构3、只需要在"更多"这个......
  • 第三章 表格布局与表单交互
    3.1表格概述3.1.1表格的结构表格是由行和列组成的二维表,而每行又由一个或多个元素组成,用于放置数据或其他内容。3.1.2表格的基本语法(1)table标记是成对标记,<table>表示表格开始,</table>表示表格结束。(2)caption标记是成对标记,<caption>表示标题开始,</caption>表示标......
  • 豆包通用模型Pro:字节跳动的AI革新,引领多模态交互新纪元
    在人工智能技术的快速发展浪潮中,字节跳动凭借其最新的豆包通用模型Pro,再次站在了技术创新的前沿。豆包通用模型Pro不仅在技术上取得了显著的突破,更在实际应用中展现了其强大的多模态交互能力,为内容创作和用户交互提供了全新的解决方案。技术突破:豆包通用模型Pro的核心优势豆包通用......
  • 第三章 表格布局与表单交互
     3.1 表格的结构调试软件:hBuilder简单的html表格由table元素以及一个或者多个<tr>、<th>或<td>元素组成。<tr>元素定义表格的行,<th>元素定义表格的头,<td>定义表格单元格。更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。<table>标签的属性......
  • html表格
    1.基本结构2.行标题和列标题SaturdaySundayTicketssold:120135Totalsales:$600$6753.跨列9am10am11am12amMondayGeographyMathArtTuesdayGymHomeEc4.跨行ABCBBCCNN6pm-7pmMovieComedyNews7pm-8pmSport......