css-table 布局

<table width="600px" align="center" border="0" cellspacing="0" cellpadding="0" >

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

</table>

 

等价地,用css

<table class="table-1">

<tr>

    <td></td>

</tr>

</table>

 

其中,css定义如下

.table-1{

    width:600px;

    border-collapse:collapse;

    margin:auto;

}

 

另外,table的其他css定义如下:

 

 

border-collapse

语法:
border-collapse : separate | collapse
 
参数:
 
separate :  边框独立(标准HTML)
rtl :  相邻边被合并

 


 

border-spacing


 
语法:
 
border-spacing : length || length
 
参数:
 
length :  由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
 
 
示例:
 
table { border-collapse: separate; border-spacing: 10px; }

 

 

caption-side


 
语法:
 
caption-side : bottom | left |right | top
 
参数:
 
bottom :  下面
left :  左边
right :  右边
top :  下面
 
示例:
 
table caption { caption-side: top; width: auto; text-align: left; }

 

 

empty-cells


 
语法:
 
empty-cells : hide | show
 
参数:
 
hide :  隐藏
show :  显示
 
示例:
 
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }

 

 

 

table-layout


 
语法:
 
table-layout : auto | fixed
 
参数:
 
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关  
 
示例:
 
table { table-layout: auto; }

 

 

speak-header


 
语法:
 
speak-header : once | always
 
参数:
 
once :  所有的单元格只有一个表格头
fixed :  每一组单元格对应一个表头
 
示例:
 
table { speak-header: once }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值