1.表格
一般格式：
<table>
<thead><!--表格头-->
<tr>
<th></th>
</tr><!--表格中的一行数据-->
</thead>
<tbody><!--表格体-->
<tr>
<td></td>
</tr>
</tbody>
<tfoot><!--表格脚-->
<tr>
<td></td>
</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
<input type=“” name=“” value=“”>
（2）.选择域<select>标记
格式： <select name=“”>
<option>选项一</option>
<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>  </td> 11 </tr> 12 13 <tr valign="center"> 14 <td align="center"><strong>填写注册信息</strong></td> 15 <td>  </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 >  </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> </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"/> 请填写简体中文，不能有空格</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=""/> 请填写常用的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=""/> 请填写常用的邮箱</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">  </td> 75 <td align="left"><input type="button" name="submit" value="提交信息"/></td> 76 </tr> 77 78 79 </table> 80 </form> 81 </body> 82 </html>