没有合适的资源？快使用搜索试试~ 我知道了~

文库首页安全技术网络安全网站开发之HTML基础表格Table和表单Form（三）1

网站开发之HTML基础表格Table和表单Form（三）1

html

需积分: 0 0 下载量 182 浏览量 2022-08-03 22:48:25 上传评论收藏 2.71MB PDF 举报

温馨提示

试读

21页

表格背景的设置它们的基本用法和body一样，这里不再详细介绍。Bgcolor设置背景色Background设置背景图像复杂的网页布局可能需要借助嵌套表格。但是，

资源详情

资源评论

资源推荐

网站开发之HTML基础表格Table和表单Form（三）

原创

Eastmount

阅读数 10050

最后发布于2016-10-03 01:00:55

展开

前面两篇文章主要介绍了HTML的基础知识，详见：

网站开发之HTML入门知识及常用标记符（一）

网站开发之HTML基础知识及超链接（二）

这篇文章主要介绍HTML两个比较重要的基础知识：

表格Table及简单的网页布局

表单Form及Input控件

简单介绍HTML5新增Input控件

参考：W3School内容、北理学习网站时的课件及自己上课的内容。

一. 表格Table及简单的网页布局

简单例子

table标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组

成。

表格标记符table

表格标题 caption

表格行 tr （table row）

表格数据 td （table data）

表格表头 th （table heading）

举个简单例子：

Python+TensorFlow人工智能

该专栏为人工智能入门专栏，采用Python3和TensorFlow实现人工智能相

…

Eastmount

¥9.90

第1页共21页

输出如下图所示，通过th设置表头（通常第一行），td设置单元格。

表格的构造

在 TH 或 TD 标记符中使用 rowspan 属性进行行合并

在 TH 或 TD 标记符中使用 colspan 属性进行列合并

html

head

title

HTML 表格

title

head

body

table

border

“1”

雇员

税前工资

税后工资

阿星

6000

5600

三毛

colspan

”2”

2500

table

body

html

第2页共21页

例如：rowspan=2表示合并两行，colspan=3表示合并三列。

输出如下图所示，改图设置标题挺难的，用到的时候可以参考：

表格对齐

表格的页面对齐

HTML

HEAD

TITLE

合并单元格示例

TITLE

HEAD

BODY

TABLE

border

CAPTION

学生情况表

CAPTION

!-第一行--

rowspan

学号

colspan

个人信息

colspan

入学信息

!-第二行--

姓名

性别

年龄

班级

入学年月

!-第三行--

007

东方不败

不详

888888

2001年9月

!-第四行--

008

任我行

男

888888

2001年9月

TABLE

BODY

HTML

第3页共21页

表格内容的对齐：水平对齐(align)、垂直对齐(valign)

边框与分隔线

Frame属性

Rules属性

Border属性

这是一个非常重要的例子，尤其是绘制三线表格的时候，其中：border=”4”表示边框宽度为 4 像

素，align=”center”表示内容居中显示，frame=”hsides”规定边框那个部分可见，

rules=”rows”规定内侧边框的哪个部分是可见的。

详见：

http://www.w3school.com.cn/tags/tag_table.asp

输出如下图所示：

HTML

HEAD

TITLE

表格的边框和分隔线示例

TITLE

HEAD

BODY

TABLE

border

"4"

frame

"hsides"

rules

"rows"

align

"center"

!-边框宽度为

像素，仅显示上下边框和横向分隔线

CAPTION

我的日程表

CAPTION

星期一

星期二

星期三

星期四

星期五

MUD

NBA2001

联众军棋

笑傲江湖

DiabloII

联众军棋

升级

MUD

睡觉

学习

打篮球

TABLE

BODY

HTML

第4页共21页

剩余20页未读，继续阅读

Element-Pro-Crud::rocket:二次封装Table,Form组件,配套表单,表格设计器,一键Crud:rocket:

:party_popper: ElementProCrud :party_popper: ElementProCrud 快速搭建 CRUD 的利器 Documentation Demo Install NPM npm i element-pro-crud -s 完整引入 import Vue from 'vue'; import ElementProCrud from 'element-pro-c

Tablet-Form:平板电脑表格此表格是动画和验证的基础。在此项目中，我使用了HTML，JavaScript，Jqueary和CSS

平板电脑形式平板电脑表格此表格是动画和验证的基础。在本项目中，我使用了HTML，JavaScript，Jqueary和CSS。

Login-Form-Using-Only-HTML-CSS-N001:HTML，CSS和JAVASCRIPT金牌-网站，网站建设，界面使用Java，HTML5和CSS3进行开发

带有HTML，CSS和JAVASCRIP的黄金设计设计DE OURO COM HTML，CSS和JAVASCRIPT 网站，网站建设，接口的使用都可以使用HTML5，CSS3和Javascript进行开发。仅使用HTML5，CSS3和Javascript学习Web项目，构建网站，用户界面项目。

内容反馈

玛卡库克

粉丝: 27
资源: 309

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

网站开发之HTML基础表格Table和表单Form（三）1

评论0

最新资源

网站开发之HTML基础表格Table和表单Form（三）1

评论0

Element-Pro-Crud::rocket:二次封装Table,Form组件,配套表单,表格设计器,一键Crud:rocket:

Tablet-Form:平板电脑表格此表格是动画和验证的基础。在此项目中，我使用了HTML，JavaScript，Jqueary和CSS

Login-Form-Using-Only-HTML-CSS-N001:HTML，CSS和JAVASCRIPT金牌-网站，网站建设，界面使用Java，HTML5和CSS3进行开发

美观又功能齐全的HTML form表单

html表单（表格）

使用element-ui +Vue 解决 table 里包含表单验证的问题

layui使用form表单实现post请求页面跳转的方法

vue实现form表单与table表格的数据关联功能示例

form-generator:简单表格生成器

vue+element创建动态的form表单及动态生成表格的行和列

vue用ant design中table表格,点击某行时触发的事件操作

el-table树形表格表单验证(列表生成序号)

antd-data-table：组合antd的Table和Form来执行数据的搜索，显示和操作工作的组件

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

layui中table数据将0,1转换为文字的4种方式

html.rar_html_image_style_多表格_显示表格

Vue+Element实现动态生成新表单并添加验证功能

html基本（超全的html基础知识）

通用网站后台管理系统(php版) v1.1

vue-form-builder:超级表单生成器基于Vue构建，具有拖放功能，可保存的表单模式和易于维护的表单升级

html网页做的动态爱心（超好看）

ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过

Logisim 头歌 CLA182四位先行进位电路设计图解及代码（计算机组成原理）免费下载！！！

html css网页制作成品

javascript网页设计期末作业 购物网站

2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时）

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

以图搜图Java+html源代码

最新资源

javascript网页设计期末作业购物网站