好久不见    
    
    
，兄弟们
    
    
    
。我又回来继续更blog了！

博主主页：GUIDM

收入专栏：零基础HTML学习

一    
    
    
、表格

<table> <tr> <td></td> </tr> </table>

tr:行 td：列

<tr> <th></th> </tr>

th:表头单元格 


     


     


     ，内部文本加粗并居中显示     


     


     


。

表格<table>属性

border：定义线条的粗细

width：定义表格的总宽度

height：定义表格的总高度

cellspacing：定义单元格之间的距离

cellpadding：定义单元格边框和文本之间的距离

align：定义表格在页面中水平方向上的对齐方式

bgcolor：修饰表格的背景颜色

bordercolor：修饰表格的边框颜色

想让单元格之间的距离

 




 




 



，或者单元格与文本之间的距离变大   

   

   

，调整cellspacing和cellpadding即可 




 




 




 。 

表格行<tr>属性

height：设置表格行的高度（总高度不变）

bgcolor：背景颜色（一整行）

align：设置tr内部所有单元格内容的水平对齐方式

valign：设置tr内部所有单元格内容的垂直对齐方式

tr无宽度属性

单元格中默认的对齐方式：水平左侧对齐  

     

     

    ，垂直居中对齐

   

   

   
。 

单元格<td>属性

width：单元格宽度

height：单元格高度

bgcolor：单元格背景色

align：单元格里面内容的水平对齐方式

valign：单元格里面内容的垂直对齐方式 

调整任何单元格的高度/宽度


  




  




  


，都会影响该单元格所有列的所有单元格的高度/宽度     

     

     

。

 清除单元格之间的距离/单元格跟文本之间的距离：

<table border="1" width="500px" height="150px" cellspacing=0 cellpadding=0 align="center" > <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

单元格合并

rowspan：合并行

colspan：合并列

 可查看：合并案例

这个案例可以很好的了解如何使用合并

表格分组

表格标题：<caption></caption> 一般放在第一个<tr></tr>标签之前  




  




  




 。

表格头：<thead></thead>

表格体：<tbody></tbody>

表格尾：<tfoot></tfoot>

表格如果没有使用任何分组标签  


  


  


，浏览器在渲染时   
     
     
   ，会把table中所有未分组的tr放在一个tbody标签里


  


  


  
。

一个表格只允许使用一个thead和一个tfoot



   




   




   

，但允许使用多个tbody     
     
     
。

列分组标签：

<colgroup></colgroup>：把一列或连续的几列分成一组 



 



 



，经常用于表格一整列单元格的颜色   




   




   




 。

span属性：多少列为一组

bgcolor属性：背景颜色

二 


     


     


     、svg

svg标签是svg图形的一个容器（绘制图形的画布）



 



 



 
。

<svg></svg>

重要属性：

width：定义画布的宽度

height：定义画布的高度

形状元素：

矩形<rect/>

width:定义矩形的宽度

height：定义矩形的高度

fill：填充颜色

stroke-width：边框宽度

stroke：边框颜色

x：左边位置

y：顶部位置

fill-opacity：填充颜色的不透明度（0-1）

stroke-opacity：描边颜色的不透明度（0-1）

opacity：整个元素的不透明度（0-1）

<svg width="500px" height="500px"> <rect width="300px" height="200px" fill="green" stroke-width="2px" stroke="black" x="50" y=20/> </svg> 圆角矩形 

通过定义rx                ，ry属性




    




    




    
，同值为圆角














，不同值为椭圆               。

<svg width="500px" height="500px"> <rect width="300px" height="200px" fill="green" rx="50" ry="50"s/> </svg> svg width="500px" height="500px"> <rect width="300px" height="200px" fill="green" rx="50" ry="70"/> </svg> 圆<circle/> 

cx：定义圆形中心的x坐标

cy：定义圆形中心的y坐标

r：定义圆形的半径

stroke：边框颜色

stroke-width：边框宽度

fill：背景色填充 

<svg width="500px" height="500px"> <circle cx=100 cy=100 r=50 fill="yellow"/> </svg> 椭圆<ellipse/>

cx:圆心x坐标

cy：圆心y坐标

rx：水平半径

ry：水平半径

stroke：边框颜色

stroke-width：边框宽度

fill：背景色填充 

<svg width="500px" height="500px"> <ellipse cx=100 cy=100 rx=50 ry="60" fill="green"/> </svg> 线条<line/>

x1：起点x坐标

x2：结束x坐标

y1：起点y坐标

y2：结束y坐标

多边形 <polygon/>

points：图形每个点的坐标                ，至少三对坐标



     



     



     ，每对坐标用空格隔开    




    




    




 。

<svg width="500px" height="500px"> <polygon points="200,20 250,190 160,210"/> </svg> 多线条<polyline/>

points:2个以上的坐标















，一般用于折现的表现















。