[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页

最新推荐文章于 2024-06-13 10:31:50 发布
最新推荐文章于 2024-06-13 10:31:50 发布
阅读量4.3k 收藏 144
点赞数 159
分类专栏： 喵喵画网页 文章标签： html 前端 html5 javascript css3 网页制作 计算机学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ormstq/article/details/135723508
版权

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

表格

表格

表格标记

表格标记-语法

表格属性设置

表格边框样式属性

表格单元格间距、单元格边距属性

表格水平对齐

设置表格行的属性

表格行的属性-设置

设置单元格的属性

设置单元格的属性-单元格跨行、列

表格嵌套

课后练习

网页标题：计算机报价表

网页标题：会员注册

网页标题：列表标签的应用

总结

前言

掌 握设计表格所有标记和属性。
掌握表格行标记的属性及设置方法。
掌握表格单元格的跨行与跨列属性的设置方法。
了解本专栏 订阅专栏 解锁全文 超级会员免费看
猫佛佛
关注
  • 159
    点赞
  • 踩
  • 144
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 131
    评论
专栏目录
订阅专栏
Web前端开发技术 第7-12章
崚嶒
06-23 1012
Web前端开发技术复习笔记
web前端技术——二、表格与框架
qq_46007633的博客
03-20 3743
表格和框架的一些基础的知识和属性，还有部分示例，通俗易懂。 注：本系列其他章节在最后有链接哦
HTML_03 快速入门 表格&框架
m0_60786924的博客
03-26 1303
一、认识表格 按所需的内容项目画成各自，分别填写文字或数字等书面材料，便于统计查看。 1.表格标签：<table></table> <th></th>表格标题标签 作用：自动加粗居中 <tr></tr> 行（表格行） ......
Web前端开发技术-HTML5基础-标签总结（三）
SUZEHUI9636的博客
04-19 141
1.常用表格标签 <table>表格标签</table> <th>表头</th> <tr>行</tr> <td>列</td> 2.属性 border="15" 边框 bordercolor="#0000FF" 边框颜色 bordercolorlight="#ff0000" 亮边框颜色 bordercolordark="#6600ff" 暗边框颜色 bgcolor="#99cccc"背景颜色 3.边框属性 fr
html5中制作表格,(html5表格的制作.doc
weixin_42342032的博客
06-17 587
(html5表格的制作教学项目五 HTML中表格的制作【教学内容】讲解HTML中制作表格的标志【教学目的】使学生掌握简单表格的制作【教学重点】表格中单元格的合并操作【教学难点】理解属性rowspan与colspan的含义【教学方式】案例分析式、项目教学【教学参考】1．HTML网页制作教程 材义语编著 铁道出版社2、HTML基础与实例 程耀编著 电子工业出版社表格基本标志(1)(2...
HTML5全
bw12138的博客
05-24 355
dl>< dl > < dt > 项目1 < dd > 说明1 < dd > < dd > 说明2 < dd > < dl > < dt > 项目1 < dd > 说明1 < dd > < dd > 说明2 < dd > < dt > 项目1 < dd > 说明1 < dd > < dd > 说明2 < dd >
HTML表格的使用
qq_62898618的博客
01-03 986
1.表格的基本使用 表格标签(table)的基本语法 table:表格容器 tr:列 td:单元格 th:粗体 caption:标题列 【例子】<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF0
怎么用html5制作申请表,html-5 表格的制作
weixin_39636540的博客
07-21 757
《html-5 表格的制作》由会员分享，可在线阅读，更多相关《html-5 表格的制作(6页珍藏版)》请在人人文库网上搜索。1、教学项目五 HTML中表格的制作【教学内容】讲解HTML中制作表格的标志【教学目的】使学生掌握简单表格的制作【教学重点】表格中单元格的合并操作【教学难点】理解属性rowspan与colspan的含义【教学方式】案例分析式、项目教学【教学参考】1HTML网页制作教程 材义语...
01【Web】基础-HTML
极正君
03-24 325
01【Web】基础-HTML
HTML表格标记教程(5):亮边框色属性BORDERCOLORLIGHT
12-12
在表格中可以单独定义左上边框的颜色，也可以定义单元格中右下边框的颜色，这两个位置的边框色我们称之为亮边框。 基本语法 <TABLE Bordercolorlight=color_VALUE> 语法解释 定义颜色的时候，可以使用英文颜色名称或...
HTML表格标记教程(29):单元格的亮边框色属性BORDERCOLORLIGHT
12-13
– —————————— –>02 <!– 文件范例：10-27.htm –>03 <!– 文件说明：设定单元格亮边框颜色 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定单元格亮...
HTML表格标记教程(39):表头的亮边框色属性BORDERCOLORLIGHT
12-11
– —————————— –>02 <!– 文件范例：10-37.htm –>03 <!– 文件说明：设定表头亮边框颜色 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定表头亮边框...
HTML表格标记教程(22):行的亮边框色属性BORDERCOLORLIGHT
12-13
– —————————— –>02 <!– 文件范例：10-20.htm –>03 <!– 文件说明：设定行亮边框颜色 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定行亮边框颜色&...
从入门到精通HTML5——PDF——网盘链接
02-27
　7.6.7　单元格的亮边框——bordercolorlight 148 　7.6.8　单元格的暗边框——bordercolordark 150 　7.6.9　单元格的背景图像——background 151 　7.7　表格的结构 152 　7.7.1　表格的表头标记——thead 153 　...
html实现粘贴excel数据，在页面表格中复制
最新发布
weixin_43805439的博客
06-13 337
Html table 实现Excel多格粘贴
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
HTML 颜色名
xyq2024的博客
06-12 391
HTML 颜色名是一组预定义的颜色，可以在 HTML 和 CSS 中使用。这些颜色名易于记忆，方便开发者快速选择和使用。本文将详细介绍 HTML 颜色名，包括它们的用途、优点以及如何在网页设计中使用它们。
在 SEO 中，一个好的网页必须具备哪些 HTML 标签和属性？
SEO_juper的博客
06-06 1135
这个 HTML 标题标签是 SEO 期间要考虑的最重要的标签之一。当我们在搜索引擎中搜索某些内容时，标题标签也会以粗体和更大的字体显示。标记提供有关 HTML 文档的信息，或者简单来说，它提供有关文档的重要信息。搜索引擎优化 （SEO） 是涉及提高网站在搜索引擎上的可见性的过程。网站在这些页面上的显示位置越高，就越有可能获得更大的流量。HTML 标题标签 （h1-h6）：用于定义页面的标题。例： 下图说明了图像标记的 alt 属性在图像未显示时的外观。例：下图说明了标题标签在网页上的外观。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>人力资源管理系统</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <link href="css/css.css" rel="stylesheet" type="text/css"> </head> <body> <table width="100%" border="1" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#CCCCCC" bordercolor="#FFFFFF" bordercolordark="#FFFFFF" > <tr> <td height="22" colspan="7" align="left" ><strong class="text13">人才信息</strong></td> </tr> <tr class="tdhui"> <td height="22" align="center" >姓名</td> <td height="22" align="center" >性别</td> <td height="22" align="center" >年龄</td> <td height="22" align="center" >职位</td> <td height="22" align="center" >所学专业</td> <td height="22" align="center" >工作经验</td> <td height="22" align="center" >执行操作</td> </tr> <tr> <td height="22" align="center" >we33</td> <td height="22" align="center" >男</td> <td height="22" align="center" >0</td> <td height="22" align="center" >ew</td> <td height="22" align="center" >we</td> <td height="22" align="center" >ew</td> <td height="22" align="center" ><a href="detailjob.html">详细</a>  <a href="#">删除</a> </tr> <tr> <td height="22" align="center" >ds</td> <td height="22" align="center" >女</td> <td height="22" align="center" >0</td> <td height="22" align="center" >ds</td> <td height="22" align="center" >ds</td> <td height="22" align="center" >ds</td> <td height="22" align="center" ><a href="detailjob.html">详细</a>  <a href="#">删除</a> </tr> <tr> <td height="22" align="center" >李四</td> <td height="22" align="center" >男</td> <td height="22" align="center" >36</td> <td height="22" align="center" >JAVA架构师</td> <td height="22" align="center" >计算机</td> <td height="22" align="center" >5年</td> <td height="22" align="center" ><a href="detailjob.html">详细</a>  <a href="#">删除</a> </tr> <tr> <td height="22" align="center" >王五</td> <td height="22" align="center" >男</td> <td height="22" align="center" >28</td> <td height="22" align="center" >软件测试工程师</td> <td height="22" align="center" >计算机</td> <td height="22" align="center" >三年</td> <td height="22" align="center" ><a href="detailjob.html">详细</a>  <a href="#">删除</a> </tr> </table> </body> </html>实现后端代码
05-24
对于这段HTML代码，如果要实现后端功能需要使用一些Web开发框架（如Django、Flask、Spring等）进行开发。 在后端代码中，需要先建立一个路由（Route）来响应前端发来的请求，比如这里的人才信息页面。具体代码可以类似下面这样： ``` from flask import Flask, render_template app = Flask(__name__) @app.route('/talent') def talent(): # 从数据库中查询人才信息数据 talents = [ {'name': 'we33', 'gender': '男', 'age': '0', 'position': 'ew', 'major': 'we', 'experience': 'ew'}, {'name': 'ds', 'gender': '女', 'age': '0', 'position': 'ds', 'major': 'ds', 'experience': 'ds'}, {'name': '李四', 'gender': '男', 'age': '36', 'position': 'JAVA架构师', 'major': '计算机', 'experience': '5年'}, {'name': '王五', 'gender': '男', 'age': '28', 'position': '软件测试工程师', 'major': '计算机', 'experience': '三年'} ] # 渲染模板并返回HTML页面 return render_template('talent.html', talents=talents) ``` 在上面的代码中，我们定义了一个`/talent`的路由，并定义了`talent`函数来处理该路由的请求。该函数中，我们首先从数据库中查询人才信息的数据，这里为了方便，我们直接定义了一个`talents`列表来存储数据。 接下来，我们使用`render_template`函数来渲染模板，并将查询到的数据传递给模板，以便在前端页面中动态显示。其中，`talent.html`是我们定义的模板文件名，`talents=talents`则是将查询到的数据传递给模板。 最后，我们需要在代码中指定模板文件的存放路径，可以通过如下代码实现： ``` app = Flask(__name__, template_folder='templates') ``` 这里我们将模板文件存放在`templates`目录下。 当我们在前端页面中访问`/talent`路由时，后端代码会根据路由定义的`talent`函数来响应请求，从数据库中查询数据并将其传递给模板进行渲染，最终将渲染后的HTML页面返回给前端进行显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 131
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫佛佛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值