HTML中得表格和表单

最新推荐文章于 2022-08-25 17:23:02 发布

原创最新推荐文章于 2022-08-25 17:23:02 发布 · 242 阅读

2 ·

CC 4.0 BY-SA版权

HTML中得表格和表单

表格

表格属性

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

<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

表格总结

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

表单

表单标签（掌握）

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

input控件

标题
属性	属性值	描述
type	text	单行文本输入框
	password	密码
	redio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户自定义	控件名称
value	用户自定义	input控件默认文本值
size	正整数	input控件在页面显示宽度
checked	checked	定义选择控件默认被选中的项
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元素定义标注（标签）
Male

<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>