JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解

使用表格标签制作规整的表格 table标签是表格标签,
border属性设置表格的边框厚度,
width属性设置表格的宽度,
align设置表格的对齐方式,
cellspacing设置单元格的间距
tr是行标签,
td是单元格标签,
th是字体居中加粗的单元格标签,
b是字体加粗标签
下面制作一个3*3的表格,放置在页面中心,边框厚度为2,宽度为500,单元格内没有间距,并每一行使用不同的效果

规整的表格
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3

截图
JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

使用表格标签制作不规整的表格 colspan属性可以横向拓展,rowspan属性可以竖向拓展
可以使用这两个属性来使表格变得不规整。如:
不规整的表格
1.1
2.1 2.2 2.3
3.2 3.3

截图
JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

表单标签的样式 input是输入标签,可以通过type选择其输入的类型:text是文本框,password是密码框,radio是单选框,checkbox是复选框,reset是重置按钮,submit是提交按钮,button是按钮,file是文件上传,hidden是隐藏域;value属性可以设置默认显示的内容。对于选择框checked属性可以默认选择,name属性可以防止冲突。
select标签是下拉列表标签,option标签是选项,selected属性可以设置默认值。
textarea标签是多行文本框,rows是高度,cols是宽度。
下面是一个案例:
表单
账户:
密码:
性别:
技能:Java c++ web
国籍:>
补充内容:



【JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解】截图
JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

表格与表单结合 将表单和表格结合起来就可以让表单更加的美观
表单表格
账户:
密码:
性别:
技能: Java c++ web
国籍: >
补充内容:

截图
JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

表单的提交 form标签中的action属性可以设置提交服务器的地址
method属性是提交方式有GET(默认)和POST
表单提交需要给表单中的项目添加name值,并且给选择框添加value值
表单提交
账户:
密码:
性别:
技能: Java c++ web
国籍: ="country">
补充内容:

JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

JavaWeb|JavaWeb——HTML基础标签table标签与form标签的学习与理解
文章图片

我们在地址栏就可以看见我们所提交的信息,但是这是不安全的,提交方式变成post就可以避免这些信息的显示。
希望对看到这里的诸位有所帮助,如果喜欢这篇个人理解不妨点一个赞,谢谢~。
全部代码
表格和表单 规整的表格
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
不规整的表格
1.1
2.1 2.2 2.3
3.2 3.3
表单
账户:
密码:
性别:
技能:Java c++ web
国籍:>
补充内容:


表单表格
账户:
密码:
性别:
技能: Java c++ web
国籍: >
补充内容:
表单提交
账户:
密码:
性别:
技能: Java c++ web
国籍: ="country">
补充内容:

    推荐阅读