zoukankan html css js c++ java

HTML day03表格与表单

1.表格

　　一般格式：

　　<table>

　　　　　　<tr>

</tr>

　　　　 </thead>

　　　　　　　<tr>

　　　　　　　</tr>

　　　　</tbody>

　　　　　　<tr>

　　　　　　</tr>

　　　　</tfoot>

　　</table>

2。table标签属性

　　border　设置表格边框

　　width　表格宽度

　　height　表格高度

　　cellspacing　表格各单元格之间距离

　　cellpadding　单元格内部与文本之间的间距

　　align　表格在网页中的对齐方式

　　caption　表格标题

　　bordercolor　表格边框颜色

　　bordercolorlight　表格亮面颜色

3.tr属性

　　bgcolor 设置行背景颜色

　　align　设置行对齐方式

　　valign　设置一行中单元格垂直对齐方式

4.<td>属性

　　bgcolor 设置行单元格背景颜色

　　align　设置单元格对齐方式

　　valign　设置单元格垂直对齐方式

　　rowspan　设置单元格所占的行数

　　colspan　设置单元格所占的列数

　　width　设置单元格宽度

　　height　设置单元格高度

5.例子1

<html>
    <head>
        <title>今日小说排行</title>
    </head>
    <body>
        <caption><center><strong>今日小说排行</strong></center></caption><br/>
        <table border="1px" width="600" height="250" cellspacing="0" cellpadding="0" align="center" bordercolor="#dddddd" style="BORDER-COLLAPSE: collapse">
            <thead>
                <tr bgcolor="#eeeeee">
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>今日搜索</th>
                    <th>最近七日</th>
                    <th>相关链接</th>    
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>1</td>
                    <td>武动乾坤</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>623557</td>
                    <td>4083889</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>2</td>
                    <td>遮天</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>324342</td>
                    <td>3265656</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>3</td>
                    <td>凡人修仙传</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>253434</td>
                    <td>1233656</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>4</td>
                    <td>神印王座</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>12345</td>
                    <td>5545665</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>5</td>
                    <td>傲世九重天</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>125464</td>
                    <td>445545</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>6</td>
                    <td>杀神</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>545423</td>
                    <td>321212</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>7</td>
                    <td>校花的贴身高手</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>1245</td>
                    <td>545654</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>8</td>
                    <td>圣王</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>12124</td>
                    <td>312312</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>9</td>
                    <td>斗破苍穹</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>12212</td>
                    <td>24545</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>10</td>
                    <td>吞噬星空</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>21555</td>
                    <td>544544</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#v">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>11</td>
                    <td>四大名捕</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>1215</td>
                    <td>564456</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>12</td>
                    <td>剑道独尊</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>1222</td>
                    <td>5465654</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>13</td>
                    <td>医道官途</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>21212</td>
                    <td>4242</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>14</td>
                    <td>网游之天下无双</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>14524</td>
                    <td>122444</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>15</td>
                    <td>浮沉</td>
                    <td><img src="shangsheng.PNG"/></td>
                    <td>12424</td>
                    <td>124244</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                
                <tr align="center">
                    <td>16</td>
                    <td>天才医生</td>
                    <td><img src="xiajiang.PNG"/></td>
                    <td>45454</td>
                    <td>211212</td>
                    <td><a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </body>
</html>

6.例子2

<html>
    <head>
        <title>腾讯新闻</title>
    </head>
    <body>
        <table border="1px" width="1000" height="260" cellspacing="0" cellpadding="0" align="center" bordercolor="#dddddd" style="BORDER-COLLAPSE: collapse">
            <caption><p><strong>腾讯新闻图片</strong></p></caption>
            <tbody align="center">
                <tr>
                    <td><p><img src="si.PNG" valign="top"/></p> <a href="#">四川凉山深处小学生走铁索桥</a></td>
                    <td><p><img src="hu.PNG"/></p> <a href="#">湖南奶爸为防“毒奶粉”</a></td>
                    <td><p><img src="nan.PNG"/></p> <a href="#">男子因救的哥身中11刀</a></td>
                    <td><p><img src="nu.PNG"/></p> <a href="#">女子混入印度奥运代表团</a></td>
                    <td><p><img src="tu.PNG"></p> <a href="#">图片故事：最美军嫂</a></td>
                </tr>
                
                <tr>
                    <td><p><img src="qi.PNG"/></p> <a href="#">湖南“七仙女”环保行</a></td>
                    <td><p><img src="zu.PNG"/></p> <a href="#">组图：罗马尼亚举行弹劾</a></td>
                    <td><p><img src="shen.PNG"/></p> <a href="#">深圳一男子爬地铁欲自杀</a></td>
                    <td><p><img src="ji.PNG"/></p> <a href="#">吉林松花湖形象大使出炉</a></td>
                    <td><p><img src="wei.PNG"/></p> <a href="#">组图：为矿工写“生死簿”</a></td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </body>
</html>

7.表单<form>标签

8.<form>标签的属性

　　Name：设置表单的名称

　　Method：提交表单的方法　get,post

　　Action=“…”设定此表单的处理程序

　　例如：action=“*.asp”

9.表单标记

　　form中常用的标记

　　（1）.输入域<input>标记 <input type=#>　 #=如下类型

　　　　1）text 　2）password

　　　　3）radio　4）checkbox

　　　　5）submit　6）reset

　　　　7）hidden　8）file

　　　　9）image　10）button

　　（2）.选择域<select>标记

　　　　格式： <select name=“”>

　　　　　　　　　　 <option>选项二</option> …

　　　　　　　　</select> 功能：定义选择栏

10.例子3

 1 <html>
 2     <head>
 3         <title>百度账号注册</title>
 4     </head>
 5     <body>
 6         <form align="left">
 7         <table border="0px" width="600" height="400" cellspacing="0" cellpadding="0" align="center">
 8         <tr valign="top">
 9             <td width="250" height="100" align="right"><center><img src="./images/logo_baidu.jpg"/></center></td>
10             <td>&nbsp </td>
11         </tr>
12         
13         <tr valign="center">
14             <td align="center"><strong>填写注册信息</strong></td>
15             <td>&nbsp </td>
16         </tr>
17         
18         <tr valign="center">
19             <td align="right">邮箱:</td>
20             <td>    
21                 <input  method="post" type="test" name="youxiang" value=""/>
22             </td>
23         </tr>
24         
25         <tr valign="center">
26             <td align="right">密码:</td>
27             <td valign="center">
28                 <input type="password" name="password" value=""/>
29             </td>
30         </tr>
31         
32         <tr valign="center">
33             <td align="right">确认密码:</td>
34             <td>
35                 <input type="password" name="password" value=""/>
36             </td>
37         </tr>
38         
39         <tr valign="center">
40             <td align="right">验证码:</td>
41             <td>
42                 <table border="0px" cellpadding="0px" cellspacing="0px" width="100%" height="100%" align="left">
43                     <tr valign="center">
44                         <td><input type="password" name="password" value="" size="14px"/></td>
45                         <td><img src="./images/yz.jpg"/></td>
46                         <td><a href="#">看不清？</a></td>
47                     </tr>
48                 </table>
49             </td>
50         </tr>
51         
52         <tr valign="center">
53             <td >&nbsp </td>
54             <td >
55                 <input type="checkbox" checked="checked"name="checkbox"  value="1"/>我已阅读并接受<a href="#">《百度用户协议》</a><br/>
56             </td>
57         </tr>
58         
59         <tr valign="center">
60             <td>&nbsp</td>
61             <td>
62                 <img src="./images/button.jpg"/>
63             </td>
64         </tr>    
65         </table>
66         </form>
67     </body>
68 </html>

11.例子4

 1 <html>
 2     <head>
 3         <title>在线报名</title>
 4     </head>
 5     <body  bgcolor="#eeeeee">
 6         <form align="left">
 7         <table border="0px" width="700" height="350" cellspacing="0" cellpadding="0" align="center">
 8             <tr valign="center">
 9                 <td colspan="2" align="left"><strong>在线报名（请您认真填写报名信息）</strong></td>
10                 
11             </tr>
12             
13             <tr valign="center">
14                 <td align="right">姓名:</td>
15                 <td align="left"><input  method="post" type="test" name="name" value="" size="30"/>&nbsp请填写简体中文，不能有空格</td>
16             </tr>
17             
18             <tr valign="center">
19                 <td align="right">性别:</td>
20                 <td align="left">
21                     <select name="xingbie">
22                             <option>男</option>
23                             <option>女</option>
24                             <option>保密</option>
25                     </select>
26                 </td>
27             </tr>
28             
29             <tr valign="center">
30                 <td align="right">联系电话:</td>
31                 <td align="left"><input type="test" name="test" value=""/></td>
32             </tr>
33             
34             <tr valign="center">
35                 <td align="right">现居地:</td>
36                 <td align="left"><input type="test" name="xjd" value="" size="50"/></td>
37             </tr>
38             
39             <tr valign="center">
40                 <td align="right">QQ号码:</td>
41                 <td align="left"><input type="test" name="qq" value=""/>&nbsp请填写常用的QQ号码</td>
42             </tr>
43             
44             <tr valign="center">
45                 <td align="right">E-mail:</td>
46                 <td align="left"><input type="test" name="E-mail" value=""/>&nbsp请填写常用的邮箱</td>
47             </tr>
48             
49             
50             <tr valign="center">
51                 <td align="right">个人备注:</td>
52                 <td align="left">
53                     <textarea name="yj" cols="30" rows="5">
54                     </textarea>
55                     
56                 </td>
57             </tr>
58             
59             <tr valign="center">
60                 <td align="right">验证码:</td>
61                     <td>
62                     <table border="0px" cellpadding="0px" cellspacing="0px" width="60%" height="100%" align="left">
63                         <tr align="left">
64                             <td><input type="password" name="password" value=""/></td>
65                             <td><img src="./images/yz.jpg"/></td>
66                             <td><a href="#">看不清？</a></td>
67                         </tr>
68                     </table>
69                 
70                 </td>
71             </tr>
72             
73             <tr valign="center">
74                 <td align="right">&nbsp </td>
75                 <td align="left"><input type="button" name="submit" value="提交信息"/></td>
76             </tr>
77         
78         
79         </table>
80         </form>
81     </body>
82 </html>

查看全文

相关阅读:
开博的第一天！
使用EditText的addTextChangedListener(new TextWatcher()）方法
 Activity的四种launchMode
MySQL数据库
 BaseAdapter中重写getview的心得以及发现convertView回收的机制
 与数据库打交道的Adapter----SimpleCursorAdapter
[原创] Fragment的添加、移除问题
 Datum Form Goole Android
app包中的fragment和v4包中的fragment的使用的区别
 LayoutInflater类详解

原文地址：https://www.cnblogs.com/kylyww/p/5229179.html