3.1 表格概述
3.1.1表格的结构
表格是由行和列组成的二维表,而每行又由一个或多个单元格组成,用于放置数据或其他内容
3.1.2 表格的基本语法
<table></table>//表格说明
<caption></caption>//表格标题标记
<th></th>//表格表头标记
<tr></tr>//行
<td></td>//列
<table border="5"cellspacing="5px">
<caption>23软件1班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
3.2 表格属性设置
3.2.1表格边框属性
边框属性 | 说明 | 边框属性 | 说明 |
border | 表示表格边框粗细 | bordercolorlight | 表示表格亮边框颜色 |
bordercolor | 表示表格边框颜色 | bordercolordark | 表示表格暗边框颜色 |
3.2.2宽度和高度属性
通过设置width属性和height,属性可以设置表格的宽度和高度。
(1)width。其单位可以是长度单位或百分比,用于定义表格的宽度。
(2)height。其单位可以是长度单位或百分比,用于定义表格的高度。
3.2.3背景颜色和背景图象属性
设置表格的 bgcolor属性可以改变表格的背景颜色,设置表格的background属性可以为表格增添背景图像效果,使表格更加美观。
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色
(2)background。设置背景图像,图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时,背景图像会部分或完全覆盖背景颜色
3.2.4边框样式属性
frame属性值 | 说明 | rules属性值 | 说明 |
above | 上边框 | all | 所有内部边框 |
below | 下边框 | none | 不显示内部边框 |
hsides | 上下边框 | rows | 行边框 |
vsides | 左右边框 | cols | 列边框 |
lhs | 左边框 | groups | 介于行列间边框 |
rhs | 右边框 | border | 上下,左右边框 |
void | 不显示边框 |
3.2.5单元格间距,单元格边距属性
设置表格标记中的 cellspacing属性可以改变表格单元格之间的间隔,使网页中的表格内容稍微松散一些。
1.cellspacing。值的单位为像素或百分比,默认值为2px。
2.celpadding。值的单位为像素或百分比
3.2.6表格水平对齐属性
通过设置align属性,设置表格对齐方式。
有三种方式:left,center,right
3.2.7 设置表格的(tr)标记行的属性
属性值 | 说明 | 属性 | 说明 |
align | 行内容水平对齐 | bordercolor | 行的边框颜色 |
valign | 行内容垂直对齐 | bordercolorlight | 行的亮边框颜色 |
bgcolor | 行的背景颜色 | bordercolordark | 行的暗边框颜色 |
3.2.8格单元格跨行、跨列属性
1.单元格跨行:rowspan
语法:<td rowspan="行数"></td>
2. 单元格跨列:colspan
语法:<td colspan="列数"></td>
3.3 表单
3.3.1 表单标记
语法:<form name="" method="" action="" enctype=""></from>
<form name="form1" method="post"
action=""enctype="text/plain"
>
用户名:<input type="text" name="user"/>
用户类型:<input type="text" name="usetype" value="普通用户"readonly />
密码:<input type="password" name="password"/>
3.3.2 定义域和域标题
利用fieldset标记可以在网页上定义域,在表单中使用域可以将表单的相关元素进行分组,fieldset标记将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。
语法:
<form>
<fieldset>
<legend alig="left | center | right">域标题内容</legend>
</fieldset>
</form>
3.3.3 表单信息输入
1.单行文本输入框
设置input 标记的 type属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输人的数据只能单行显示,不能换行。
语法:<input name =" " type= " text" maxlength=" " size=" " value="" readonly/>
2.密码输入框
设置input 标记的type 属性值为password,可以实现向表单中插入一个密码输入框。
语法:<input name =" " type= " password" maxlength = " " size = " " />
3 .复选框
设置 iput 标记的 type属性值为 checkbox,可以实现向表单中插人一个复选框,用户利用复选框在网页上设置多项选择。
语法:
<input name = " "type =" checkbox" value=" " checked/>
4. 单选按钮
设置 input 标记的 type 属性值为 radio,可以实现向表单中插入一个单选按钮,用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name = " " type = " radio" value= " " checked/>
5. 图像按钮
可以实现向表单中插人一个图像按钮,用户设置 input 标记的 type 属性值为 image,利用图像按钮在网页中插入一张图像,通过src属性加载图像。
语法:<input name="" type="image" src=" " width=" " height=" "/>
6. 提交按钮
设置 input 标记的 type 属性值为 submit,可以实现向表单中插入一个提交按钮,提交按钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value=" 提交"/>
7. 重置按钮
设置 input标记的 type属性值为reset,可以实现向表单中插人一个重置按钮,重置按钢用于将表单中所有的输入信息清空,然后让用户可以重新填写。
语法:
<input name = " " type = " reset" value = " "/>
8 .普通按钮
设置input 标记的type属性值为 button,可以实现向表单中插人一个普通按钮。普通按钮在网页设计中非常有用,如果不通过表单提交按钮来处理事件,则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name=" " type=" button" value =" " onclick =" "/>
9. 文件选择框
设置 input 标记的type 属性值为file,可以实现向表单中插入一个文件选择框。
语法:
<input name=" " type = " fle" value=" "/>
10 .隐藏框
设置 input 标记的type 属性值为 hidden,可以实现向表单中插入一个隐藏框,用户表单时,隐藏框的信息也会一起提交到服务器,但隐藏框在网页中是不可见的。
语法:
<input name = " " type = " hidden" value = " "/>
3.3.4多行文本输入框
请输入你的宝贵意见
<textarea name="info"rows="4"cols="50"></textarea>
3.3.5下拉列表框
请选择职业:
<select>
<option value="s1">前端</option>
<option value="s2">后端</option>
<option value="s3">运维</option>
</select>
标签:第三章,表格,标记,边框,按钮,表单,属性
From: https://blog.csdn.net/2402_87184057/article/details/142367866