整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

详解HTML中表格和表单

ava程序员学习HTML,表格和表单是用得比较多的,掌握好这2个标签的详细用法会对你非常有益!

一、table表格

表格由table标签表示,里面嵌套tr,表示一行,而tr里面嵌套td和th,表示一行有多少列。它们的具体属性和使用方法如下:

注意点:table、tr和td都有align属性,但含义不同。其中table的align表示整个表格居中对齐,而在tr中表示整行中所有的单元格中的内容居中对齐,在td中则表示该单元格中的内容剧中对齐。此外td和th还有跨行和跨列的功能。现在利用这个知识点实现一个具有层次结构的表格:

代码:

<html>

<head>

<TITLE>first page!!</title>

</head>

<body>

<table border="1" width="700px" align="center">

<tr>

<th>待执行项目</th>

<th>&nbsp;</th>

<th>正在执行项目</th>

</tr>

<tr>

<td valign="top">

<table border="1" width="100%" >

<tr>

<th>

<input type="checkbox" />

</th>

<th>项目名</th>

<th>花费</th>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

</table>

</td>

<td align="center">

<input type="button" value="移入>>" /><br/><br/>

<input type="button" value="<<移出" />

</td>

<td valign="top">

<table border="1" width="100%">

<tr>

<th>

<input type="checkbox" />

</th>

<th>项目名</th>

<th>花费</th>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

<tr align="center">

<td>

<input type="checkbox" />

</td>

<td>A</td>

<td>998.00</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

代码运行效果:

二、form表单

对于javaEE程序员,我们日常输入用户名和密码,然后提交表单,可是对表单总是懵懵懂懂,现在超详细精炼总结如下,希望可以帮到你!

希望你照着我给出的模板,每一个都去测试一下,你便会豁然开朗,从此表单提交不再困惑!

TML 基础

非常简单的HTML文档

HTML 标题

HTML 段落

HTML 链接

HTML 图片

实例解析

HTML 标题

HTML 标题

在html源码中插入注释

插入水平线

实例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文档中折行的使用。

HTML 格式化的某些问题。

实例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示不同的"计算机输出"标签的显示效果。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

文本下划线与删除线

实例解析

HTML 样式

HTML Style 元素

背景色样式

字体样式,颜色,大小

文本对齐样式

设置文本字体

设置文本字体大小

设置文本字体颜色

设置文本字体,字体大小,字体颜色

HTML使用不同样式

没有下划线的链接

链接到一个外部样式表

实例解析

HTML 链接

创建超级链接

将图像作为链接

在新的浏览器窗口打开链接

链接到同一个页面的不同位置

跳出框架

创建电子邮件链接

创建电子邮件链接 2

实例解析

HTML 图像

插入图像

从不同的位置插入图片

排列图片

本例演示如何使图片浮动至段落的左边或右边。

制作图像链接

创建图像映射

实例解析

HTML 表格

简单的表格

没有边框的表格

表格中的表头

带有标题的表格

跨行或跨列的表格单元格

表格内的标签

单元格边距(Cell padding)

单元格间距(Cell spacing)

实例解析

HTML 列表

无序列表

有序列表

不同类型的有序列表

不同类型的无序列表

嵌套列表

嵌套列表 2

定义列表

实例解析

HTML Forms 和 Input

创建文本域(Text fields)

创建密码域

复选框

单选按钮

简单的下拉列表

预选下拉列表

本例演示如何创建一个文本域(多行文本输入控件)。

创建一个按钮

本例演示如何在数据周围绘制一个带标题的框。

带有文本域与输入域的表单

带有复选框与提交按钮的form表单

带有单选框与提交按钮的表单

发送邮件表单

实例解析

HTML iframe

内联框架 (HTML页面中插入框架)

实例解析

HTML 头部元素

描述了文档标题

HTML页面中默认的URL链接

提供文档元数据

实例解析

HTML 脚本

插入一个脚本

使用 <noscript> 标签

实例解析

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

志同道合的小伙伴跟我一起学习交流哦!

因为在的编辑中“<”和“>”中的内容都会被识别为代码,显示不出来内容,所以,在文本中会省略“<”和“>”,图片中的“<”和“>”不会省略。

第一阶段 01 HTML5

07表格

1 表格table(会使用)

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

2 表格的注意事项

1 tr和 /tr中只能嵌套td和/td标签

2 td和/td标签,他就像一个容器,可以容纳所有的元素

3 表格属性

使用方法:

4 表头标签

只需用表头标记th和/th替代相应的单元格标记td和/td即可。

显示效果为加粗和居中。

5 表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:

1 thead和/ thead:用于定义表格的头部。

2 必须位于table和/ table标签中,一般包含网页的logo和导航等头部信息

3 tbody和/ tbody:用于定义表格的主体。

4 位于

标签中,一般包含网页中除头部和底部之外的其他内容。

6 浏览器审查HTML标签元素

浏览器页面按F12打开

左边显示为HTML,右边显示为CSS(后面会学到)

7 表格标题标签

表格的标题:caption

caption元素定义表格标题。

caption标签必须紧随table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

8 合并单元格

跨行合并:rowspan

跨列合并:colspan

“2”表示合并两个单元格,数值是多少就合并多少个单元格。

看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

本章已结束,下篇文章将分享《08 表单和表单控件》小伙伴们不要错过哟!上述内容是作者本人的学习笔记,需要原视频学习资料可以在公众号回复关键词“前端资料”