HTML表格样式

news2025/1/24 14:44:54

9675人阅读

行跟列背景颜色的选择,合并等

列的颜色选择代码

 

<colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col> </colgroup> <colgroup span="1" bgcolor="cyan"></colgroup>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNjU0,size_16,color_FFFFFF,t_70
行跟列的合并代码

 

<th colspan="2" rowspan="2">操作</th> <td colspan="2">平均:</td>

  • 1
  • 2

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNjU0,size_16,color_FFFFFF,t_70
watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNjU0,size_16,color_FFFFFF,t_70

 

<!DOCTYPE html> <html> <style type="text/css"> td{ text-align:center; } a{ text-decoration: none; } img{ width: 25px;height:25px; border-radius: 50%; align="left"; } </style> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <!-- <strong></strong> <em></em> <pre></pre>格式化原样式输出 --> <br><br> <table border="1" cellspacing="0" cellpadding="5" align="center" width="40%"> <caption><strong>明星排行榜</strong> <a href="">添加</a></caption> <!-- <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col> </colgroup> <colgroup span="1" bgcolor="cyan"></colgroup> --> <!-- thead,tbody,tfoot表格的分区 --> <tr bgcolor="skyblue"> <th colspan="2">信息</th> <th colspan="3">三围</th> <th colspan="2" rowspan="2">操作</th> </tr> <tr bgcolor="skyblue"> <th>ID</th> <th>姓名</th> <th>腰围</th> <th>胸围</th> <th>臀围</th> </tr> <tr> <td>01</td> <td><img src="./images/3.png" align="left">波多</td> <td>88</td> <td>59</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr> <td>02</td> <td ><img src="./images/3.png" align="left">玛利亚</td> <td>88</td> <td>59</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr> <td>03</td> <td><img src="./images/3.png" align="left">浅川梨奈</td> <td>88</td> <td>59</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr> <td>04</td> <td><img src="./images/3.png" align="left">苍老师</td> <td>88</td> <td>59</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <!-- <tbody> <tr bgcolor="lightyellow"> <td colspan="2">平均:</td> <td>88</td> <td>59</td> <td>85</td> </tr> </tbody> --> </table> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">...</a> <a href="">下一页</a> <a href="">尾页</a> </p> </body> </html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103

html

来自专栏

前端

resize,m_fixed,h_64,w_64 志男 15篇文章  0人订阅

pointRight.png

发布于2020-06-10著作权归作者所有

相关推荐更多arrowRight.png

漂亮表格css+html

spadgerice 0 下载

html 好看表格样式,简单但是好看表格样式

weixin_39521651 1534 阅读  0 评论

html表格边框空心,各种表格样式示例及代码

文韬菌 877 阅读  0 评论

热门推荐 【表格样式】——HTML制作表格大全

数据的流 10万+ 阅读  1 评论

如何使用 CSS 设置 HTML 表格样式

allway2 2938 阅读  0 评论

HTML表格以及对表格样式处理

一碗周. 4218 阅读  1 评论

1c11b33d5aa846098c1fb4989c98a12c.png

HTML——表格基本样式_iheyu博客_表格html 表格样式

1.在页面里面做表格用——> <table></table>——>在页面表格是怎么定义——>表格组成元素是行——> <tr></tr> ——>把一行分成了若干单元格——>标题标签——> <th></th>——> 内容标签——><td></td>; 2.表格...

html表格以及常用CSS样式_丨Q ,Q丨博客

二.表格常用CSS样式 boder-spacing : 数值; 用来设置边框距离 bordr-collapse : collapse; 用来设置边框合并 如果设置了border-collapse,boder-spacing失效 使用伪元素设置隔行变色 tr:nth-child(even){ ...

html表格展开格式,4款简单常见纯CSS表格(table)样式

本文介绍4款简单常见纯CSS表格(table)样式。 1、默认表格(default table) 添加pure-table类样式表格, 此类向表元素添加填充(padding)和边框(borders),并使表头突出。 默认表格 html代码html> ...

漂亮html表格页面模板,四款好看实用CSS表格样式分享

1. 单像素边框CSS表格 这是一个简单但是常用表格样式。 源代码: 实例 table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse...

html基本样式表格_ammzsthl博客

html基本样式表格 1.类选择器(.clase) 通过给标签元素起一个classname类名方式 在编写样式时 用类名来获取该元素 2.id选择器(#id) 给元素期一个id名 用来获取该元素设置样式时候使用 一个元素 可以同时有id名和类名...

html表格内文本样式,HTML表格和表单简单构造和样式

现在一般网页上都有表单,也有表格,但是少。 表格 在HTML网页上建立表格需要有 表格标签 表格内标题、表格内内容、 rowspan和colspan是表格跨行跨列属性,其中rowspan是跨行,colspan是跨列。

html表格怎么设置样式,html 静态表格样式设置

weixin_39637545 1993 阅读  0 评论

最新发布 html表格··表格样式··长表格

乱凌曦彧 148 阅读  0 评论

a5fe055cfa4640b7be0c61042a5cec93.png

html表格基础知识及源代码-尚硅谷

小付学前端 460 阅读  0 评论

HTML表格样式有哪些,HTML表格属性有哪些?

寿文彬战略咨询 437 阅读  0 评论

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

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

相关文章

一大波 ChatGPT 开源项目,诞生了!

公众号关注 “GitHubDaily”设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01;大家好&#xff0c;我是小 G。本月初 ChatGPT 问世&#xff0c;犹如平地惊雷般&#xff0c;在技术圈中引起了广泛讨论。作为全球最大的开发者社区&#xff0c;GitHub 平台也在近期诞生了多个…

Ant vue中表单验证(动态校验、部分校验)

前提&#xff1a;写了超级复杂的表单&#xff0c;其中涉及了很多表单验证的地方&#xff0c;现一一记录一下&#xff1b; ant-vue 版本1.7.8 vue 版本2.6.11 校验的原理大体相似&#xff0c;灵活应用&#xff01;&#xff01; 1.动态校验 需求&#xff1a; 1根据读写方式去动态…

Css display 属性详解

css display - 块和内联元素 块级元素(block)块元素是一个元素&#xff0c;占用了全部宽度&#xff0c;在前后都是换行符;总是独占一行&#xff0c;表现为另起一行开始&#xff0c;而且其后的元素也必须另起一行显示内联元素(inline)内联元素只需要必要的宽度&#xff0c;不强…

react简单入门--常用hook中useMemo的使用(详细版)

前言&#xff1a; 作用&#xff1a; 首先useMemo它使用来做缓存用的&#xff0c;只有当一个依赖项改变的时候才会发生变化&#xff0c;否则拿缓存的值&#xff0c;就不用在每次渲染的时候再做计算 场景&#xff1a; 既然是用作缓存来用&#xff0c;那场景就可能有&#xff1a…

vue3的bpmn使用

目录 1.前言 2.安装相关依赖 3.组件部分的template部分 4.组件中的script 5.style代码 6.父组件中的使用场景 7.注意事项 1.前言 由于此次处于自己做项目阶段&#xff0c;基本上只要项目中需要使用到流程这一方面的东西&#xff0c;就需要用到bpmn以及后端的activity流…

VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学

目录 1. 概述 2. render 函数 3. 综述 4. 个人公众号 1. 概述 老话说的好&#xff1a;不用想的太多、太远&#xff0c;做好当天的事&#xff0c;知道明天要做什么就可以了。 言归正传&#xff0c;今天我们来聊聊 VUE 中 render 函数的使用。 2. render 函数 2.1 一个简单…

前缀和与对数器与二分法

1. 前缀和 假设有一个数组&#xff0c;我们想大量频繁的去访问L到R这个区间的和&#xff0c;我们该怎么快速的得出。 如果我们每次都遍历一遍累加这样就太慢了。我们可以开辟一个数组&#xff0c;把每个位置的和加在一起存进去。 如果我们要找的L到R中&#xff0c;L是0。那么…

Echarts地图的基本使用方法

echarts使用地图的基本使用方法 引入echarts 第一步&#xff1a;引入js文件 下载的最新完整版本 echarts.min.js 即可 <script src"echarts.min.js"> </script>第二步&#xff1a;指定DOM元素作为图表容器 创建一个DOM来作为绘制图表的容器 <di…

理解vuex实现的原理

一、vuex是什么&#xff1f; Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c; 这个状态管理应用包含以下几个部分&#xff1a; state&#xff0c;驱动应用的数据源&#xff1b;view&#xff0c;以声明方式将 stat…

【工具】Vue中生成二维码组件——vue-qr

【工具】Vue中生成二维码组件——vue-qr npm地址——https://www.npmjs.com/package/vue-qr 注&#xff1a;不支持IE浏览器 效果 1、安包 npm install vue-qr --save 2、引入 // vue2.0 import VueQr from vue-qr // vue3.0 import VueQr from vue-qr/src/packages/vue-qr.…

3分钟搞懂阿里云服务器安装Nginx并配置静态访问页面

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【Bug 终结者】 &#xff0c;【CSDN新星创作者】&#x1f3c6;&#xff0c;阿里云技术博主&#x1f3c6;&#xff0c;51CTO人气博主&#x1f3c6;&…

怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)

该案例为了实现效果采用的是随机生成数据&#xff0c;比较适用于偏向展示效果的静态页面如门户网站的首页、登录页等等。颜色样式自调。 需要注意在有些项目中仪表盘可能无法正常显示&#xff0c;这是因为你在项目中引入的 echarts 版本太低&#xff0c;需要引入新版本 echarts…

一个简单的springboot+Vue前后端框架搭建

前言 根据网上的一些教程试着搭建了一个简单的前后端分离的用户管理系统。该系统使用Vue框架编写前端代码&#xff0c;Springboot编写后端代码&#xff0c;Mysql作为数据库存储系统的数据。本文着重介绍整个项目的搭建流程以及附加一些在搭建过程的想法和注意事项。 一、Vue及…

【vue+router】解决路由重复警告:[vue-router] Duplicate named routes definition

vue页面动态添加路由&#xff0c;但加载页面会报警告&#xff1a; [vue-router] Duplicate named routes definition: { name: "xxx", path: "xxx" }这个问题解释为&#xff1a;路由命名重复 网上有一些大神剔除原有路由的做法&#xff1a; 1、古墩古墩 …

vue中computed的详细讲解

vue中computed的详细讲解1.定义2.用法3.computed的响应式依赖(缓存)4.应用场景1.定义 computed是vue的计算属性&#xff0c;是根据依赖关系进行缓存的计算&#xff0c;只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下&#xff0c;computed默认使用的是getter属性…

Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录[TOC](文章目录)前言一、props是什么&#xff1f;使用规则二、父传子 props实现步骤代码实现效果展示二.子传父 $emit实现步骤代码实现效果展示三.兄弟传值 EventBus实现步骤代码实现效果展示总结前言 Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆…

CSS - 浮动布局(float)

目录 标准布局 标准流 浮动与浮动流&#xff0c;及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题&#xff1a;标准流父级容器高度塌陷 清除浮动 浮动布局 margin负值 标准布局 CSS将所有的元素都当成盒子&#xff0c;CSS布局其实就是如何堆放盒子。 在说浮动布局…

【玩转CSS】学成在线(文末素材源码自取)

&#x1f525;一个人走得远了&#xff0c;就会忘记自己为了什么而出发&#xff0c;希望你可以不忘初心&#xff0c;不要随波逐流&#xff0c;一直走下去&#x1f3b6; &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; &#x1f984; …

vue监听缓存数据(localStorage) 中值的更新

2个vue组件之间数据同步&#xff0c;可以通过监听localStorage数据变化&#xff0c;来改变数据的值。 方法&#xff1a;可以重写localStorage的setItem方法&#xff0c;当调用setItem方法设置新值的时候&#xff0c;会new Event(setItemEvent) 用window.dispatchEvent()这个…

vue 项目兼容 IE 浏览器

前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置 因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置 可以根据自己的 vue-cli 版…