您的位置：360文档中心› 《表格和表单》PPT课件

《表格和表单》PPT课件

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Robert M 80
<TH align="right">分数</TH> </TR>
Mary
F 18
<TR bgcolor="#FFFF00">
<<TTDD>Raolbiegrnt=<"/cTeDn表>te格r"的>M<尺/T寸D>：<TABLE width=n1 height=n2>
<TD align="right<"T>A8B0<L/ETDw>idth="200" height="100">
<TD>4000</TD>
<TR>
.....
10
代码阅读
<TABLE width="200" border="1" align="center" > <CAPTION align="bottom">我的表格</CAPTION>
<TR bgcolor="yellow"> <TH>1</TH> <TH>2</TH>
• </tr>
• </tr>
• </table> 20
表格的frame属性
• IEOnly • frame属性来控制表格周围的边框 • Frame例子
21
•表单是一个能够包含表单元素的区域。
•表单元素是能够让用户在表单中输入信 息的元素（比如文本框，密码框，下拉菜 单，单选框，复选框等等）。
•表单是用<form></form>元素内定义的。
</TR> <TR align="center">
<TD rowspan="2">3</TD> <TD align="right">4</TD> </TR> <TR> <TD align="right">5</TD> </TR> </TABLE>
11
课堂练习:请编写HTML代码
12
表格的背景色和尺寸设置
• 例子：
• <table cellspacing=5 border=5
•
bordercolorlight=White bordercolordark=Maroon>
• <tr><th>Food</th><th>Drink</th><th>Sweet</th>
• <tr><td>A</td><td>B</td><td>C</td>
• </tr>
• </table>
• </body>
• </html>
18
Cellspacing属性
• cellspacing属性来增加单元格间距
Leabharlann Baidu
• <html>
• <body>
• <h4>With cellspacing:</h4>
• <table border="1" cellspacing="10">
•
<td bgcolor="#FFFFFF" >第一行第三列</td>
• </tr>
• <tr>
•
<td bgcolor="#FFFFFF">第二行第一列</td>
•
<td bgcolor="#FFFFFF">第二行第二列</td>
•
<td bgcolor="#FFFFFF">第二行第三列</td>
15
表格中的空单元格
• 为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常 显示。
• <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table>
表单
22
表单<FORM>
<FORM action=“http://www.sohu.com” method=“post”>
ACTION
METHOD
指定提交后由服务器上哪个 处理程序处理
指定向服务器提交的方法: 一般为post或get方法, post方法比较安全
ACTION = “URL”
METHOD =“post或get”
23
表单输入元素-1
文本框、按钮、单选按钮、复选框等都是输入元素。 <INPUT type=“?” name=“?” size=”?” value=“?” maxlength=“?” checked>
• <tr>
•
<td>First</td>
•
<td>Row</td>
• </tr>
• <tr>
•
<td>Second</td>
•
<td>Row</td>
• </tr>
• </table>
• </body>
• </html>
19
应用Cellpadding和
Cellspacing
• 下面是一个结合cellpadding、cellspacing和bgcolor的例子
• 例子：
• <table border width=160>
• <tr>
•
<th>Food</th><th>Drink</th><th>Sweet</th>
• <tr>
•
<td align=“left”>A</td>
•
<td align=“center”>B</td>
•
<td align=“right”>C</td>
• </table>
14
表格中的空单元格
• <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
16
表格的边框
• <html>
• <body>
• <h4>This table has no borders:</h4>
• <table><tr>
•
<td>100</td>
•
<td>200</td>
•
<td>300</td>
• </tr></table>
• <h4>And this table has no borders:</h4>
合并单元格(跨 列)
COLSPAN=“n” 属性表示跨多少列
9
<BODY>
合并单元格(跨行)
<TABLE BORDER = 1, align = center>
<CAPTION><b>创建表格<b></CAPTION>
<TR>
<TH></TH>
<TH></TH>
<TH>螺母</TH>
<TH>螺栓</TH>
<TH>性别</TH> <TH>分数</TH>
<TH>表示行或列标题，粗体显示
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD>
<TD>80</TD>
表格的第二行，有三列数据
</TR>
....... </TABLE>
表格的第三行，有三列数据
</BODY>
</HTML>
5
表格在页面中的对齐/布局
<TH>锤子</TH>
<TR>
<TD ROWSPAN = 3>第一季度</TD>
<TD>一月</TD>
<TD>2500</TD> <TD>1000</TD>
ROWSPAN=“n” 属性表示跨多少行
<TD>1240</TD>
<TR>
<TD>二月</TD>
<TD>3000</TD>
<TD>2500</TD>
<TABLE>代表表格的开始，border=2表示边
<TR>
框尺寸为2
<TD>姓名</TD>
<TD>性别</TD>
<TR>表示行，这是表格的第一行，有三列
<TD>分数</TD>
数据，<TD>代表列
</TR>
<TR>
<TD>Robert</TD>
<TD>M</TD> <TD>80</TD>
表格的第二行，有三列数据
</TR>
.......
表格的第三行，也有三列数据
</TABLE>
</BODY>
</HTML>
4
表格的标题
<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息</CAPTION>
<TR> <TH>姓名</TH>
<CAPTION>表示表格标题 IEOnly
• <body>
• <h4>With cellpadding:</h4>
• <table border="1" cellpadding="10">
• <tr>
•
<td>First</td>
•
<td>Row</td>
• </tr>
• <tr>
• <td>Second</td>
• <td>Row</td>
<TD align="right行">的18<背/T景D>色 <TR bgcolor=颜色值>
</TR> </TABLE>
列的背景色 <TD bgcolor=颜色值>
13
表格边框色彩的亮度控制
• IEOnly • <table bordercolorlight=#> • <table bordercolordark=#>
<BODY>
<TABLE border=0 align=center width=50%> <CAPTION align=top>学员档案信息</CAPTION>
学员档案信息
<TR bgcolor="#00FFFF"> <TH align="left">姓名</TH>
姓名 性别 分数
<TH align="center">性别</TH>
• </table>
7
表格内文字的对齐/布局
• <tr valign=#> • <th valign=#> #=top, middle, bottom, baseline • <td valign=#>
• <table border height=100>
• <tr>
•
<th>Food</th><th>Drink</th>
• <table border=“1"><tr>
•
<td>100</td>
•
<td>200</td>
•
<td>300</td>
• </tr></table>
• </body>
• </html>
17
Cellpadding属性
• cellpadding属性在表格内容和边框之间留出更多空白
• <html>
<BODY>
整个表格居中
<TABLE border=2 align=center>
<CAPTION align=top>学员档案信息</CAPTION>
<TR> 姓名列默认左对齐
<TH>姓名</TH>
性别列居中
<TH align="center">性别</TH>
<TH align="right">分数</TH>
</TR>
<TR>
<TD>Robert</TD>
<TD align="center">M</TD>
<TD align="right">80</TD>分数列右对齐
</TR>
.......
</TABLE>
</BODY>
</HTML>
6
表格内文字的对齐/布局
• <tr align=#> • <th align=#> #=left, center, right • <td align=#>
表格和表单
1
目标
• 用 HTML 代码创建表格 • 创建表单 • 使用框架
2
表格
列
表格标题
列标题
单元格 行
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
3
创建表格
<HTML>
<HEAD>
<TITLE>使用表格</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 >
</TR>
表示一个长为200像素，宽为100像素的表格。
<TR bgcolor="#FFFF<0T0A"B>LE width=20% height=10%>
<TD>Mary</TD> 表示一个宽为窗口的20%，高为窗口的10%的表格。
<TD align="cen表te格r"的>F<背/T景D>色 <TABLE bgcolor=颜色值>
<TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD> ....
•
<th>Sweet</th><th>Other</th>
• <tr>
•
<td valign=top>A</td>
•
<td valign=middle>B</td>
•
<td valign=bottom>C</td>
•
<td valign=baseline>D</td>
• </table>
8
<BODY> <TABLE BORDER = 2 ALIGN = CENTER> <CAPTION>创建表格 </CAPTION> <TH COLSPAN = 3>第一学期</TH> <TH COLSPAN = 3>第二学期</TH> <TR>
• <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#0000FF">
• <tr>
•
<td bgcolor="#FFFFFF" >第一行第一列</td>
•
<td bgcolor="#FFFFFF" >第一行第二列</td>
相关文档
最新文档