HTML用CSS定义talbe的样式

最新推荐文章于 2022-04-28 16:36:08 发布
最新推荐文章于 2022-04-28 16:36:08 发布
阅读量175 收藏
点赞数
分类专栏： 文档资料 嵌入式硬件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shjhuang/article/details/104783497
版权

如何自定义table的样式

先使用div包含，然后使用table -> td一层层定义

例如：

.div_dev_list{
	width:100%;
}

.div_dev_list table{
	width:100%;
}
.div_dev_list table td{
	width:20%;
	text-align:center;
}
<body>
	<div class="div_dev_list">
		<table>
		<td id="d1" bgcolor="#00FF00">
			<h3>温湿度1</h3>
			<font size="3">温度：</font><input type="text" id="d1sp1" value="25.5" class="spot_val_text"><br>
			<font size="3">湿度：</font><input type="text" id="d1sp2" value="85.0" class="spot_val_text"><br>
		</td>
		<td id="d2"  bgcolor="#FF0000">
			<h3>温湿度2</h3>
            <font size="3">温度：</font><input type="text" id="d2sp1" value="25.5" class="spot_val_text"><br>
			<font size="3">湿度：</font><input type="text" id="d2sp2" value="85.0" class="spot_val_text"><br>
		</td>
		<td id="d3"  bgcolor="#FF0000">
			<h3>温湿度3</h3>
            <font size="3">温度：</font><input type="text" id="d3sp1" value="25.5" class="spot_val_text"><br>
			<font size="3">湿度：</font><input type="text" id="d3sp2" value="85.0" class="spot_val_text"><br>
		</td>
		<td id="d4" bgcolor="#CCCCCC">
			<h3>UPS1</h3>
			<font size="3">电压：</font><input type="text" id="d4sp1" value="220" class="spot_val_text"><br>
			<font size="3">电流：</font><input type="text" id="d4sp2" value="15" class="spot_val_text"><br>
			<font size="3">频率：</font><input type="text" id="d4sp2" value="15" class="spot_val_text">
		</td>
		
		<td id="d5" bgcolor="#00FF00">
			<h3>UPS2</h3>
			<font size="3">电压：</font><input type="text" id="d5sp1" value="220" class="spot_val_text"><br>
			<font size="3">电流：</font><input type="text" id="d5sp2" value="15" class="spot_val_text"><br>
			<font size="3">频率：</font><input type="text" id="d5sp2" value="15" class="spot_val_text"><br>
		</td>
		</table>
	</div>
	<span  class="spanw"></span>
</body>

 

 

黄大刀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html+css实现温度计展示
08-11
html实现温度计展示，可以手动设置设计温度计的最高值和现在温度计的值。 最后展示出来的温度计是经过css美化过后的。
用css来定义table的样式
weixin_30432179的博客
03-27 124
div写多了，偶尔遇到table现在还觉得麻烦，又是边框，又是间距什么的，觉得定义太多，看看我遇到的一个table 代码如下： 以下为引用的内容： <table cellspacing="0" cellpadding="8" width="100%" bordercolor="#C4E2F...
php table表格样式,CSS中Table（表格）样式是如何设置？（代码实例）
weixin_36334361的博客
03-10 1829
本章给大家介绍CSS中Table(表格)样式是如何设置？(代码实例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、表格边框border 指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：table, th, td{border: 1px solid black;}请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独...
基于STM32开发板和Web网页的蔬菜大棚温湿度、光照等变化的动态柱形图表
jucksu的博客
04-28 4853
本项目基于STM32开发板，通过云平台的应用，在前端Web实现了简易的农业大棚监控系统。提出并设计了一种通过对大棚内农作物生长的环境信息（温度，湿度，光照强度）实时监测可视化，并可通过发送相关指令达到调控的系统，旨在为农作物的生长创造最适宜其生长的环境。
CSS3 自定义Table
司马懿的西山居
02-09 1978
<!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <style> body { font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 18px;
html纯css实现表格样式
01-04
本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。 表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...
html+css给单独某一表格定义样式示例
09-25
在这个示例中，我们将探讨如何使用 CSS 为特定的 HTML 表格定义样式，从而满足特定的显示需求。 首先，我们来看一下给出的代码片段： ```html <style type="text/css"> .title { font-size: 28px; font-weight:...
用CSS样式描述表格Table边框
09-25
在CSS中，对表格（Table）的边框进行样式化是网页设计中常见的任务，它可以帮助我们创建出具有视觉吸引力且结构清晰的表格。在给定的标题和描述中，主要涉及了如何通过CSS来单独定义表格的各个边框部分，以及如何...
纯css table 样式布局制作人口统计table表格样式代码
11-08
在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言，而表格（Table）则是组织数据的重要方式。本教程将详细讲解如何使用纯CSS来制作一个人口统计表格的样式布局。 首先，我们需要...
优雅的制作一个温湿度计图表
三角室专栏
07-08 3828
1.有的和想要的 有数据：有温度、有湿度 想要的：显示在页面某个位置 2.期望的优雅 期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。 3.来封装一个 3.1 先睹风采 使用以下方法即可完成图表显示。 Gauge.Hygrothermograph('gauge1', 28, 60); 效果如下： 3.2 使用方式 引入echart 和封装的 js ，即可使用 Gauge.Hyg...
温湿度采集系统
06-08
用zigbee和网页控制温湿度，物联网在线家居控制。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
css+js温度计的特效页面设计
06-29
温度计页面动画特效，jquery+css实现，方便调用，画面美观
react-温湿度检测react版本
08-15
本项目基于reactUI组件库实现。状态以及路由管理使用redux。UI样式使用了antd,css样式设置采用了mcss的写法。 本项目以前是用js以及一些js小型的框架完成的。
html 温湿度图形,温湿度智能监控系统
weixin_39961522的博客
06-09 1224
一、需求分析在大型的生产车间、广场、仓库等环境监测传感器的应用日益增大，尤其是温度和湿度两个数据的监测最为典型，随之而来的就是对检测数据的显示及统一的监控系统的产生。然而，目前的温湿度监控管理方法还存在一些问题：传统的温湿度管理处于人工、半人工状态，效率非常低，不能及时将采集到的信息反馈到管理系统;传统的采集技术指标低，精度不够;传统温湿度管理方法容易出现监控和管理脱节现象，延误时机，导致异常事件...
动态 Echarts 温湿度示意图 背景可以随温度变化
无线智能模块 可视DIY智能专家
07-22 2493
效果展示 源代码（h5） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 初始化移动浏览显示 --> <meta http-equiv="Content-Type" .
html中如何写温度,CSS温度计
weixin_34246598的博客
05-31 1151
css@import url("https://fonts.googleapis.com/css?family=Jaldi&display=swap");body {display: flex;height: 100vh;margin: 0;background: #3d3d44;font-family: 'Jaldi', sans-serif;font-size: 14px;color:...
ESP8266--温湿度在网页上显示
似水流年
02-12 1万+
前言  之前写过一篇Arduino–ESP8266–ESP-01学习笔记–连接WiFi、连接MQTT服务器、web显示获得了网友的很多关注，在那一个方案中使用Arduino+ESP8266+MQTT的方式把温湿度传感器的数据显示在网页上。现在，我将使用ESP8266+MQTT的方式将温湿度传感器的数据显示在网页上，这样就节省了一个MCU，而是把ESP8266当作MCU+WiFi。  需要了解的东西...
全国手机短信中心号码
热门推荐
shjhuang的专栏
11-08 2万+
全国手机短信中心号码，含电信
html中table美化,漂亮的css table样式
最新发布
06-07
可以通过CSS来美化HTML中的table，以下是一些常见的方法： 1. 使用表格样式类：可以在CSS中定义一些表格样式类，然后在table标签中应用该样式类。例如： ```css .table-style { border-collapse: collapse; width: 100%; font-size: 14px; } .table-style th, .table-style td { border: 1px solid #ccc; padding: 8px; text-align: left; } ``` 在HTML中使用： ```html <table class="table-style"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>小红</td> <td>18</td> <td>女</td> </tr> </tbody> </table> ``` 2. 使用CSS伪类：可以使用CSS伪类来实现一些特殊效果，例如： ```css .table-style2 { border-collapse: collapse; width: 100%; font-size: 14px; } .table-style2 th, .table-style2 td { border: 1px solid #ccc; padding: 8px; text-align: left; } .table-style2 tr:hover { background-color: #f5f5f5; } .table-style2 th { background-color: #f2f2f2; color: #666; } ``` 在HTML中使用： ```html <table class="table-style2"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>小红</td> <td>18</td> <td>女</td> </tr> </tbody> </table> ``` 以上两种方法只是其中的两种，具体可根据需求自行调整CSS样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

黄大刀

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

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

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

打赏作者

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

抵扣说明：

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

余额充值