CSS表格实例CSS 表格实例
CSS 表格属性可以帮助您极⼤地改善表格的外观。
CSS Table 属性
属性描述
border-collapse    设置是否把表格边框合并为单⼀的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side  设置表格标题的位置。
css表格样式
empty-cells    设置是否显⽰表格中的空单元格。
table-layout  设置显⽰单元、⾏和列的算法。
>>>>####
table-layout可能的值
值描述
automatic  默认。列宽度由单元格内容设定。
fixed  列宽由表格宽度和列宽度设定。
inherit    规定应该从⽗元素继承 table-layout 属性的值。
>>>#
border-collapse
可能的值
值描述
separate  默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse  如果可能，边框会合并为⼀个单⼀的边框。会忽略 border-spacing 和 empty-cells 属性。inherit    规定应该从⽗元素继承 border-collapse 属性的值。
>####
border-spacing可能的值
值描述
length length
规定相邻单元的边框之间的距离。使⽤ px、cm 等单位。不允许使⽤负值。
如果定义⼀个 length 参数，那么定义的是⽔平和垂直间距。
如果定义两个 length 参数，那么第⼀个设置⽔平间距，⽽第⼆个设置垂直间距。
inherit    规定应该从⽗元素继承 border-spacing 属性的值。
>>#
caption-side可能的值
值描述
top    默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit    规定应该从⽗元素继承 caption-side 属性的值。
####
empty-cells
可能的值
值描述
hide  不在空单元格周围绘制边框。
show  在空单元格周围绘制边框。默认。
inherit    规定应该从⽗元素继承 empty-cells 属性的值。
>>###
>###
1.设置表格的布局
本例演⽰如何设置表格的布局。
<style type="text/css">
<{table-layout:automatic}
table.two{table-layout:fixed}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">10000000000000000000000000000000000000000000</td>
<td width="40%">10000</td>
<td width="40%">100</td>
</tr>
</table>
<table class="two" border="1" width="100%">
<tr>
<td width="20%">10000000000000000000000000000000000000000000000</td>
<td width="40%">1000000000000</td>
<td width="40%">100</td>
</tr>
</table>
2.显⽰表格中的空单元
本例演⽰是否显⽰表格中的空单元。（请在⾮ IE 浏览器中浏览）
<style type="text/css">
table{border-collapse:separate;empty-cells:hide;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td></td>
</tr>
</table>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更⾼版本）⽀持 empty-cells 属性。</p> 3.合并表格边框
本例演⽰是否把表格边框显⽰为⼀条单独的边框，还是像标准的 HTML 中那样分开显⽰。
<style type="text/css">
table{border-collapse:collapse}
table,td,th{border:1px solid black}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误</p>
</body>
4.设置表格边框之间的空⽩
本例演⽰如何设置单元格边框之间的距离。（请在⾮ IE 浏览器中浏览）
<style type="text/css">
<{border-collapse:separate;border-spacing:10px}
table.two{border-collapse:separate;border-spacing:10px 50px}
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table>
5.设置表格标题的位置
本例演⽰如何定位表格的标题。（请在⾮ IE 浏览器中浏览）
<style type="text/css">
caption{caption-side:bottom}
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更⾼版本）⽀持 caption-side 属性。</p> </body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

table自定义表格样式
« 上一篇
css的介绍
下一篇 »

发表评论

Copyright © 2024 baidu.com
Powered By 688IT编程网 豫ICP备2022007602号 豫公网安备41160202000602