HTML中得表格和表单

HTML中得表格和表单

表格

表格属性

表格属性
属性名含义常用属性值
border设置表格的边框(默认border="0"是无边框)像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2)
cellspadding设置单元格内容与单元格边框之间的空白间距像素值(默认为1)
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式left,center,right
12像素值

<table border="1">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>属性名</th>
                <th>含义</th>
                <th>常用属性值</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <th>border</th>
            <th>设置表格的边框(默认border="0"是无边框)</th>
            <th>像素值</th>
        </tr>
        <tr>
            <th>cellspacing</th>
            <th>设置单元格与单元格边框之间的空白间距</th>
            <th>像素值(默认为2)</th>
        </tr>
        <tr>
            <th>cellspadding</th>
            <th>设置单元格内容与单元格边框之间的空白间距</th>
            <th>像素值(默认为1)</th>
        </tr>
   <tr>
            <th>width</th>
            <th>设置表格的宽度</th>
            <th>像素值</th>
        </tr>
  <tr>
            <th>height</th>
            <th>设置表格的高度</th>
            <th>像素值</th>
        </tr>
  <tr>
            <th>align</th>
            <th>设置表格在网页中的水平对齐方式</th>
            <th>left,center,right</th>
        </tr>
      </tbody>
        <tfoot>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>像素值</th>
        </tr>
        </tfoot>
    </table>
<hr/>

表头标签

表头一般位于表格的第一行或第一列,

表格结构

见表格属性代码

表格标题

caption标签必须紧随table标签之后

<table>
	<caption>标题</caption>
</table>

合并单元格

跨行合并:rowspan 跨列合并:colspan

表格总结

  1. 表格提供了HTML中定义表格数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素,列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观,那是css的作用。

表单

表单标签(掌握)

目的是为了收集用户信息。

input控件

标题
属性属性值描述
typetext单行文本输入框
password密码
redio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
name用户自定义控件名称
value用户自定义input控件默认文本值
size正整数input控件在页面显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数
<table border="1">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>属性</th>
                <th>属性值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <th rowspan="9">type</th>
            <th>text</th>
            <th>单行文本输入框</th>
        </tr>
        <tr>
            <th>password</th>
            <th>密码</th>
        </tr>
        <tr>
            <th>redio</th>
            <th>单选按钮</th>
        </tr>
   <tr>
            <th>checkbox</th>
            <th>复选框</th>
    </tr>
   <tr>
            <th>button</th>
            <th>普通按钮</th>
     </tr>
  <tr>
            <th>submit</th>
            <th>提交按钮</th>
     </tr>
       <tr>
            <th>reset</th>
            <th>重置按钮</th>
     </tr>
       <tr>
            <th>image</th>
            <th>图像形式的提交按钮</th>
     </tr>
       <tr>
            <th>file</th>
            <th>文件域</th>
     </tr>
         <tr>
         <th>name</th>
            <th>用户自定义</th>
            <th>控件名称</th>
     </tr>
      <tr>
         <th>value</th>
            <th>用户自定义</th>
            <th>input控件默认文本值</th>
     </tr>
      <tr>
         <th>size</th>
            <th>正整数</th>
            <th>input控件在页面显示宽度</th>
     </tr>
        <tr>
         <th>checked</th>
            <th>checked</th>
            <th>定义选择控件默认被选中的项</th>
     </tr>
      </tbody>
        <tfoot>
        <tr>
            <th>maxlength</th>
            <th>正整数</th>
            <th>控件允许输入的最多字符数</th>
        </tr>
        </tfoot>
    </table>

label标签(理解)

label标签为input元素定义标注(标签)

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息,需要用到textarea 标签。

文本内容

<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</twxtarea>

下拉菜单

选项1 选项2 选项3
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

表单域

各种表单控件
<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值