html表格奇闻

最新推荐文章于 2023-01-10 00:52:59 发布
最新推荐文章于 2023-01-10 00:52:59 发布
阅读量128 收藏
点赞数
分类专栏： Web 文章标签： class css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45984664/article/details/109701780
版权

做一个html表格
今天又无聊，看了看菜鸟教程
偶然间看到了这样一个页面：
已知

`<table border="1">
    <tr>
        <th>Header 1</th>
    </tr>
</table>

运行结果：
`




Header 1

`
请做出以下表格：

受理员业务统计表
2017-01-02---2017-05-02
受理员受理数自办数直接解答拟办意见返回修改工单类型
同意比例数量比例建议件诉求件咨询件
受理处王艳          
           
           
           
           
           
           
总计20202020202020202020
话务组王艳          
王艳          
王艳          
王艳          
           
           
           
总计20202020202020202020

。。。。。

感觉不是一个级别的
还真有人做出来了,
不知道是不是某位大佬闲的来新手区大显神威
源码：

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
  </tr>
  <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
  <tr>
    <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
    <td colspan="2" class="btbg font-center titfont">拟办意见</td>
    <td colspan="2" class="btbg font-center titfont">返回修改</td>
    <td colspan="3" class="btbg font-center titfont">工单类型</td>
  </tr>
  <tr>
    <td width="8%" class="btbg font-center">同意</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">数量</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
    <td width="7%"  class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
    <td width="7%"  class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
</table>

@charset "utf-8";
/* CSS Document */
.tabtop13 {
	margin-top: 13px;
}
.tabtop13 td{
	background-color:#ffffff;
	height:25px;
	line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
	font-family: 微软雅黑;
	font-size: 26px;
	font-weight: bold;
	border-bottom:1px dashed #CCCCCC;
	color: #255e95;
}
.titfont {
	
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
	background: url(../images/ico3.gif) no-repeat 15px center;
	background-color:#e9faff;
}
.tabtxt2 {
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	color:#327cd1;
}
.tabtxt3 {
	font-family: 微软雅黑;
	font-size: 14px;
	padding-left: 15px;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 20px;
}

偶就笑了笑
不说话

来自https://c.runoob.com/iframe/3187
自己看吧
强烈

无语

呵呵呵（：笑笑不说话

洛鲟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html表格
我爱美女S的博客
10-13 3730
第二天 table是表格，form是表单域 表单由三部分组成： 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录； 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名； 提示信息：提示用户每一个表单控件是收集什么信息的。 表格的主要作用是以行、列的方式（表格）整齐地展示数据 三个基本的表格标签：table 表格标签，用于包含多个 tr；tr 定义表格中的行，用于包含多个 td；td 定义表格中的单元格，用于存放单元格内容。
html 表格
08-28 508
<!-- 作者：xwl281928290@163.com 时间：2016-07-25 描述： border:设置表格线的宽度 width：设置表格宽度 height：设置表格高度 cellpadding：设置表格内文字距离左边宽度 cellspacing：设置表格线与线的间距 bgcolor：设置表格背景颜色 caption：设
html总结之表格
FXX_Bran的博客
05-29 383
HTML 表格 标签 说明 <table> 表格 <thead> 表格的页眉 <tfoot> 表格的主体 <tbody> 表格的页脚 <th> 表格的表头 <tr> 表格的行 <td> 表格单元 <caption> 表格标题 <colgroup&gt...
HTML 小结
集腋成裘
08-17 1290
HTML 知识小结HTML 概述超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言，可以使用 HTML 来建立 Web 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML 表格
weixin_30711917的博客
12-29 98
转自：菜鸟教程：HTML表格 HTML code: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="center" class="biaoti" height="60">受理员...
HTML HTML 表格 (stage1-21)
MAC--芳
01-08 1384
基础篇-HTML 表格 1.HTML 表格 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例： html lang="en"> head> meta charset="UTF-
前端开发 创建一个漂亮的表格HTML语言，初学前端者必须掌握的知识，那些年一起T跳过的坑都在这里，快来吧
weixin_45116412的博客
04-03 594
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css实例练习</title> <style> .biaoti{ font-family: 微软雅黑; font-s...
HTML学习之表格,列表,区块,布局
Logbook的博客
03-21 924
HTML表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体...
初学 class 类，打包 tab 栏切换
weixin_47544559的博客
11-25 701
使用class类打包tab栏切换 一、搭建html结构 <main> <h4 style="user-select: none;">JS 面向对象，动态添加标签页</h4> <div class="tabsbox" id="tab"> <!-- tab标签 --> <nav class="firstnav"> <!-- tab栏标题 --> &lt
左侧点击后右侧添加tab标签栏以及内容
weixin_30470643的博客
03-22 1030
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>左侧点击后右侧添加tab标签栏以及内容</title> <script type="text/javascript" src="http://files.cnblogs.com/fil...
HTML菜鸟基础
qq_42710104的博客
11-19 911
最近大体看了一下html的菜鸟基础知识,对着敲了一下,大致了解了一些html的简单基础 练习的代码自己记录一下 效果图很丑: 第一个html 第一个标题 这是第二个标题 这是 First name:= Last name:= username: ...
2021-11-20 任务二：移动端余下的功能
учёба
11-20 662
1.用户信息的简单展示 前台页面 member.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta
Bilibili支持了AV1编码，关于AV1编码你知道吗？
热门推荐
qq_45984664的博客
01-10 1万+
AV1编码的编码速度比H.264和HEVC编码要慢得多，这是由于AV1编码使用了更复杂的算法，以及更多的计算资源。其次，AV1编码的编码效率也不是很高。AV1编码的编码效率比H.264和HEVC编码要低得多，这是由于AV1编码使用了更复杂的算法，以及更多的计算资源。AV1编码的许可证比H.264和HEVC编码要复杂得多，这是由于AV1编码使用了更复杂的算法，以及更多的计算资源。总的来说，AV1编码拥有更高的编码效率、更低的码率、更容易的软件实现、更好的跨平台性和更高的编码质量，可以满足视频编码的各种需求。
在线音乐搜索API
qq_45984664的博客
10-02 4148
在线获取音乐API https://music.liuzhijin.cn/?name=｛songs name｝&type={app name} 其中，｛songs name｝为音乐名 {app name}为平台名 平台支持13种主流音乐平台 英文名/拼音 例如 https://music.liuzhijin.cn/?name=hello&type=kugou （酷狗音乐）和 https://music.liuzhijin.cn/?name=hello&type=netease （网易
使用div+css创建一个网页
qq_45984664的博客
11-18 2706
使用div+css创建一个网页 无Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> * { box-sizing: border-box; } body { margin: 0; } .header { background-color: #2696F3;
前端开源库之（2）：音频播放器类
qq_45984664的博客
07-04 2564
上期我们说完了视频播放器类 这次讲 音频播放器类 音频播放器有哪些？ Aplayer muplayer 本来muplayer是一个很好的播放器，为百度音乐开发的。 只可惜百度音乐后来不用了，GIthub上也找不到了 所以今天主要讲： Aplayer 打开后你会惊奇地发现： 这跟上期讲的（Dplayer）作者一样。 oh，别急先打开它的官网 瞅瞅 Aplayer和Github oh，哇哦！！！！！！！！ 啥也没发生。 它上面写着“ APlayer_一款可爱/漂亮的Js音乐播放器 网站地址:https:/
html获取地理位置
qq_45984664的博客
11-15 2563
先上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取地理信息(slow)</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
2020-10-02
qq_45984664的博客
11-15 2068
今天准备做网易新闻API 整理一下发给大家 （加前缀：https://3g.163.com/） 新闻：/touch/reconstruct/article/list/BBM54PGAwangning/0-10.html 娱乐：/touch/reconstruct/article/list/BA10TA81wangning/0-10.html 体育：/touch/reconstruct/article/list/BA8E6OEOwangning/0-10.html 财经：/touch/reconstruct/
有关HTML打开Office文档
qq_45984664的博客
03-07 1127
hi，各位，今天给大家介绍一个在网站上打开 microsoft office的文档的方法，各位网站开发者可以看一下 首先，先打开这个网站，这个是Microsoft web app 的官方网站，是最简单的方法。 就是这个。 这个是最简单的，只需要在网站上载一个文档，获取连接，就可以插入、生成了，非常简单。 除此之外你还可以到永中软件上看看，因为它是使用Java开发的，完全可以在网站中插入，只不过有点...
还是不行，我获取不到其他页面传过来的的index和flag，我是需要将其他页面传过来的index赋值给_currentIndex class TarbarPage extends StatefulWidget { final int index; final int flag; const TarbarPage({Key? key, required this.index, required this.flag}) : super(key: key); @override State<StatefulWidget> createState() => _TarbarPageState(); lass _TarbarPageState extends State { int _currentIndex = 0; //底部导航栏当前索引 final _tabPages = [ const HomePage(), const StudyPage( index: 0, ), const FantasticStoryPage(), const SetUpPage() ]; @override Widget build(BuildContext context) { return Scaffold( body: _tabPages[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { print('idnex$index'); setState(() { _currentIndex = index; }); String? currentPageRoute = ModalRoute.of(context)?.settings.name; print('Third page route: $currentPageRoute'); }, type: BottomNavigationBarType.fixed, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: ('首页'), ), BottomNavigationBarItem( icon: Icon(Icons.school), label: ('学习'), ), BottomNavigationBarItem( icon: Icon(Icons.local_library), label: ('奇闻'), ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: ('设置'), ), ]), ); } } }
最新发布
07-25
label: ('奇闻'), ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: ('设置'), ), ], ), ); } } ``` 在上述代码中，我们在`_TarbarPageState`的`initState()`方法中将传递的`widget....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值