微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > html教程 > 正文

html中table为每个单元格设置不同颜色和宽度的示例

高洛峰
发布： 2017-03-04 15:30:24
原创
1775人浏览过

最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下 建议最好不要在table里面直接设置宽度，高度等，经常会出现设置的并没有生效的情况，

而如果是在style里面添加设置，就不会有问题，代码直接拷贝到body中间即可使用。 

代码如下:

<table cellspacing="0" style="color:#FFF; text-align:left; font-size:14px; font-weight:bold; margin-left:220px; width:980px; height:200px;text-align:center"> 
<tr > 
<td bgcolor="e91e6f"; style=" width:196px;">01</td> 
<td bgcolor="224071"; style=" width:196px;">02</td> 
<td bgcolor="f12339"; style=" width:196px;">03 </td> 
<td bgcolor="1ea27e"; style=" width:196px;">04</td> 
<td bgcolor="224071"; style=" width:196px;">05</td> 
</tr> 
<tr> 
<td bgcolor="1ea27e">06</td> 
<td bgcolor="e91e6f">07</td> 
<td bgcolor="224071">08</td> 
<td bgcolor="f12339">09 </td> 
<td bgcolor="1ea27e">10</td> 
</tr> 
<tr> 
<td bgcolor="e91e6f">11</td> 
<td bgcolor="224071">12</td> 
<td bgcolor="f12339">13</td> 
<td bgcolor="1ea27e">14 </td> 
<td bgcolor="224071">15</td> 
</tr> 
<tr> 
<td bgcolor="1ea27e">16</td> 
<td bgcolor="e91e6f">17</td> 
<td bgcolor="224071">18</td> 
<td bgcolor="f12339"></td> 
<td bgcolor="1ea27e"></td> 
</tr> 
</table>
登录后复制


效果图：

更多html中table为每个单元格设置不同颜色和宽度的示例相关文章请关注PHP中文网！

芦笋演示
芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

芦笋演示 34
查看详情 芦笋演示

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：html option禁用选择select禁用选项介绍 下一篇：HTML弹出透明层事例大小可以设置也可以比例化的详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何查看本地html_本地HTML文件（浏览器/编辑器）打开与查看方法 使用浏览器或代码编辑器可快速查看本地HTML文件。1.拖拽文件到Chrome等浏览器窗口即可加载；2.右键选择“打开方式”并指定浏览器；3.通过浏览器菜单“文件→打开文件”浏览选择；4.使用VSCode等编辑器打开并编辑，配合LiveServer插件实现自动刷新；注意文件扩展名为.html或.htm，确保外部资源路径正确，部分功能需本地服务器环境支持。
2025-11-05 23:41:34
406
怎么编辑html5_HTML5代码编辑器选择与开发环境配置 选择合适编辑器如VisualStudioCode、SublimeText等可提升HTML5开发效率；2.搭建基础环境需创建项目文件夹并配置本地服务器；3.合理设置编辑器功能与插件能优化编码体验。
2025-11-05 23:37:33
721
网页滚动条hover效果怎么设置_html滚动条悬停效果实现教程 通过CSS自定义滚动条并利用:hover实现悬停效果，使用::-webkit-scrollbar等伪元素设置样式，并结合容器的hover状态改变滑块颜色或宽度，推荐应用于特定容器以提升用户体验。
2025-11-05 23:35:02
834
如何远程访问html_HTML页面（公网IP/端口映射）远程访问方法 首先确保本地服务正常运行，使用Python命令启动服务器并访问localhost测试；接着获取本机局域网IP，在局域网内其他设备通过IP:端口访问验证；然后配置路由器端口转发，将外部端口映射到本机IP和内部端口；最后确认公网IP并让外网用户通过公网IP加端口访问，若IP动态可结合DDNS服务实现稳定访问。
2025-11-05 23:25:31
115
如何修改网页滚动条颜色_html滚动条颜色修改方法与代码示例 可通过CSS自定义滚动条颜色，主要支持Webkit内核浏览器，使用::-webkit-scrollbar等伪元素设置宽度、轨道、滑块样式，并建议结合JavaScript插件实现跨浏览器兼容。
2025-11-05 23:24:02
968
html 如何固定表格_HTML表格固定表头/列（position:sticky）方法 通过CSS的position:sticky可实现表格表头和列的固定。首先为thead中的单元格设置sticky和top:0以固定表头，并确保父容器无overflow:hidden；其次为左侧列单元格设置sticky和left值（如left:0或累积宽度）以实现列固定，建议添加背景色提升可读性；当同时固定表头和列时，表头单元格需同时设top和left，tbody中固定列仅设left，并注意z-index与浏览器兼容性问题。
2025-11-05 23:07:27
878
html 颜色如何透明_HTML颜色透明（rgba/opacity）设置方法 使用RGBA或opacity可调整网页颜色透明度。RGBA通过red、green、blue和alpha值（0-1）定义带透明度的颜色，适用于背景、文字和边框，如background-color:rgba(255,0,0,0.5)实现半透明红色；而opacity属性设置整个元素及其子元素的透明度，如opacity:0.6使元素整体60%不透明，但会影响所有内部内容。为实现背景透明而内容不透明，推荐用RGBA设置背景色，避免降低文本可读性，并在兼容旧浏览器时使用filter作为降级方案。
2025-11-05 23:00:02
792
CSS样式表怎么链接到HTML_CSS样式表链接到HTML的操作流程 首先检查CSS是否正确链接，再按需选择外部、内部或内联样式方法；外部通过link标签引入独立CSS文件，内部在head中使用style标签定义，内联则直接在元素上添加style属性。
2025-11-05 22:55:08
945
HTML5代码如何管理模块化 HTML5代码中ES6模块的导入导出 在HTML5中使用ES6模块需在script标签添加type="module"属性，通过export和import实现代码的模块化管理，支持命名导出、默认导出及混合导入方式，模块默认启用严格模式且不污染全局作用域，导入时需使用完整路径包括扩展名，本地测试需通过服务器运行以避免CORS问题。
2025-11-05 22:42:02
663
html 如何停止动画_HTML动画停止（animation-play-state）控制方法 animation-play-state属性可控制CSS动画的播放与暂停，其值为running或paused。通过JavaScript或CSS类动态切换该属性，能实现鼠标悬停等交互场景下的动画暂停与恢复，操作简单高效。
2025-11-05 22:38:02
337
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部