html标签-如何制作表格

表格标签

  • 表格标签:table
  • table中的行标签:tr
  • table中的列标签:td

table标签的属性

  • width:表格的宽度,值可以是具体的值,也可以是百分比

  • height:表格的高度,值可以是具体的值,也可以是百分比

  • border:表格的边框线的粗细

  • bgcolor:表格的背景色

  • align:设置表格的对齐方式,center表示居中,left表示居左,right表示居右

  • rulles=yes:表示合并边框线

  • cellpadding:设置单元格的边框线和内容之间的距离

  • cellspacing:设置单元与相邻的单元格的距离

tr标签的属性

  • bgcolor:设置这行的背景色

  • height:设置这行的高度

  • align:设置水平居中,center表示居中,left表示居左,right表示居右

  • valign:设置垂直居中,middle表示居中,top表示上,bottom表示下

td标签的属性

  • bgcolor:设置这列的背景色

  • height:设置这列的高度

  • align:设置水平居中,center表示居中,left表示居左,right表示居右

  • valign:设置垂直居中,middle表示居中,top表示上,bottom表示下

  • rowspan:上下合并单元格

  • colspan:左右合并单元格


案例1:创建一个三行五列的表格,设置边框为黑色线,1像素大小,实线 。





    


    


        
            
            
            
            
            
        
        
             
             
             
             
            
        
        
              
             
             
             
            
        
    
1-11-21-31-41-5
2-12-22-32-42-5
3-13-23-33-43-5


展示如下

html标签-如何制作表格_第1张图片

案例2:根据图中的表格写出对应的代码

html标签-如何制作表格_第2张图片

展示如下




    

    


                         //  ←这里为注释,不会展示出去
        
            
        

        
        


            
            
            
            
            
            
            
            
        

        
        


            
            
            
            
            
            
            
            
        

        
        


            
            
            
            
            
            
            
        


        
        


            
            
            
            
            
            
            
        


        
        


            
            
            
            
            
            
            
        

        
        


            
            
        


        
        


            
            
            
            
            
            
            
            
        

        
        


            
            
            
            
            
            
            
        


        
        


            
            
            
            
            
            
            
        


        
        


            
            
            
            
            
            
            
        

        
        


            
            
        

        
        


            
            
            
            
            
            
            
            
        

        
        


            
            
            
            
            
            
            
        

    

课 程 表
周一周二周三周四周五周六周日
上午语文语文语文语文语文语文语文
数学数学数学数学数学数学数学
数学数学数学数学数学数学数学
数学数学数学数学数学数学数学
午休11:30 ~ 13:30
下午语文语文语文语文语文语文语文
数学数学数学数学数学数学数学
数学数学数学数学数学数学数学
数学数学数学数学数学数学数学
晚餐17:00 ~ 18:00
晚自习晚自习晚自习晚自习晚自习晚自习晚自习晚自习
晚自习晚自习晚自习晚自习晚自习晚自习晚自习



你可能感兴趣的:(html,前端)