表格&表格细线边框

1.常使用标签

2.表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定表格边框与其内容之间的距离，默认1像素
cellspacing	像素值	规定单元格之间的距离，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

3.合并单元格

合并单元格方式：

• 跨行合并：rowspan="合并单元格个数"
• 跨列合并：colspan="合并单元格个数"

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码。
• 跨列:  最左侧单元格为目标单元格，写合并代码。 

 

合并单元格三步曲：

1. 先确定是跨行还是跨列合并
2. 找到目标单元格，写上合并方式=合并的单元格数量，比如：
3. 删除多余的单元格

4.表格细线边框 

4.1 问题

当cellspacing设置为0像素时，单元格与单元格之间的距离是0像素，单元格之间的线条会重叠，导致边框变粗。

如图：

4.2 解决

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse;

• collapse单词是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起。 

5.小说排行表格

    
    


    

        

        

            
排名
            
关键词
            
趋势
            
进入搜索
            
最近七日
            
相关链接
        
        
        

        

            
1
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
2
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
3
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
4
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
5
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
6
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
7
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

    

 使用CSS的方式

    
    
    


    

        

        

            
排名
            
关键词
            
趋势
            
进入搜索
            
最近七日
            
相关链接
        
        
        

        

            
1
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
2
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
3
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
4
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
5
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
6
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科
        
        

            
7
            
鬼吹灯
            

            
456
            
123
            
 贴吧 图片 百科