css怎么设置表格样式？css设置表格样式的方法

一个简单的表格有时会感觉很单调，那么怎么给css表格加样式呢？本篇文章就给大家介绍关于css表格样式的设置方法。

1、一个简单的表格
table.html

    
    
    
  
  

      
课程表
        

            
星期\课程
            
星期一
            
星期二
            
星期三
            
星期四
            
星期五
      
      

            
1-2节
            
数学
            
语文
            
化学
            
英语
             
英语
      

      

            
3-4节
            
英语
            
物理
            
化学
            
英语
             
体育
      

      

            
5-6节
            
数学
            
物理
            
体育
            
化学
            
美术
      

      

            
7-8节
            
数学
            
美术
            
化学
            
英语
            
体育
      
      

            
9-10节
            
生物
            
美术
            
生物
            
英语
            
物理
      
    
  
  

table.css

WaStar 网上花店系统

系统特点： 商品多级分类检索、搜索，支持同一商品多重分类，自由设置显示式样 自由设置会员类型，自由设置权限项目，自由分配每种会员类型和每个会员的权限 灵活的商品定价，最多12级价格自由分配给各种会员类型或会员，也可针对单会员单商品特殊定价 强大的会员管理、帐户管理、订单管理功能和一系列帐务查询统计功能 灵活的会员积分系统，自由设置每个积分事件的积分计算方法 灵活的网站内容发布、管理系统，每个栏目可

下载

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

2、边框合并：boder-collapse
属性值：
separate;（分开，默认）
collapse;（合并）

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

3、边框间距border-spacing(前提是：border-collapse:separate;)

立即学习“前端免费学习笔记（深入）”；

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

4、设置表格标题的位置caption-side
属性值：
       top;//默认
       bottom;
       left;
       right;

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

5、当单元格对象宽度超过单元格所定义的宽度时，可用table-layout：fixed保持表格宽度不被改变
属性值：auto(默认)
       fixed(宽度固定)
table.css

table,td,th{
    border:1px solid #aaa;
        font-size: 23px;    
        border-collapse:separate;    
        border-spacing: 5px;    
        table-layout: fixed;    
        caption-side:top;
        }

相关推荐：

CSS控制表格样式_html/css_WEB-ITnose

精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose

Css基本样式表格的详细介绍