HTML day03表格与表单
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
<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>  </td>
</tr> <tr valign="center">
<td align="center"><strong>填写注册信息</strong></td>
<td>  </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 >  </td>
<td >
<input type="checkbox" checked="checked"name="checkbox" value="1"/>我已阅读并接受<a href="#">《百度用户协议》</a><br/>
</td>
</tr> <tr valign="center">
<td> </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"/> 请填写简体中文，不能有空格</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=""/> 请填写常用的QQ号码</td>
</tr> <tr valign="center">
<td align="right">E-mail:</td>
<td align="left"><input type="test" name="E-mail" value=""/> 请填写常用的邮箱</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">  </td>
<td align="left"><input type="button" name="submit" value="提交信息"/></td>
</tr> </table>
</form>
</body>
</html>
HTML day03表格与表单的更多相关文章
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- 第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 13、Semantic-UI之表格与表单
13.1 定义基础样式表格 在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...
- 框架，表格，表单元素，css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- POJ 1230 Pass-Muraille#贪心+vector迭代器用法
(-￣▽￣)-* (注意下面代码中关于iterator的用法,此代码借鉴某大牛) #include<iostream> #include<cstdio> #include< ...
- 浙大pat 1011题解
With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...
- Struts国际化
第一步需要建立配置文件 格式为 文件名_zh_CN.properties 为中文配置文件 文件名_en_US.properties为美式英语配置文件 配置文件里面的值以键值对的形式 ...
- shell脚本学习（五）
1.统计文件的行数.单词数.字符数 1)行数: wc -l file cat file | wc -l 2)单词数 wc -w file cat file | wc -w 3)统计字符数 wc -c ...
- php笔记(一)面向对象编程
<?php //定义一个类 class Car { var $name = '汽车'; function getName() { return $this->name; } } //实例化 ...
- PDO对象
<?php //造DSN:驱动名:dbname=数据库名;host=服务器地址 $dsn = "mysql:dbname=mydb;host=localhost"; //造P ...
- webstrom官方的活动模版介绍
编辑模板变量对话框 文件|设置|生活模板--编辑变量Windows和LinuxWebStorm |偏好|生活模板--编辑变量在OS XCtrl + Alt + S 当你点击对话框打开 编辑变量按钮模板 ...
- javaweb学习总结——Filter高级开发
在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...
- c语言_头文件
传统 C++ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include <assert.h> //设定插入点 #include <ctyp ...
- linux中tar 打包指定路径文件
linux中tar打包指定路径文件www.111cn.net 编辑:yahoo 来源:转载在linux系统中打包与解压文件我都可以使用tar命令来解决,只要使用不同的参数就可以实现不同的需要了,下面来 ...