CSS入门到精通——表格样式

最新推荐文章于 2025-04-20 15:01:44 发布
最新推荐文章于 2025-04-20 15:01:44 发布
阅读量1.1w 收藏 58
点赞数 14
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54327001/article/details/121943428
版权

第1关：表格边框

任务描述

本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下：

相关知识

为了完成本关任务，请大家认真阅读以下内容。

在之前的HTML教程中，我们学习了各类基本表格。

例如，下面网页代码的表格：

HTML 页面：

 

    
 
  1. <body>
    2. 
 
  2. <table width="400">
    3. 
 
  3. <!-- 表标题 -->
    4. 
 
  4. <caption>通讯录</caption>
    5. 
 
  5. <!-- 表头 -->
    6. 
 
  6. <tr>
    7. 
 
  7. <th scope="col">姓名</th>
    8. 
 
  8. <th scope="col">电话</th>
    9. 
 
  9. <th scope="col">备注</th>
    10. 
 
  10. </tr>
    11. 
 
  11. <tr>
    12. 
 
  12. <td>李雯</td>
    13. 
 
  13. <td>18012311234</td>
    14. 
 
  14. <td>家人</td>
    15. 
 
  15. </tr>
    16. 
 
  16. <tr>
    17. 
 
  17. <td>王谦</td>
    18. 
 
  18. <td>17812311234</td>
    19. 
 
  19. <td>同事</td>
    20. 
 
  20. </tr>
    21. 
 
  21. <tr>
    22. 
 
  22. <td>周佳</td>
    23. 
 
  23. <td>17413511234</td>
    24. 
 
  24. <td>高中同学</td>
    25. 
 
  25. </tr>
    26. 
 
  26. </table>
    27. 
 
  27. </body>
    28. 

 

显示效果如下：
 

 

表格边框
 

我们使用 border 属性为表格添加边框，这样HTML表格才会看起来更符合我们平时使用的表格。border属性值可以按顺序设置的属性为：border-width、border-style和border-color。一般情况下会省略属性名，直接设置属性值。
 

其中，border-style可以取如下四种值：
 

    
 
  •  
    dotted: 点状；
     
    • 
 
  •  
    solid: 实线；
     
    • 
 
  •  
    double: 双线；
     
    • 
 
  •  
    dashed: 虚线。
     
    • 

 

例如，对上面的通讯录表格应用如下样式：
 

 

    
 
  1. th,
    2. 
 
  2. td {
   
    3. 
 
  3. border: 1px solid #000; /*设置边框1px粗的黑色实线*/
    4. 
 
  4. 


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
CSS从入门到精通——盒模型

				
			

			

				

					SOLDIER_ON的博客
				

				

					11-11
					
					3051
					
				

			

		

		

			
				
盒模型(Box Model)，是CSS中重要的基础之一。浏览器在对文档进行布局时，会根据CSS盒模型将所有元素，表示为一个矩形。换句话说，每个元素都是一个盒子。盒模型描述了元素所占空间的内容。每个盒子有四个边：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。图片表示盒模型，如下：基础实例内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。内边距(Padding) 是指内容周围的区域，内边距默认是透明的。

			
		

	



                

            
              



	

		

			

				
					
CSS 样式化表格：从基础到高级技巧

				
			

			

				

					engchina的专栏
				

				

					01-31
					
					1461
					
				

			

		

		

			
				
CSS 样式化表格：从基础到高级技巧

			
		

	



              


  
              

                


	

		

			

				
					
【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠

				
			

			

				

					RToax
				

				

					01-08
					
					383
					
				

			

		

		

			
				
目录

初始表格

边距、居中、边框

单元格边距cellspacing

边距折叠（两个叠加不会变粗）border-collapse:collapse;

单元格边距border-spacing

初始表格



&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xht...

			
		

	





	

		

			

				
					
CSS--头歌（educoder）实训作业题目及答案

					
热门推荐

				
			

			

				

					qq_35353972的博客
				

				

					10-09
					
					3万+
					
				

			

		

		

			
				
CSS--头歌（educoder）实训作业题目及答案

			
		

	



		

			
		



	

		

			

				
					
CSS中的列表样式和表格样式

					
最新发布

				
			

			

				

					2302_82146345的博客
				

				

					04-20
					
					730
					
				

			

		

		

			
				
ordered-list  使用大写罗马数字作为列表项标记，并且尝试使用自定义图像作为标记（如果图像路径正确）。/* 使用自定义图像作为标记 *//* 使用自定义图像作为标记 */list-style-type: upper-roman;在这个示例中， .image-list  使用自定义图像作为列表项标记，并且标记位于列表项外部。/* 标记在列表项外部 *//* 标记在列表项内部 */.unordered-list  使用实心方块作为列表项标记，并且标记位于列表项内部。/* 使用实心方块作为标记 */

			
		

	





	

		

			

				
					
一些漂亮的CSS表格样式

				
			

			

				

					07-28
				

			

		

		

			
				
一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!

			
		

	





	

		

			

				
					
CSS表格样式

				
			

			

				

					xiangxiongfly
				

				

					07-21
					
					1万+
					
				

			

		

		

			
				
CSS表格样式
caption-side 标题位置
border-collapse 边框合并
border-spacing 边框间距
css样式（推荐使用）

			
		

	





	

		

			

				
					
零基础CSS入门教程(17)–表格样式

				
			

			

				

					程序员大阳
				

				

					10-30
					
					6852
					
				

			

		

		

			
				
点此查看全部文字教程、视频教程、源代码
本文目录1. 题外话2. 前言3. HTML表格边框4. CSS设定表格边框5. 设定列边框6. 折叠边框7. 表格尺寸8. 表格内边距9. 表格背景色10. 小结
1. 题外话
不知不觉，写到第40篇了。
可能已经是我写过的最长的系列文章了，虽然质量有时比较好，有时比较差，但我总体对该系列文章比较满意。
因为它寄托了我的心思，也帮我在达成目标的路上，一点一滴的前进。
如果说目标是什么，就是为热爱计算机专业、热爱计算机技术的初学者，特别是我的学生，提供一个渠道。我们在

			
		

	





	

		

			

				
					
CSS基础--设置表格样式和表单样式

				
			

			

				

					2401_85545586的博客
				

				

					10-09
					
					1915
					
				

			

		

		

			
				
参数：sparate为默认值表示边框分开不合并，collapse表示边框合并，即如果两个边框相邻则共用同一个边框。用于设置表格的边框是合并成单边框，还是分别有各自的边框。： cursor:pointer可设置鼠标悬停时变手指。CSS--使用CSS修饰页面外观。

			
		

	





	

		

			

				
					
CSS从入门到精通——表格样式

				
			

			

				

					11-05
				

			

		

		

			
				
CSS（层叠样式表）中的表格样式主要用于控制网页中的数据展示，使表格看起来更专业和易读。以下是基本的表格样式步骤：  1. **基本结构**：  开始一个HTML表格标签 `<table>`，包含 `<tr>` (行) 和 `<td>` 或 `<th>`...

			
		

	





	

		

			

				
					
CSS实现的清爽、漂亮的表格样式分享

				
			

			

				

					09-25
				

			

		

		

			
				
主要介绍了用CSS美化后的表格样式，看起来非常的柔和、舒服、清爽,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Educoder：CSS从入门到精通——文本与字体样式

				
			

			

				

					QingNiaoJun的博客
				

				

					04-06
					
					3305
					
				

			

		

		

			
				
目录：第1关：字体颜色、类型与大小第2关：字体粗细与风格第3关：文本装饰与文本布局
第1关：字体颜色、类型与大小
本关任务
本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下：

参考答案
body {
    /*背景渐变*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right

			
		

	





	

		

			

				
					
CSS 基础教程：表格（一）

				
			

			

				

					m0_65012566的博客
				

				

					05-14
					
					1283
					
				

			

		

		

			
				
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。

			
		

	





	

		

			

				
					
CSS学习13：表格样式

				
			

			

				

					Blog of Lytracy
				

				

					07-20
					
					1196
					
				

			

		

		

			
				
文章目录1、表格边框2、折叠边框3、表格的宽度和高度4、表格的对齐方式5、表格内边距6、表格颜色7、表格标题位置8、表格综合案例
我们前面已经学习了如何制作表格，现在我们来讲讲表格的一些样式，让我们的表格更加美观。
1、表格边框
同样使用 border 属性为表格设置边框。
table,
th,
td {
  border: 2px solid red;
}

2、折叠边框
使用 border-collapse 属性设置是否将表格边框折叠为单一边框。
table {
  border-collapse: c

			
		

	





	

		

			

				
					
CSS中表格介绍，表格相关的样式以及长表格的使用

				
			

			

				

					王春燕的博客
				

				

					04-13
					
					974
					
				

			

		

		

			
				
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格

一：创建表格

在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

rowspan用来设置纵向的合并单元格

colspan横向的合并单元格


<!DOCTYPE html>
<html&gt

			
		

	





	

		

			

				
					
css表格样式

				
			

			

				

					qq_45122293的博客
				

				

					02-03
					
					155
					
				

			

		

		

			
				
width,height属性（设置表格的宽和高，单位像素）

table{
			width:300px;
			height:400px;
	}


border属性（设置边框）

/*将表格、每列、标题的边框设置为宽度1个像素，实线，颜色为#EEEEEE(也可以写成#EEE,rgb的三个值分别用两个16进制数表示，两个16进制数相同时可省略一个)*/
		table,th,td{
			bo...

			
		

	





	

		

			

				
					
CSS——＞表格样式

				
			

			

				

					qq_55016379的博客
				

				

					06-06
					
					351
					
				

			

		

		

			
				
表格样式
表格标题位置：caption-side
语法结构：
caption-side:取值;

属性：




属性值
说明




top
标题在顶部（默认值）


bottom
标题在底部


代码实例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格样式</title>
		<style type="text/css">
			t

			
		

	





	

		

			

				
					
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.7 表格的结构

				
			

			

				

					weixin_34189116的博客
				

				

					05-02
					
					112
					
				

			

		

		

			
				
本节书摘来自异步社区《HTML、CSS、JavaScript 网页制作从入门到精通》一书中的第6章，第6.7节，作者：【美】John Resig（莱西格） , Bear Bibeault（贝比奥特) 译者： 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。
6.7 表格的结构
还有一些标记是用来表示表格结构的，包括表首标记< thead ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值