CSS美化图像按钮及表格

一、设计图形按钮链接
使用css的background-image属性实现。
代码如下：

    注册

显示效果如下：

注册

二、美化表格
CSS为表格定义5个属性：border-collapse、border-spacing、caption-side、caption-cells、table-layout。

定义边框样式：

代码如下：

    
结构化表格标签
    

        

            
标签
说明
        
    
    

        

            
在表格中，上述标签为可选标签
        
    
    

        

            
⁢tbody>
定义表格主题结构
        
⁢tfoot>
定义表格的页脚结构
        
⁢thead>
定义表格的表头结构
        
    

效果图如下：

三、定义单元格间
在table中加border-spacing：20px.起到分隔单元格边框。

效果图如下：

四、定义标题位置
定义标题显示位置包括top位于表格上面、bottom位于表格底部

caption{
    caption-side: top;  /*头部显示*/
    font-size: 24px;   /*定义字体大小*/
    margin: 12px;   /*定义左右边界*/
    color: blue;   /*定义字体颜色*/
    font-weight: bold;  /*加粗显示*/
}

效果图显示如下：

五、隐藏空单元格
使用CSS的empty-cells属性可以设置空单元格是否显示。
属性值包括show、hide