3.1表格概述
表格的结构：表格是由行和列组成的二维表，行与列交叉组成单元格
3.1.2表格的基本语法
常用表格标记形式及说明
<th></th>:表头文字内容一般居中，加粗显示
<tr></tr>:一个表格中可以插入多个tr标记，表示多行
3.2 表格属性设置
3.2.1表格边框属性
3.2.2表格宽度和高度属性
语法：<table width="宽度" height="高度">...</table>
宽度和高度可以是长度单位或百分比
3.2.3表格背景颜色和图像属性
语法：<table background="宽度" bgcolor="高度">...</table>
bgcolor:可以用rgb函数，十六进制，英文颜色来设置
3.2.4表格边框样式属性
语法：<table frame=" " rules=" ">...</table>
3.2.5表格单元格间距和边距属性
语法：<table cellspacing=" " cellpadding=" ">...</table>
cellspacing（默认为2px）和cellpadding值的单位为像素和百分比
3.2.6表格水平对齐属性
语法：<table align="left/center/right" >...</table>
3.2.7设置表格的（tr）标记行的属性
valign属性：top(顶部)，middle(居中)，bottom(底部)
3.2.8设置单元格属性
td标记的属性表：
3.2.9表格单元格跨行，跨列属性
使用单元格rowspantd标记的属性可以设置单元格跨行合并
跨行语法：<td rowspan="行数">...</td>
使用单元格colspan标记的属性可以设置单元格跨列合并
跨列语法：<td colspan="列数">...</td>
3.3表格嵌套
*以上示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
/*
<table>
<caption>23软件1班名单</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>
</table>
<table width="200px" height="150px">
<caption>23软件1班名单</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>
</table>
<table bgcolor="#fff333">
<caption>23软件1班名单</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>
</table>
<table border="2px" cellspacing="5px" cellpadding="5px">
<caption>23软件1班名单</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>
</table>
<table border="2px" width="200px" height="150px">
<caption>学生名单</caption>
<tr align="left" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right" valign="bottom">
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
</body>
</html>
<!------->
<!DOCTYPE num>
<html>
<head>
<meta charset="UTF-8">
<title>设置单元格跨列、跨行属性</title>
</head>
< body>
<h6 align=" center">设置单元格跨列、跨行属性</h3>
<table border="1" width="500px" align=" center" bordercolor="#3366ff">
<caption>专业研讨会日程安排</ caption>
<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 newspan="2">学校领导讲话 </td>
<td>大会主题报告</td>
<td>行业企业专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr aliga=" center">
<td>专家报告</td>
<td>分组讨论</td>
</table></td></tr>
<tr align="center">
<td height="100">版权信息</td>
</tr>
</table>
</body>
</html>示例结果
3.4表单
3.4.1表单标记
表单from标记为成对标记，<from>表单标记属性</from>
3.4.2定义域和域标题
legend标记为fieldset标记的定义域标题
语法：<from>
<fieldset>
<legend alig="left|center|right">域标题内容</legend>
</fieldset>
</from>
3.4.3表单信息输入
语法:<input name="" type="">
1.单行文本输入框
语法：<input name="" type="text" maxlength="" size="" value="" readonly/>
2.密码输入框
输入的数据不是实时的显示在页面上，而是被显示字符"."
语法：<input name="" type="password" maxlength=""size =""/>
3.复选框
设置多项选择
语法：<input name="" type="checkbox" value="" checked/>
checked：预先选定复选框
4.单选按钮
语法：<input name="" type=" radio" value=""checked/>
5.图像按钮
语法：<input name="" type="image" src="" width="" height=""/>
6.提交按钮
语法：<input name=""type="submit" value="提交"/>
7.重置按钮
语法：<input name=""type="reset" value=""/>
8.普通按钮
语法：<input name="" type="button" value="" οnclick=""/>
onclick：事件代码，绑定事件代码，自定义函数或直接使用脚本代码
9.文件选择框
语法：<input name="" type="file" value=""/>
10.隐匿框
语法：<input name="" type="hidden" value=""/>
hidden:隐匿框
3.4.4多行文本输入框
语法：<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>
3.4.5下拉列表框
语法：<select name="" size="" multiple>
<option value="" selected>文字信息1</option>
<option value="">文字信息2</option>
.....
</select>
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<fieldset>
<!--文本框-->
<legend align="center">个人信息</legend>
用户名：<input type="text" name="user"/>
<!--单选按钮框-->
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="Female"/>女性
<!--复选框-->
爱好：
<input type="checkbox" name="c1" value="sing" checked/>唱歌
<input type="checkbox" name="c2" value="dance"/>跳舞
<input type="checkbox" name="c3" value="backetball"/>篮球
<input type="checkbox" name="c4" value="run"/>长跑
<br />
<!--文件选择框-->
请上传佐证材料：<input type="file"/>
</fieldset>
</form>
<!--密码框-->
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<!--提交按钮-->
<input type="submit" value="登录"/>
<!--重置按钮-->
<input type="reset"/>
<!--普通按钮-->
<input type="button" value="注册"
onclick="javascript:alert('注册新用户')"/>
</form>
<!--下拉列表框-->
<form>
请选择课程：
<select multiple>
<option value="">政治</option>
<option value="">历史</option>
<option value="">语文</option>
<option value="">数学</option>
<option value="">英语</option>
</select>
<!--多行文本输入框-->
请输入您宝贵的意见：
<textarea rows="4" cols="30"></textarea>
</form>
</body>
</html>示例结果
3.5综合案例
案例一：达维工作室
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室---联系我们</title>
<style type="text/css">
.chu{
font-weight: bold;
}
.zi1{
font-weight: 微软雅黑;
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="O" cellspacing="5">
<tr>
<td width="100" align="center" valign=" middle" bgcolor="#FFFFFF">
<img src="img/logo.jpg" alt="" width="100" height="63"/></td>
<td width="100" align="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">网站首页</td>
<td width="100" align ="center"valign =" middle" bgcolor ="#FFFFFF" class="zi1">关于我们</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
<td width="100" align=" center" valign =" middle" bgcolor =" #FFFFFF" class="zi1">设计理念</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
<td width="100" align ="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width=" 100%"border="0" cellspacing="20" cellpadding="0">
<tr>
<td height="318"> </td>
<td widih="280" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196"bgcolor="#FFAF03">
<p class="zibai">地址：广东省江门市xXXXXXXXX<br/>
电话：0750-XXXXXX<br/>
传真:0750-XXXXXX<br />
QQ:12345678<br />
电子邮箱：<br />
123@163.com<br />
工作室网站：<br/>
www.XXXX.com</p >
</td>
</tr>
</table>
</td>
<td width="280" valign="top">
<table width="100%" border="0" cellspacing ="0" cellpadding="20">
<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"> </p >
<p class="zibai chu">更多>></p >
</td>
</tr>
</table>
</td>
<td width="280">
<table width =" 100%" border="0" cellspacing ="0" cellpadding ="20">
<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"> </p >
<p class ="zibai chu">更多 >></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 width="200" align="right">用户名：</td>
<td><input type="text" name="textfield" id="textfield" /></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>
<option>10</option>
<option>11<option>
<option>12</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>
<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>
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
