3.1 表格概述
在明确目的和受众后，接下来需要对表格的结构和主要数据进行概述。 这包括表格的标题、行列标题、数据单位等基本信息，以及表格中的关键数据和指标。 通过简要描述这些数据，可以帮助受众快速了解表格的整体内容和主要信息。
3.1.1 表格的结构
3.1.2 表格的基本语法
<table>
<tr>
<th>默认加粗</th>
</tr>
<tr>
<td></td>
</tr>
</table>标签
3.2 表格属性的设置
<table border="1px">
<caption>环境</caption>
<tr>
<th>序列</th>
<th>序列1</th>
<th>序列2</th>
</tr>
<tr>
<td>1</td>
<td>11</td>
<td>111</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>222</td>
</tr>
<tr>
<td>3</td>
<td>33</td><td>333</td>
</tr>
</table>
3.2.1 表格边框属性
<table border="1px">
3.2.2 表格的宽度和高度属性
<table border="1px" width="150px" height="100px">
3.2.3 表格背景颜色与表格图像属性
<table border="1px" width="150px" height="100px" bgcolor="#00ff00" background="img/jjj.jpg">
3.2.4 表格边框样式属性
3.2.5 表格单元格间距、单元格边距属性
<table cellpadding="10px" cellspacing ="10px">
cellspacing属性：单元格间距。cellpadding属性：单元格边距。
3.2.6 表格水平对齐属性
<style>
tr {
text-align: center;
}
</style> 可以给所有tr标签设置居中
<table rules="all" border="1px" bgcolor="#00ff00" background="img/jjj.jpg" width="300dp" height="200dp" align="center">表格居中
3.2.7 设置表格的（tr）标记行的属性
<tr align="right"></tr> 右对齐
<tr align="center"></tr>居中
<tr align="left"></tr>左对齐
valign有三个属性 top,middle,bottom分别为顶，居中，底
3.2.8 设置单元格的属性
<th align="right" valign="bottom">序列</th>
3.2.9 表格单元格跨行、跨列属性
colspan="2"跨列
rowspan="2"跨行
3.2.9.1 单元格跨行
3.2.9.2 单元格跨列
3.3 表格嵌套
3.4 表单
<form><form>
3.4.1 表单标记
3.4.2 定义域和域标题
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
<form>
用户名:<input type="text" name="uese"/>
密码:<input type="password" name="password"/>
</form>
3.4.3.2 密码输入框
密码:<input type="password" name="password"/>
3.4.3.3 复选框
<form>
姓名：<input type="text" name="name"/>
爱好：<input type="checkbox" name="n1" value="sing" checked/>唱歌
<input type="checkbox" name="n2" value="tt"/>跳舞
<input type="checkbox" name="n3" value="ll" />篮球
<input type="checkbox" name="n4" value="cc"/>长跑
</form>checked默认选择
3.4.3.4 单选按钮
<form>
性别：<input type="radio" name="sex" value="sex" checked />男
<input type="radio" name="sex" value="sex"/>女
</form>单选由radio name需要一样
3.4.3.5 图像按钮
<form >
<input type="image" src="img/bt.jpg" name="tu" value="ttt" />
</form>
3.4.3.6 提交按钮
<form >
<input type="submit" name="button" value="提交" />
</form>
3.4.3.7 重置按钮
<input type="reset" value="重置" />
3.4.3.8 普通按钮
<input type="button" value="普通按钮" />
3.4.3.9 文件选择框
选择文件<input type="file"/><br />
3.4.3.10 隐藏框
<input type="hidden" name="ab" value="123" />
3.4.4 多行文本输入框
请输入您的意见<textarea name="4" id="" cols="30" rows="10"></textarea>
3.4.5 下拉列表框
请选择课程：
<select >
<option name="1">网页</option>
<option name="1">JAVA</option>
<option name="1">安卓</option>
<option name="1">PS</option>
<option name="1"></option>
</select>
3.5 综合案例——表格与表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室——联系我们</title>
<style type="text/css">
.chu{
font-weight: bold;
}
.zi1{
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">
<tr>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
<img src="img/logo.jpg" 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 width="270" 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">地址：广东省
<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="zi1">关于我们</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="zi1">团队合作</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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>用户注册信息</title>
<style type="text/css">
fieldset{
width:700px;
}
</style>
</head>
<body>
<form action="" method ="post" encdype=" mulipart/om- data" name=" forml" id="from1">
<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="texfield" id="textfield" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" mame="textfield2" id="textfield2"/></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name= "textield3" id="textfield3"/></td>
<tr>
<tr>
<td widh="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked= "checked"/>男
<img src="Male.gif" width="22" heigh="21" dlign="absmidde" />
<input type="radio" name="radio" id="radio2" value="radi2" />女
<img src="Female.gif" width="23" heighr="21" align="abiniddle" /></td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td><input name="textfield4" ype="text" id="toxtfield4" sive="12" />年
<select name="select" id=" select">
<option>l</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>S</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月</td>
</td>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name= "checkbox" id="checkbox1">看书
<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=" ilefField" /></td>
</td>
<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>
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
