javaweb02-表格、表单

目录

一、表格

二、表单

一、表格

1、表格属性说明

table标签：在html中表示为表格的意思，用来定义表格整体

```



```
 
   
>常见作用在表格上的属性：
 
   
border：定义表格的边框，不添加或者设置0px时没有表格分割线
 
   
width、height：定义表格的宽高
 
   
rowspan：融合行单元格，融合并不是说把其他元素的值覆盖了，而是其他元素正常会衍生排版，需要自己加减去掉因为融合导致的冲突单元格
 
   
colspan：融合列单元格
 
   
cellspacing：设置表格与表格之间的间隔距离，0px表示没有间隔
 
   
cellpadding：设置表格元素与表格之间的间隔距离
 
  
2、表格配套标签说明
 
   
>td标签：表格单元格，或者说表格内容，用来包裹元素的
 
   
th标签：表格的表头
 
   
tr标签：表示表格的行，一行里可以存在多个td
 
   
caption标签：表格的名称
 
  
td标签：表格单元格，或者说表格内容，用来包裹元素的
```





内容





```

th标签：表格的表头

```





表头





```

tr标签：表示表格的行，一行里可以存在多个td

```





内容

内容





```

caption标签：表格的名称

```



内容



```

3.表格实操演练

网上百度随便找了一个表格

工程代码：

```



























表.No1133000 实操练习



资产负债表水平分析表





项目

2009年

2008年

变动情况

对资产影响（%）





变动额

变动百分比





流动资产





货币资金

9,743 152 155.24

8,093,721.891.16

1649.430.264.08

20.38%

10.47%





应收票据

380760.283.20

170612609.00

210,147.674.20

123.17 %

1.33%





应收账款

21,386,314.28

34 825.094.84

-13 438 780.56

-38.59%

-0.09%





预付款项

1,912,600.00

18,12,1.891.16

23.1.264.08

80.38%

11.47%





应收利息

9,155.24

721.891.16

430.264.08

10.38%

0.47%





其他应收款

155.24

121.891.16

430.264.08

2.38%

1.47%





存货

9,99 155.24

891.16

430.264.08

66.38%

11.47%





一年内到期的非流动资立

123 155.24

666.891.16

264.08

12.38%

11.47%





流动资产合计埃烦椿唉前甸

9,999 999 999.99

9,999,999.999.99

999.999.999.08

99.99%

99.99%











```

>侧重点：

1.如果说存在合并单元格的情况，总数一定是不变的，即合并单元格的部分不能当成一个单元格项。

2.合并单元格的下一行内容对应上一行单元格内容的时候，合并单元格中没有内容的项，是可以省略不写的。

3.css3文本加粗写法 font-style: normal; font-weight: bold;

4.表格线性渐变 background-image: linear-gradient(#fff, #87BEE5)

5.表格内容居中text-align: center;

 

#二、表单

网页上用于采集用户手动输入的数据，常见用于用户注册、信息填报之类的。

##1、表单标签

>一共就分为三种

input：定义表单项，通过`type属性`控制文本输入形式，

select：定义下拉列表，

textarea：定义文本域

type值的属性有很多：

`1.text：默认值，单行文本输入内容`

`2.password：密码字段`

`3.radio：单选按钮`

`4.checkbox：复选框`

`5.file：文件上传按钮`

`6.date/time/datetime-local：日期/时间/日期时间`

`7.number：数字输入框 `

`8.email：邮件输入框`

`9.hidden：隐藏块，隐藏域，占位`

`10.submit/reset/button：提交按钮/重置按钮/可点击按钮`

 

##2、表单属性

>action：定义提交表单时 向何处发送数据，举例：url传参

method：规定发送表单数据的方式，get、post二选一

##3.表单演练

照着type类型全部梳理一遍，展示下对应的最终效果，书写顺序跟上面type值的顺序一致

代码如下，ui有点丑，有兴趣可以自己敲敲并且处理下css样式，此处只做属性演示

```























`1.text：默认值，单行文本输入内容` 


`2.password：密码字段` 


`3.radio：单选按钮`

 AAA

 BBB


`4.checkbox：复选框`

AAA

BBB

CCC


`5.file：文件上传按钮`




`6.date/time/datetime-local：
 日期/时间/日期时间`











`7.number：数字输入框 `




`8.email：邮件输入框`




`9.hidden：隐藏块，隐藏域，占位`




`10.submit/reset/button： 
 提交按钮/重置按钮/可点击按钮`













11.select -----------------定义下拉列表







选择

AAA

BBB

CCC

DDD









12 .textarea----------文本域


















```

>侧重点

1.label标签是作用于整个区域，如果radio或者checkbox有名称的话，不加label点击选择只能点击选择框才会生效，加了label看做一个整体，点名称也可以勾选上

2.method提交方式，submit提交表单数据的时候，如果是get直接会提交到当前页面的url中，这种提交方式是有长度限制的，常用的post

3.required属性，标记属性 必填