HTML day03表格与表单

2022-12-29 08:33:46

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

 <html>

     <head>

         <title>百度账号注册</title>

     </head>

     <body>

         <form align="left">

         <table border="0px" width="600" height="400" cellspacing="0" cellpadding="0" align="center">

         <tr valign="top">

             <td width="250" height="100" align="right"><center><img src="./images/logo_baidu.jpg"/></center></td>

             <td>&nbsp </td>

         </tr>

         <tr valign="center">

             <td align="center"><strong>填写注册信息</strong></td>

             <td>&nbsp </td>

         </tr>

         <tr valign="center">

             <td align="right">邮箱:</td>

             <td>

                 <input  method="post" type="test" name="youxiang" value=""/>

             </td>

         </tr>

         <tr valign="center">

             <td align="right">密码:</td>

             <td valign="center">

                 <input type="password" name="password" value=""/>

             </td>

         </tr>

         <tr valign="center">

             <td align="right">确认密码:</td>

             <td>

                 <input type="password" name="password" value=""/>

             </td>

         </tr>

         <tr valign="center">

             <td align="right">验证码:</td>

             <td>

                 <table border="0px" cellpadding="0px" cellspacing="0px" width="100%" height="100%" align="left">

                     <tr valign="center">

                         <td><input type="password" name="password" value="" size="14px"/></td>

                         <td><img src="./images/yz.jpg"/></td>

                         <td><a href="#">看不清？</a></td>

                     </tr>

                 </table>

             </td>

         </tr>

         <tr valign="center">

             <td >&nbsp </td>

             <td >

                 <input type="checkbox" checked="checked"name="checkbox"  value="1"/>我已阅读并接受<a href="#">《百度用户协议》</a><br/>

             </td>

         </tr>

         <tr valign="center">

             <td>&nbsp</td>

             <td>

                 <img src="./images/button.jpg"/>

             </td>

         </tr>

         </table>

         </form>

     </body>

 </html>

11.例子4

 <html>

     <head>

         <title>在线报名</title>

     </head>

     <body  bgcolor="#eeeeee">

         <form align="left">

         <table border="0px" width="700" height="350" cellspacing="0" cellpadding="0" align="center">

             <tr valign="center">

                 <td colspan="2" align="left"><strong>在线报名（请您认真填写报名信息）</strong></td>

             </tr>

             <tr valign="center">

                 <td align="right">姓名:</td>

                 <td align="left"><input  method="post" type="test" name="name" value="" size="30"/>&nbsp请填写简体中文，不能有空格</td>

             </tr>

             <tr valign="center">

                 <td align="right">性别:</td>

                 <td align="left">

                     <select name="xingbie">

                             <option>男</option>

                             <option>女</option>

                             <option>保密</option>

                     </select>

                 </td>

             </tr>

             <tr valign="center">

                 <td align="right">联系电话:</td>

                 <td align="left"><input type="test" name="test" value=""/></td>

             </tr>

             <tr valign="center">

                 <td align="right">现居地:</td>

                 <td align="left"><input type="test" name="xjd" value="" size="50"/></td>

             </tr>

             <tr valign="center">

                 <td align="right">QQ号码:</td>

                 <td align="left"><input type="test" name="qq" value=""/>&nbsp请填写常用的QQ号码</td>

             </tr>

             <tr valign="center">

                 <td align="right">E-mail:</td>

                 <td align="left"><input type="test" name="E-mail" value=""/>&nbsp请填写常用的邮箱</td>

             </tr>

             <tr valign="center">

                 <td align="right">个人备注:</td>

                 <td align="left">

                     <textarea name="yj" cols="30" rows="5">

                     </textarea>

                 </td>

             </tr>

             <tr valign="center">

                 <td align="right">验证码:</td>

                     <td>

                     <table border="0px" cellpadding="0px" cellspacing="0px" width="60%" height="100%" align="left">

                         <tr align="left">

                             <td><input type="password" name="password" value=""/></td>

                             <td><img src="./images/yz.jpg"/></td>

                             <td><a href="#">看不清？</a></td>

                         </tr>

                     </table>

                 </td>

             </tr>

             <tr valign="center">

                 <td align="right">&nbsp </td>

                 <td align="left"><input type="button" name="submit" value="提交信息"/></td>

             </tr>

         </table>

         </form>

     </body>

 </html>

码农公寓

相关文章