web前端表格css三个t的使用(thead,tbody,tfoot)

其实从这三个词的翻译上,也可以知道他们的使用用途:

thead(表格头)tbody(表格主体)tfoot (表尾)

话不多说,先上效果图:
运行结果

具体使用看见代码演示:

<html>
<head>
<style type="text/css">            /* 下方表格的css文件,也可以自己写到一个css文件里,这里只设置了颜色,你也可以设置其它。*/
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body><table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot>
</table></body>
</html>

路漫漫求修远兮,吾将上下而求索。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428169.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue框架之条件与循环的使用

如果是初学者的话&#xff0c;这里先给你一个基础知识的框图&#xff0c;可以了解一下下面代码的由来。 也可以选择我这个链接Vue条件与循环跳转到Vue官网进行学习。 上面是Vue的一个简单案例&#xff0c;不要急&#xff0c;进阶版来了&#xff0c;通过这个框架应用到你的表格…

git连接jenkins_开普勒云平台:如何配置gitlab与Jenkins

一、Kplcloud是什么?kplcloud是一个基于Kubernetes的轻量级PaaS平台&#xff0c;通过可视化的界面对应用进行管理&#xff0c;降低应用容器化的对度&#xff0c;从而减少应用容器化的时间成本。Kplcloud已在宜信服务于宜人财富等多个团队&#xff0c;稳定运行了近两年&#xf…

Eclipse查找文件存储路径

1.打开Eclipse&#xff0c;去找导航栏 2.点击file 3.点击properties 4.即可看到存储路径 5.可以点击存储路径找到该文件在电脑的储存位置 从此上传作业&#xff0c;找不到文件位置不再是烦恼。

专业对不对口重要吗_应届生求职,专业对口到底重不重要?

18年&#xff0c;智联招聘发布的《2018年大学生求职指南》显示&#xff0c;近四成毕业生就业岗位和在校专业不对口。同时&#xff0c;LinkedIn&#xff08;领英&#xff09;通过调查15万份用户档案分析发现&#xff0c;第一份工作的专业对口比例&#xff0c;95后只有28.8%。&am…

Xml的使用

关于xml的学习入门&#xff0c;下面的就足够了 话不多说&#xff0c;先上图 主要注释已经附在了代码里&#xff1a; 这是独立执行的xml文件&#xff0c;未关联css和XSL文件&#xff0c;只会显示出一棵数据树。 至于详细的使用&#xff0c;我都附在了代码注释里&#xff0c;可以…

C++中的位运算

最近在刷天梯题的时候&#xff0c;发现了<<和>>这两个运算&#xff0c;刚见到的时候简直一脸懵逼&#xff0c;觉得自己很菜&#xff0c;经过自己查找资料&#xff0c;发现原来这两个小东西是位运算符呀。为加深自己的印象&#xff0c;总结如下: 话不多说&#xff0…

node 更新_被创造者嫌弃,Node.js 如何应对来自 Deno 的挑战

(给前端大全加星标&#xff0c;提升前端技能)转自&#xff1a;OSC开源社区JavaScript 运行时 Node.js 于日前更新到了 15 版本&#xff0c;该软件自发布至今已走过了 11 年的岁月。但在今年 5 月&#xff0c;其竞争对手 Deno 也发布了 1.0 版本。Deno 是一个 Javascript/TypeS…

L1-046 整除光棍 (20 分)

这道题的解题过程真是一波三折&#xff0c;也真是发现人外有人&#xff0c;天外有天&#xff0c;好多神人真是。 原题如下图&#xff0c;也可点击这个链接到原题自己测试光棍原题链接: 一开始做的时候的想法&#xff1a;so easy&#xff0c;虽然看到了题目中提示s可能超级大…

uci数据集_数据分析找不到数据集?快来看这个盘点

前言数据集相对于机器学习而言是至关重要的&#xff0c;可以说好的数据集是成功的一半。但是&#xff0c;我们很难找到一个特定的数据集来解决各种机器学习问题&#xff0c;甚至是进行实验。因而找到合适的数据集是一件很难的事情&#xff0c;接下来我们就盘点一下一些优质的数…

git保留两个repo的commit并进行合并

以往的合并时首先要删除repo的.git文件夹&#xff0c;然后重新add-commit-push。带来的问题是会丢失某一个仓库的提交信息&#xff0c;不利于时光倒退。经过摸索终于实现了保留两个仓库提交信息的合并方法。介绍如下&#xff1a; 比如要将DownloadPicsBySeleniumAndPhantomJS这…

安利一款编辑神器——Markdown

经常使用word或者那些浏览器自带编辑器的你可能会和我有时候遇到一样的烦恼&#xff0c;调整格式可真是不容易&#xff0c;如果你也有同样的烦恼&#xff0c;不妨可以试一下Markdown&#xff0c;值得你拥有哈。 Markdown的使用 1.安装使用篇 a.首先安装软件&#xff0c;然后创…

一个项目部署多个节点会导致锁失效么_Redis分布式锁

分布式锁在很多场景中是非常有用的原语&#xff0c; 不同的进程必须以独占资源的方式实现资源共享就是一个典型的例子。有很多分布式锁的库和描述怎么实现分布式锁管理器(DLM)的博客,但是每个库的实现方式都不太一样&#xff0c;很多库的实现方式为了简单降低了可靠性&#xff…

GIT_服务器与本地环境构建

linux安装git包 很多yum源上自动安装的git版本为1.7&#xff0c;这里手动编译重新安装1&#xff1a;安装依赖包yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker2&#xff1a;删除已有的gityum remove git3&#xff1a…

Maven项目的基本创建步骤

先来个自己笔记的图片备忘一下&#xff0c;如果以后有时间再慢慢更新详细。

visualvm远程监控jvm_大型企业JVM实战:优化及面试热点分析

本次课程的笔记非常多&#xff0c;而且内容已经整理了好几个小时了&#xff0c;接着下来内容也会更多&#xff0c;也是大型企业JVM性能调优实战的最后一节&#xff0c;希望对你有帮助&#xff01;04&#xff1a;JVM性能监控与故障处理工具 大型企业JVM性能调优实战之总结17&…

Markdown图片路径的改变方法

Markdown图片路径的改变方法 Markdown用时一时爽&#xff0c;路径一改火葬场 Markdown在占用内存少的优点的同时&#xff0c;也注定了图片的存储不会是占用内存&#xff0c;而是根据路径和链接链到md文件里的。 相信有不少人会像我一样在做完一个Markdown笔记后&#xff0c;在…

SROP

title: SROP date: 2018-02-21 19:58:12 categories: 栈溢出 tags: - CTF - PWN - 栈溢出 SROP全称为 Sigreturn Oriented Programming &#xff0c;表明利用sigreturn这个函数实现ROP的技术。 参考资料 http://www.freebuf.com/articles/network/87447.htmlhttp://bobao.360.c…

canvas绘制图像image

canvas绘制图像image 1.image的三个script的基本语法 准备工作:1.定义画布长度&#xff0c;获取2D绘图环境 ​ 2.建立对面对象&#xff0c;设置图片路径 ​ 3.载入图片&#xff0c;开始绘制 a.简单的画布上根据坐标绘制 ctx.drawImage(img,x,y) img为要绘制的图像&#…

根据时间戳生成编号_分布式系统的唯一ID生成算法对比

在复杂分布式系统中&#xff0c;往往需要对大量的数据和消息进行唯一标识。那么如何实现全局唯一id呢&#xff1f;有以下几种方案。(1)方案一&#xff1a;独立数据库自增id这个方案就是说你的系统每次要生成一个id&#xff0c;都是往一个独立库的一个独立表里插入一条没什么业务…

解决使用Servlet输出乱码问题(一行代码解决一切)

使用servlet接收表单数据后&#xff0c;输出出现了乱码&#xff0c;如下: 解决方法: 将下面这行代码粘到你重写的doGet或者doPost方法里就可以了。 response.setContentType("text/html;charsetutf-8");