html总结之表格

最新推荐文章于 2022-02-25 21:59:54 发布
最新推荐文章于 2022-02-25 21:59:54 发布
阅读量368 收藏 2
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FXX_Bran/article/details/90673818
版权
HTML 表格
标签说明
<table>表格
<thead>表格的页眉
<tfoot>表格的主体
<tbody>表格的页脚
<th>表格的表头
<tr>表格的行
<td>表格单元
<caption>表格标题
<colgroup>表格列的组
<col>用于表格列的属性
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Bran.im</title> 
</head>
<body>
   <table border="1">
        <caption>我是表格的标题</caption>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>黄小黄</td>
                <td>16</td>
                <td rowspan="2">女</td>
            </tr>
            <tr>
                <td>成二狗</td>
                <td>18</td>
                <!-- <td>女</td> -->
            </tr>
            <tr>
                <td>赵瓜皮</td>
                <td>21</td>
                <td>男</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td colspan="2">3人</td>
               
            </tr>
        </tfoot>
    </table>

</body>
</html>

HTML 表格
小案例

<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">2019-05-05---2019-05-06</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;
}

效果图
效果图

Bran.im
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发 创建一个漂亮的表格HTML语言，初学前端者必须掌握的知识，那些年一起T跳过的坑都在这里，快来吧
weixin_45116412的博客
04-03 590
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css实例练习</title> <style> .biaoti{ font-family: 微软雅黑; font-s...
HTML表格标签超详细总结
weixin_45904557的博客
02-26 1300
一、表格的基本结构 <table border="" cellspacing="" cellpadding=""> <tr><th>Header</th></tr> <tr><td>Data</td></tr> </table> 1. <table></table> 定义表格的基本框架 2. <tr><...
HTML中表格总结
iteuko的博客
11-03 297
话不多说，直奔主题，本人会从两方面总结表格 一，表格的构成 。二，表格的用法 一，表格的构成（构成的元素） 构成表格的元素
html 之列表总结
彤先森的博客
01-10 76
HTML三种列表总结,html全部总结
weixin_39631370的博客
06-18 669
html总结基本结构1.简单的基本结构标题网页主体内容head不打印在网页上面，只有body里面的文字内容打印在网页上面是分割线添加背景元素的话需要添加在body开始标签的后面比如语法：……标签名>文档类型声明声明必须放在html文档的第一行网页编码设置在标签之间添加utf-8可以换成你想要的编码文字和段落标签文字斜体：,文字加粗：,下标：上标:⚠：只是斜体而已，更多表示强调！！！！！！⚠：...
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
html 表格单元格的宽度和高度的设置方法
12-11
详细地看了html中表格标签table的高度和宽度设置的细节，现总结如下：  1、table中的width和height设置及其作用：table中设置的height其实是设置个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会...
html的使用手册和一些表格总结元素
11-07
HTML的使用手册和一些表单的总结描述，更利于快速出入html和想做前端的同学们
jQuery表格插件datatables用法总结
12-10
这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。 官方网站及其下载地址：http:/www.datatables.net 当前最新版为1.10.2，读者可点此本站下载。 其主要特点如下： 1.自动...
html知识点实践经验总结
12-14
1. 表格标签是table，tr是行，td是单元格，cellspacing是单元格与单元格的距离 cellpadding是内边距，caption是表格的标题 colspan是合并列，rowspan是和并行，表格tbody 都是默认的。如果加多个tdody就可以解决页面...
HTML表格总结
pan303121的博客
10-31 947
前几次我们对HTML的基本进行了总结，今天就让我们进行HTML表格的总结。 表格使用的是table标签，其中最重要的就是需要知道thead---表头；tr---行，td---列
html制作表格
oLeKeLe的博客
10-08 234
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table,th,td{ border-collapse: collapse; ...
HTML——表单知识点总结
TKY666的博客
02-25 2084
表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮。
Html和Xml中注释符
dief913975849的专栏
09-21 1万+
XML的注释格式和HTML一样,都是以 作为注释方式，但是XML中有一些特殊的规定，如：  (1）在注释文本中不能出现字符 "- "或字符串 "-- "  (2)   不要把注释文本放在标记之中，类似地，不要把注释文本放在实体声明之中或之前。  (3)   注释不能被
html做表格（个人简历）
热门推荐
otatoz
07-30 3万+
首先要知道表格中的几个重要属性： align：让内容居中，取值为left、right、center border：设置表格的边框 cellspacing：单元格与单元格之间的距离 bgcolor：表格的背景色 colspan：跨列数 rowspan：跨行数 代码： <!DOCTYPE html> <html lang="en"> <head&...
HTML自我总结（二）--------列表页模板
qq_42906423的博客
09-24 588
HTML自我总结（二）简单列表页面展示 简单列表页面展示 代码 HTML： <div class="pricing-table"> <div class="col"> <div class="table"> <h2>Regular</h2> <div class...
html中表单使用总结
小白
10-26 1712
html中表单使用总结  1.表单的标准格式：                           其中method的值可以使get或者是post 区别在于get请求时，数据大小不能超过2k，同时请求的内容会出现在地址栏上。 post请求时，一般请求数据不能超过8M 但是可以通过设置加大。同时请求参数放在主体中，不会被看到。隐蔽性好。     action是请求的url路径。
table表格总结
http_lanan的博客
11-03 694
表格1.0 表格的定义:“table”标签 定义HTML表格。简单的HTML表格由table元素以及一个或多个“tr”“td”元素组成表格结构；其中：“tr”元素定义表格行，“td”元素定义表格单元。也可用border,colspan,rowspan,align,bgcolor来美化表格。 一.表格的标签。 标签 用处 table 定义表格 thead 定义表格的页眉 th 表格表头 tr 定义表格的行 td 定义表格单元格 tbody 定义表格主体 tfoot 定义
excel表格总结
qq_35324569的博客
09-05 711
1.字符串加双引号 A列是原内容 设一个B列，内容只输入一个双引号 C列输入工式：=$B$1&A1&$B$1或者=B1&A1&C1，就可以了 然后C列住下一拉，就都有了 注：C列是带公式的，此时如果删除B列，C列也乱套了，所以还要把C列复制。 在D列点右键：粘贴数值。 2.一列输入相同文字 3.WPS表格中,在一行或一列中不同的字前统一加上...
html表格后端数据填充，后端使用python
最新发布
09-16
### 回答1： 要在 HTML 表格中填充后端数据，可以...总结起来，我们可以通过后端使用Python来处理数据的获取和处理，并通过JavaScript和AJAX来与后端通信和操作HTML表格的DOM元素，从而实现后端数据填充到HTML表格中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值