javaweb02-表格、表单_javaweb表格代码-优快云博客

本文详细介绍了HTML中的表格标签（table,td,th,tr,caption）的属性使用，以及表单元素（input,select,textarea）的类型、属性和示例。侧重点包括合并单元格、CSS样式和表单提交方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一、表格

二、表单

一、表格

1、表格属性说明

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

```

<table

</table>

```

>常见作用在表格上的属性：

border：定义表格的边框，不添加或者设置0px时没有表格分割线

width、height：定义表格的宽高

rowspan：融合行单元格，融合并不是说把其他元素的值覆盖了，而是其他元素正常会衍生排版，需要自己加减去掉因为融合导致的冲突单元格

colspan：融合列单元格

cellspacing：设置表格与表格之间的间隔距离，0px表示没有间隔

cellpadding：设置表格元素与表格之间的间隔距离

2、表格配套标签说明

>td标签：表格单元格，或者说表格内容，用来包裹元素的

th标签：表格的表头

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

caption标签：表格的名称

td标签：表格单元格，或者说表格内容，用来包裹元素的

```

<table>

<tr>

<td>内容</td>

</tr>

</table>

```

th标签：表格的表头

```

<table>

<tr>

<th>表头</th>

</tr>

</table>

```

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

```

<table>

<tr>

<td>内容</td>

<td>内容</td>

</tr>

</table>

```

caption标签：表格的名称

```

<table>

<caption>内容</caption>

</table>

```

3.表格实操演练

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

工程代码：

```

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>表.No1133000 实操练习</title>



<style>

table {

text-align: center;

background-image: linear-gradient(#fff, #87BEE5)

}



td {

font-style: normal;

font-weight: bold;

width: 150px;

}



#left_title {

text-align: left;

}

</style>

</head>



<body>

<table border="1px" cellspacing="0px" cellpadding="10px">

<caption>表.No1133000 实操练习</caption>

<tr>

<td colspan="7">资产负债表水平分析表</td>

</tr>

<tr>

<td rowspan="2">项目</td>

<td rowspan="2">2009年</td>

<td rowspan="2">2008年</td>

<td colspan="2">变动情况</td>

<td rowspan="2">对资产影响（%）</td>

</tr>

<tr>

<td>变动额</td>

<td>变动百分比</td>

</tr>

<tr>

<td id="left_title" colspan="7">流动资产</td>

</tr>

<tr>

<td>货币资金</td>

<td>9,743 152 155.24</td>

<td>8,093,721.891.16</td>

<td>1649.430.264.08</td>

<td>20.38%</td>

<td>10.47%</td>

</tr>

<tr>

<td>应收票据</td>

<td>380760.283.20</td>

<td>170612609.00</td>

<td>210,147.674.20</td>

<td>123.17 %</td>

<td>1.33%</td>

</tr>

<tr>

<td>应收账款</td>

<td>21,386,314.28</td>

<td>34 825.094.84</td>

<td>-13 438 780.56</td>

<td>-38.59%</td>

<td>-0.09%</td>

</tr>

<tr>

<td>预付款项</td>

<td>1,912,600.00</td>

<td>18,12,1.891.16</td>

<td>23.1.264.08</td>

<td>80.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>应收利息</td>

<td>9,155.24</td>

<td>721.891.16</td>

<td>430.264.08</td>

<td>10.38%</td>

<td>0.47%</td>

</tr>

<tr>

<td>其他应收款</td>

<td>155.24</td>

<td>121.891.16</td>

<td>430.264.08</td>

<td>2.38%</td>

<td>1.47%</td>

</tr>

<tr>

<td>存货</td>

<td>9,99 155.24</td>

<td>891.16</td>

<td>430.264.08</td>

<td>66.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>一年内到期的非流动资立</td>

<td>123 155.24</td>

<td>666.891.16</td>

<td>264.08</td>

<td>12.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>流动资产合计埃烦椿唉前甸</td>

<td>9,999 999 999.99</td>

<td>9,999,999.999.99</td>

<td>999.999.999.08</td>

<td>99.99%</td>

<td>99.99%</td>

</tr>

</table>

</body>



</html>

```

>侧重点：

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样式，此处只做属性演示

```

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>表单</title>

</head>



<body>

<form action="" method="get">

`1.text：默认值，单行文本输入内容` <input type="text" required name="name"><br>

`2.password：密码字段` <input type="password" name="password"><br>

`3.radio：单选按钮`

<label><input type="radio" name="radio" value="1"> AAA</label>

<label><input type="radio" name="radio" value="2"> BBB</label><br>

`4.checkbox：复选框`

<label><input type="checkbox" name="checkbox">AAA</label>

<label><input type="checkbox" name="checkbox">BBB</label>

<label><input type="checkbox" name="checkbox">CCC</label><br>

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

<input type="file" name="file"><br>

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

<input type="date" name="date" id=""><br>

<input type="time" name="time" id=""><br>

<input type="datetime-local" name="datetime-local：日期" id=""><br>

`7.number：数字输入框 `

<input type="number" name="number" id=""><br>

`8.email：邮件输入框`

<input type="email" name="email：邮件输入框" id=""><br>

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

<input type="hidden" name="hidden"><br>

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

<input type="submit" value="submit">

<input type="reset" value="reset">

<input type="button" value="button">

<br><br><br>

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

<br><br>

<select name="select">

<option value="">选择</option>

<option value="a">AAA</option>

<option value="b">BBB</option>

<option value="c">CCC</option>

<option value="d">DDD</option>

</select>

<br><br>



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

<br><br>

<textarea name="textarea" id="" cols="30" rows="10"></textarea>

</form>




</body>



</html>

```

>侧重点

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

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

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