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元素定义标注(标签)
<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>