HTML教程之表格与表单 by PHPChina

AirJD

没有录音文件

00:00/00:00

加收藏

HTML教程之表格与表单 by PHPChina

发布者 weber

发布于 1441154911004 浏览 5568 关键词 HTML5, 前端

分享到

第1页

表格与表单

http://www.phpchina.com

PHPChina 工作室

第2页

知识回顾

HTML文档结构
常用的HTML标签
链接
图片
换行
分段
字体
……

第3页

内容摘要

在 HTML 文档中进行排版布局
列表
表格
框架
使用表单及其中的对象

第4页

列表简介

列表用于按逻辑方式对数据分组

玫瑰花

向日葵

兰花

苹果

桔子

水仙

芒果

水果
苹果
芒果
桔子
花卉
水仙
兰花
向日葵
玫瑰花

第5页

列表类型：无序列表

…
<BODY>
<H1>星期中的每一天</H1>
<UL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</UL>
</BODY>
…

无序列表也称为“项目列表”

第6页

…
<BODY>
<H1>星期中的每一天</H1>
<OL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>
…

列表类型：有序列表

在有序列表中，列表项以自动生成的顺序显示

第7页

表格

行

列

第8页

创建表格

第一步

第三步

第二步

此时，在“文档”窗口中将插入一个空白表格

演示：创建表格的步骤

第9页

格式化表格

演示：格式化表格的步骤

第10页

表格

行

列

列标题

在 HTML 文档中，广泛使用表格来存放网页上的文本和图像

单元格

第11页

<HTML>
<HEAD>
<TITLE>使用表格</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 >
<TR>
   <TD>姓名</TD>
   <TD>性别</TD>
   <TD>分数</TD>
</TR>
<TR>
  <TD>Robert</TD>
  <TD>M</TD>
  <TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>

创建表格

<TABLE>代表表格的开始，border=2表示边框尺寸为2

<TR>表示行，这是表格的第一行，有三列数据，<TD>代表列

表格的第二行，有三列数据

表格的第三行，也有三列数据

第12页

<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息</CAPTION>
<TR>
   <TH>姓名</TH>
   <TH>性别</TH>
   <TH>分数</TH>
</TR>
<TR>
  <TD>Robert</TD>
  <TD>M</TD>
  <TD>80</TD>
</TR>
.......
</TABLE>
</BODY>
</HTML>

表格的标题

<CAPTION>表示表格标题

<TH>表示行或列标题，粗体显示

表格的第二行，有三列数据

表格的第三行，有三列数据

第13页

<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>

表格的对齐方式

整个表格居中

姓名列默认左对齐

性别列居中

分数列右对齐

第14页

合并单元格(跨列)

<BODY>
<TABLE BORDER = 2 ALIGN = CENTER>
<CAPTION>创建表格 </CAPTION>
<TH COLSPAN = 3>第一学期</TH>
<TH COLSPAN = 3>第二学期</TH>
<TR>
<TD>数学</TD>
<TD>科学</TD>
<TD>英语</TD>
<TD>数学</TD>
<TD>科学</TD>
<TD>英语</TD>
<TR>
<TD>98</TD>
<TD>88</TD>
....

COLSPAN=“n” 属性表示跨多少列

第15页

合并单元格(跨行)

<BODY>
<TABLE BORDER = 1, align = center>
<CAPTION><b>创建表格<b></CAPTION>
<TR>
<TH></TH>
<TH></TH>
<TH>螺母</TH>
<TH>螺栓</TH>
<TH>锤子</TH>
<TR>
<TD ROWSPAN = 3>第一季度</TD>
<TD>一月</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>二月</TD>
.....

ROWSPAN=“n” 属性表示跨多少行

第16页

<BODY>
<TABLE border=0 align=center width=50%>
  <CAPTION align=top>学员档案信息</CAPTION>
  <TR bgcolor="#00FFFF">
    <TH align="left">姓名</TH>
    <TH align="center">性别</TH>
    <TH align="right">分数</TH>
  </TR>
  <TR bgcolor="#FFFF00">
    <TD>Robert</TD>
    <TD align="center">M</TD>
    <TD align="right">80</TD>
  </TR>
  <TR bgcolor="#FFFF00">
    <TD>Mary</TD>
    <TD align="center">F</TD>
    <TD align="right">18</TD>
  </TR>
</TABLE>

表格的背景色和尺寸设置

表格的颜色设置：
表格的背景色 <TABLE bgcolor=颜色值>
行的背景色<TR bgcolor=颜色值>
列的背景色 <TD bgcolor=颜色值>
颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,
或是一些预定义色彩名称：red ，blue，yellow等。

表格的尺寸设置：
<TABLE width=n1 height=n2>
例如：
<TABLE width="200" height="100">
表示一个长为200像素，宽为100像素的表格。
<TABLE width=20% height=10%>
表示一个宽为窗口的20%，高为窗口的10%的表格。

第17页

课堂练习:请编写HTML代码

第18页

框架

广告栏顶部框架(top.htm)

商品详细介绍右侧框架(main.htm)

商品导航
左侧
框架(left.htm)

第19页

为何使用框架

在另一个固定部分
显示导航部分

在页面的一个固定部分显示徽标或静态信息

在此处显示主要内容。

站点中只有此部分是变化的。

第20页

使用iframe框架

使用iframe进行页面内的页面嵌套
可以定义嵌套页面的大小、位置等

用法：
<iframe name=“ifra1” scr=“abc.htm” border=“1”/>

可以通过name属性将链接的显示目标定位到
iframe框架内。

第21页

表单

第22页

METHOD =“post或get”

表单<FORM>

ACTION

METHOD

指定提交后由服务器上哪个处理程序处理

指定向服务器提交的方法:
一般为post或get方法,
post方法比较安全

ACTION = “URL”

第23页

表单输入元素-1

文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”
value=“?” maxlength=“?” checked=“?”>

第24页

表单输入元素-2

BUTTON（按钮）

第25页

表单输入元素-3

身份证号<input type="Text" name="PID" value=""
size="20" maxlength="18">

TEXT（文本）

密码： <INPUT type=password value=“” name=“pass" size=15>

<TEXTAREA name=“textarea” clos="20" rows="5" >请填写您的工作经历</TEXTAREA>

第26页

表单输入元素-4

性别：<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性
<INPUT TYPE=radio NAME=”sex” VALUE=”male”>女性

单选按钮和复选框

你喜欢以下哪些明星：
<br>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="id2" value="Leon">郑秀文
<input type="Checkbox" name="id3" value="BonJovi"
checked>BonJovi

第27页

HTML输入元素-5

<BODY bgColor="#ccccff" Text="#000099">
<FORM ACTION="http://www.com.cn" METHOD="POST">
<B><H2 align="left">2004 年欧锦赛</H2></B>
<P><B>预测“最佳球员”</B></P><P>
<INPUTTYPE="RADIO"NAME="myradio“ VALUE="0">Ronaldo
<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham
<INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane
</P><P><B>预测大赛亚军</B></P><P>
<INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西
<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法国
<INPUT NAME="mybox3" TYPE="CHECKBOX" VALUE="2">阿根廷
<BR></P><P><B>预测谁将成为 2004 年欧锦赛冠军？</B></P><P>
<INPUTNAME="text1“ TYPE="TEXT" SIZE="30" MAXLENGTH="30"></P><P>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交">
<INPUT TYPE="RESET" NAME="Reset" VALUE="重置"></P>
</FORM>
</BODY>

阅读代码，请问网页中的显示结果？

第28页

表单输入元素-6

下拉菜单

<B>谁是 2002 年世界杯冠军？</B>
<SELECT NAME =“myselect">
<OPTION SELECTED>西班牙</OPTION>
<OPTION>法国</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德国</OPTION>
</SELECT>

列表选项

第29页

表单输入元素-7

课堂练习:请编写HTML代码

第30页

课堂重点

使用表格进行页面排版布局
表格相关的标签和属性
表单中的各种元素

第31页

谢谢

http://www.phpchina.com