《表格和表单》PPT课件
</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
表格的背景色和尺寸设置
</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=#>
<BODY>
<TABLE border=0 align=center width=50%> <CAPTION align=top>学员档案信息</CAPTION>
学员档案信息
<TR bgcolor="#00FFFF"> <TH align="left">姓名</TH>
姓名 性别 分数
<TH align="center">性别</TH>
• <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#0000FF">
• <tr>
•
<td bgcolor="#FFFFFF" >第一行第一列</td>
•
<td bgcolor="#FFFFFF" >第一行第二列</td>
<TD align="right行">的18<背/T景D>色 <TR bgcolor=颜色值>
</TR> </TABLE>
列的背景色 <TD bgcolor=颜色值>
13
表格边框色彩的亮度控制
• IEOnly • <table bordercolorlight=#> • <table bordercolordark=#>
表单
22
表单<FORM>
<FORM action=“” method=“post”>
ACTION
METHOD
指定提交后由服务器上哪个 处理程序处理
指定向服务器提交的方法: 一般为post或get方法, post方法比较安全
ACTION = “URL”
METHOD =“post或get”
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>
• <table border=“1"><tr>
•
<td>100</td>
•
<td>200</td>
•
<td>300</td>
• </tr></table>
• </body>
• </html>
17
Cellpadding属性
• cellpadding属性在表格内容和边框之间留出更多空白
• <html>
• </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>
23
表单输入元素-1
文本框、按钮、单选按钮、复选框等都是输入元素。 <INPUT type=“?” name=“?” size=”?” value=“?” maxlength=“?” checked>
• 例子:
• <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>
<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> ....
• 例子:
• <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>
4
表格的标题
<BODY>
<TABLE BORDER = 2>
<CAPTION align=top>学员档案信息</CAPTION>
<TR> <TH>姓名</TH>
<CAPTION>表示表格标题 IEOnly
<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>
• </tr>
• </tr>
• </table> 20
表格的frame属性
• IEOnly • frame属性来控制表格周围的边框 • Frame例子
21
•表单是一个能够包含表单元素的区域。
•表单元素是能够让用户在表单中输入信 息的元素(比如文本框,密码框,下拉菜 单,单选框,复选框等等)。
•表单是用<form></form>元素内定义的。
</TR>
表示一个长为200像素,宽为100像素的表格。
<TR bgcolor="#FFFF<0T0A"B>LE width=20% height=10%>