HTML表格边框怎么添加_HTML表格border属性添加边框教程

推荐使用CSS的border属性结合border-collapse进行表格边框控制，通过外部样式表或类名实现颜色、粗细、样式的灵活设置，并可利用选择器或class为特定单元格定制边框。

HTML表格边框的添加，本质上就是利用CSS来控制

、
和
元素的边框样式。最直接的方法是使用
border
属性，但要获得更精细的控制，还需要结合CSS的其他属性。

直接输出解决方案即可：
方法一：使用HTML的
border
属性（已不推荐）

虽然不推荐，但为了完整性，先说一下。在
标签中直接添加
border
属性，例如：
立即学习“前端免费学习笔记（深入）”；

  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  
这种方法很简单，但控制力很弱，样式也很老旧。
方法二：使用CSS的
border
属性（推荐）

这是更灵活、更推荐的方法。使用CSS，你可以控制表格、表头和单元格的边框。


内联样式： 直接在HTML标签中使用
style
属性。

  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  
这种方式虽然简单，但不利于维护和复用。


内部样式表： 在
标签中使用





  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  



这种方式比内联样式好一些，但仍然不够灵活。


外部样式表： 创建一个独立的CSS文件（例如
style.css
），然后在HTML文件中引用。

style.css
文件内容：
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 设置表格宽度 */
}

th, td {
  border: 1px solid black;
  padding: 8px; /* 设置内边距 */
  text-align: left; /* 设置文本对齐方式 */
}
HTML文件：



  




  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  



这是最推荐的方式，便于维护和复用。

							

								
								

									Whimsical
									
Whimsical推出的AI思维导图工具
								
								下载 
							
						


方法三：使用CSS类
可以定义不同的CSS类来控制表格的边框样式，然后将这些类应用到不同的表格上。
CSS：
.bordered-table {
  border-collapse: collapse;
  width: 100%;
}

.bordered-table th, .bordered-table td {
  border: 2px solid red;
  padding: 8px;
  text-align: left;
}

.highlighted-cell {
  background-color: yellow;
}
HTML：

  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  
如何设置HTML表格边框颜色、粗细和样式？
使用CSS的
border
属性可以控制颜色、粗细和样式。


border-color
: 设置边框颜色，例如 
border-color: red;
border-width
: 设置边框粗细，例如 
border-width: 2px;
border-style
: 设置边框样式，例如 
border-style: solid;
，常用的样式包括 
solid
 (实线), 
dashed
 (虚线), 
dotted
 (点线), 
double
 (双线) 等。

例如：
table, th, td {
  border: 2px dashed blue; /* 2像素蓝色虚线边框 */
}
如何合并HTML表格的边框，避免双线边框？
使用CSS的
border-collapse
属性。将其设置为
collapse
可以合并相邻的边框。
table {
  border-collapse: collapse;
}
如果表格边框看起来还是有问题，检查一下是不是
th
和
td
也设置了边框，并且它们的
border-width
不一样。

如何为HTML表格的特定单元格设置不同的边框样式？
使用CSS选择器和类名可以为特定单元格设置不同的边框样式。


使用CSS选择器： 可以使用
:first-child
、
:last-child
、
:nth-child()
等选择器来选择特定的单元格。
td:first-child {
  border-left: 5px solid green; /* 第一列的左边框 */
}

td:last-child {
  border-right: 5px solid green; /* 最后一列的右边框 */
}

tr:nth-child(even) td {
  border-bottom: 2px dotted gray; /* 偶数行的单元格的下边框 */
}

使用类名：  为需要特殊样式的单元格添加类名，然后在CSS中定义这些类名的样式。
HTML:

  

    
表头1
    
表头2
  
  

    
数据1
    
数据2
  
CSS:
.special-border {
  border: 3px solid purple;
}

使用类名更灵活，也更易于维护。选择哪种方法取决于你的具体需求。
					
					

													

								
相关文章
							
							

																	
										
标题：解析 XPath 中 /html[2] 的含义与 HTML 文档结构规范
									
																	
										
如何为 HTML 表格的整列添加悬停背景色与平滑过渡效果
									
																	
										
JavaScript 中实现跨单词高亮子字符串的正则匹配方法
									
																	
										
如何在 VS Code 中通过 Emmet 自动为 HTML 同级元素添加空行
									
																	
										
如何在 VS Code 中自动为 HTML 同级元素间插入空行
									
															
													

							

								
								

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

								
相关标签:
								

									css html css选择器 red css html double class 选择器 样式表 border table td th								
							
						
						
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
						

													上一篇：HTML文档术语怎么定义_HTML术语定义标签使用
													下一篇：利用JavaScript动态显示图片Alt文本：一个交互式教程
												
					

					

													

								

									
 
										
作者最新文章
									
								
																	

										

											
												
冰火人游戏怎样同步两人技能释放_冰火人技能同步释放法【合击】
											
											

												
2026-01-15 09:14
											
										
								
																	

										

											
												
个人所得税APP忘记申报专项附加扣除咋办_个人所得税APP补申报专项附加扣除方法【教程】
											
											

												
2026-01-15 09:27
											
										
								
																	

										

											
												
幻塔莎乐迪值得抽吗-幻塔莎乐迪抽取建议
											
											

												
2026-01-15 09:39
											
										
								
																	

										

											
												
oppo手机开机黑屏无反应怎么修_oppo手机黑屏开机排解法【答疑】
											
											

												
2026-01-15 09:39
											
										
								
																	

										

											
												
米坛社区如何设置多账号切换 米坛社区切换入口与安全验证【方法】
											
											

												
2026-01-15 09:44
											
										
								
																	

										

											
												
2026年1月15日小鸡庄园答案 小鸡庄园今天答案最新
											
											

												
2026-01-15 09:51
											
										
								
																	

										

											
												
PHP如何开启短标签支持_PHP开启短标签操作方法【配置】
											
											

												
2026-01-15 09:57
											
										
								
																	

										

											
												
蚂蚁庄园小课堂2026年1月15日最新题目答案 蚂蚁庄园小课堂答案汇总
											
											

												
2026-01-15 09:58
											
										
								
																	

										

											
												
华硕路由器登录界面 192.168.1.1 华硕开启访客网络教程
											
											

												
2026-01-15 10:02
											
										
								
																	

										

											
												
deepin20系统蓝牙驱动怎么安装_deepin20蓝牙驱动安装检测与bluez问题解决
											
											

												
2026-01-15 10:03
											
										
								
															
						
						

							

								
 
									
热门AI工具
								
								更多
							

							

																	

										
											
											

												
DeepSeek
												
幻方量化公司旗下的开源大模型平台
																									

																												
AI大模型
																													
开放平台
																											
																							
										
									
																	

										
											
											

												
豆包大模型
												
字节跳动自主研发的一系列大型语言模型
																									

																												
AI大模型
																											
																							
										
									
																	

										
											
											

												
通义千问
												
阿里巴巴推出的全能AI助手
																									

																												
AI大模型
																											
																							
										
									
																	

										
											
											

												
腾讯元宝
												
腾讯混元平台推出的AI助手
																									

																												
文档处理
																													
Excel 表格
																											
																							
										
									
																	

										
											
											

												
文心一言
												
文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。
																									

																												
AI大模型
																													
中文写作
																											
																							
										
									
																	

										
											
											

												
讯飞写作
												
基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
																									

																												
中文写作
																													
写作工具
																											
																							
										
									
																	

										
											
											

												
即梦AI
												
一站式AI创作平台，免费AI图片和视频生成。
																									

																												
图片拼接
																													
图画生成
																											
																							
										
									
																	

										
											
											

												
ChatGPT
												
最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
																									

																												
AI大模型
																													
中文写作
																											
																							
										
									
																	

										
											
											

												
智谱清言 - 免费全能的AI助手
												
智谱清言 - 免费全能的AI助手
																									

																												
AI大模型
																													
PDF 文档
																											
																							
										
									
															




						

					


				


			
			

				

                    
                
				

					

						
 
							
相关专题
						
						更多
					
					

													

								
								

									css
									
css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。
									

										
 
											
522
										
										
 
											
2023.06.15
										
									
								
							
													

								
								

									css居中
									
css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。
									

										
 
											
262
										
										
 
											
2023.07.27
										
									
								
							
													

								
								

									css如何插入图片
									
cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面，使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。
									

										
 
											
753
										
										
 
											
2023.07.28
										
									
								
							
													

								
								

									css超出显示...
									
在CSS中，当文本内容超出容器的宽度或高度时，可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章，相关教程，供大家免费体验。
									

										
 
											
539
										
										
 
											
2023.08.01
										
									
								
							
													

								
								

									css字体颜色
									
CSS中，字体颜色可以通过属性color来设置，用于控制文本的前景色，字体颜色在网页设计中起到很重要的作用，具有以下表现作用：1、提升可读性；2、强调重点信息；3、营造氛围和美感；4、用于呈现品牌标识或与品牌形象相符的风格。
									

										
 
											
757
										
										
 
											
2023.08.10
										
									
								
							
													

								
								

									什么是css
									
CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页（或其他基于 XML 的文档）样式与布局的标记语言，CSS的作用和意义如下：1、分离样式和内容；2、页面加载速度优化；3、实现响应式设计；4、确保整个网站的风格和样式保持统一。
									

										
 
											
604
										
										
 
											
2023.08.10
										
									
								
							
													

								
								

									css三角形怎么写
									
CSS可以通过多种方式实现三角形形状，本专题为大家提供css三角形怎么写的相关教程，大家可以免费体验。
									

										
 
											
560
										
										
 
											
2023.08.21
										
									
								
							
													

								
								

									css设置文字颜色
									
CSS（层叠样式表）可以用于设置文字颜色，这样做有以下好处和优势：1、增加网页的可视化效果；2、突出显示某些重要的信息或关键字；3、增强品牌识别度；4、提高网页的可访问性；5、引起不同的情感共鸣。
									

										
 
											
389
										
										
 
											
2023.08.22
										
									
								
							
													

								
								

									Golang gRPC 服务开发与Protobuf实战
									
本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践，涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC（Unary/Server/Client/Bidirectional）、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例，帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系，适用于微服务与内部系统通信场景。
									

										
 
											
4
										
										
 
											
2026.01.15
										
									
								
							
											
				

				

					

						
 
							
热门下载
						
						更多
					
					

						

							
网站特效  
 /
							
网站源码 
 /
							
网站素材 
 /
							
前端模板 
						
						

															

									

										
										[表单按钮]html5用手机号码注册表单代码
									
								
															

									

										
										[文字特效]饮料瓶造型文字旋转特效
									
								
															

									

										
										[表单按钮]jQuery用户注册提示效果 jQuery用户注册提示效果网页特效
									
								
															

									

										
										[文字特效]jQuery和CSS3霓虹灯文字特效
									
								
															

									

										
										[图片特效]HTML5+CSS3响应式酷炫图片封面动画展示特效
									
								
															

									

										
										[表单按钮]html5表单注册进度条提示效果
									
								
															

									

										
										[图片特效]GSAP电商运动鞋图片展示切换代码
									
								
															

									

										
										[文字特效]CSS3动态数字翻转切换动画特效
									
								
															

									

										
										[表单按钮]jQuery关联店面查询表单代码
									
								
															

									

										
										[文字特效]基于canvas粒子文字动画特效
									
								
													
						

															

									

										
										[其它模板]思翔企(事)业单位文件柜 build 20080313 
									
								
															

									

										
										[企业站源码]雅龙智能装备工业设备类WordPress主题1.0 
									
								
															

									

										
										[电商源码]威发卡自动发卡系统 
									
								
															

									

										
										[电商源码]卡密分发系统 
									
								
															

									

										
										[电商源码]中华陶瓷网 
									
								
															

									

										
										[电商源码]简洁粉色食品公司网站 
									
								
															

									

										
										[电商源码]极速网店系统 
									
								
															

									

										
										[电商源码]淘宝妈妈_淘客推广系统 
									
								
															

									

										
										[电商源码]积客B2SCMS商城系统 
									
								
															

									

										
										[电商源码]CODEC2I 众筹系统 
									
								
													
						

															

									

										
										[网站素材]惬意午后咖啡阅读时光矢量插画 
									
								
															

									

										
										[网站素材]中国宏伟古建筑矢量素材 
									
								
															

									

										
										[网站素材]黑色星期五耳机折扣横幅设计下载 
									
								
															

									

										
										[网站素材]国潮风莲花荷塘插画矢量素材 
									
								
															

									

										
										[网站素材]假日快乐烟花背景ps素材下载 
									
								
															

									

										
										[网站素材]新春喜庆剪纸喜鹊窗花矢量素材 
									
								
															

									

										
										[网站素材]绿色生态梯田自然风景矢量素材 
									
								
															

									

										
										[网站素材]紫色风格2026折扣横幅海报设计下载 
									
								
															

									

										
										[网站素材]手绘烘焙甜点菜单矢量模板 
									
								
															

									

										
										[网站素材]电子数码产品超级促销海报设计下载 
									
								
													
						

															

									

										
										[前端模板]驾照考试驾校HTML5网站模板 
									
								
															

									

										
										[前端模板]驾照培训服务机构宣传网站模板 
									
								
															

									

										
										[前端模板]HTML5房地产公司宣传网站模板 
									
								
															

									

										
										[前端模板]新鲜有机肉类宣传网站模板 
									
								
															

									

										
										[前端模板]响应式天气预报宣传网站模板 
									
								
															

									

										
										[前端模板]房屋建筑维修公司网站CSS模板 
									
								
															

									

										
										[前端模板]响应式志愿者服务网站模板 
									
								
															

									

										
										[前端模板]创意T恤打印店网站HTML5模板 
									
								
															

									

										
										[前端模板]网页开发岗位简历作品展示网页模板 
									
								
															

									

										
										[前端模板]响应式人力资源机构宣传网站模板 
									
								
													
					
					

				

				

					
                



				

					

						
 
							
相关下载
						
						更多
					
					

											
php商城系统
											
淘源码商城PHP淘宝查信誉
											
PHP房产程序[BBWPS]
											
PHP简约自动发卡平台个人版
											
ERMEB域名PHP离线网络授权系统
											
Difeye-敏捷的轻量级PHP框架
											
大泉州汽车网PHP整站程序
										

				

				

					

						
 
							
精品课程
						
						更多
					
					

						

							
相关推荐  
 /
							
热门推荐 
 /
							
最新课程 
						
						

													

								
									
								
								

									Excel 教程

									

										
共162课时 | 11.8万人学习
									
								
							
													

								
									
								
								

									Bootstrap 5教程

									

										
共46课时 | 2.9万人学习
									
								
							
													

								
									
								
								

									AngularJS教程

									

										
共24课时 | 2.6万人学习
									
								
							
												

						

															

									
										
									
									

										JavaScript ES5基础线上课程教学

										

											
共6课时 | 7万人学习
										
									
								
															

									
										
									
									

										最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

										

											
共79课时 | 151.1万人学习
										
									
								
															

									
										
									
									

										phpStudy极速入门视频教程

										

											
共6课时 | 53.4万人学习
										
									
								
													

						

															

										
											
										
										

											最新Python教程 从入门到精通

											

												
共4课时 | 0.7万人学习
											
										
									
																

										
											
										
										

											JavaScript ES5基础线上课程教学

											

												
共6课时 | 7万人学习
											
										
									
																

										
											
										
										

											PHP新手语法线上课程教学

											

												
共13课时 | 0.9万人学习
											
										
									
														
						

					
				

				

					

						
 
							
最新文章
						
						更多
					
					

													
HTML5如何借助audio元素获取音频数据_HTML5音频取数法【简述】
													
如何在循环中为多个按钮绑定独立事件监听器并精准操作对应元素
													
如何正确加载外部 JavaScript 文件以实现聊天机器人功能
													
HTML5怎样利用PBKDF2派生密钥_HTML5PBKDF2密钥派生用法【科普】
													
HTML5怎样传递额外数据_HTML5传递额外数据方式【用法】
													
老旧浏览器HTML5如何卸_老旧浏览器卸HTML5办法【参考】
													
如何正确动态注入 JavaScript 并确保其响应页面加载事件
													
如何正确加载 JavaScript 文件以实现聊天机器人功能
													
如何让页脚中的自定义图标与 Bootstrap 图标垂直对齐
													
如何正确加载 JavaScript 文件以获取 HTML 元素值
											

				






			



		

	
	
	

    

        

            

                

                    

                        关于我们
                        免责申明
                        举报中心
                        意见反馈
                        讲师合作
                        广告合作
                        最新更新
                                                

                    
                    
php中文网：公益在线php培训，帮助PHP学习者快速成长！
                    

                      
                        关注服务号
                        
                          
微信扫码
关注PHP中文网服务号
                          
                        
                      
                        
                        技术交流群
                        
                          
QQ扫码
加入技术交流群
                          
                        
                      
                        

                    
                
                
            
            

                

                    
                    

                        
PHP中文网订阅号
                        
每天精选资源文章推送
                    
                
            
        
    
    

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

    











	
	
		
	
	

    

        

            

                
                    
                    
PHP学习
                
            
        
    
    

        

            

                
                    
                    
技术支持
                
            
        
    
    

        

            

                
                    
                    
返回顶部