css表格之table表格的css样式属性用法笔记

原创 PHP笔记  2017-03-23 17:39  阅读 1,641 views 次

css表格样式属性可以让我们更方便、更简单、更好的控制表格的外观。

表格样式css属性

  • border-collapse:表格边框是否合并为单一的边框。
  • border-spacing :分隔单元格边框的距离。
  • caption-side:表格标题的位置。
  • empty-cells:表格中是否显示空的单元格。
  • table-layout:显示单元、行和列的算法。

1、border属性

在html中设置边框的粗细、线条、颜色等一般用border属性。

例如:

border: 1px solid red; 边框为1像素的实线,颜色为红色;

2、表格宽度和高度

表格的宽度和高度用width和height属性来设定,属性值的单位可以是像素和百分比。

格式:

选择器{
width:40px;
height:50px;
}

3、表格文本对齐

text-align和vertical-align属性分别设置表格中文本的水平对齐方式和垂直对齐方式。

格式:

text-align:left/right/center;
vertical-align:top/bottom;

4、表格内边距

表格内边距是用padding 属性来设定的。

格式:padding:1px;

5、border-collapse属性

border-collapse属性设置是否将表格边框折叠为单一边框。

  • separate(默认值):边框会被分开。
  • collapse:边框合并为一个单一的边框(border-spacing和empty-cells属性不起作用)。

实例:

......
<body>
<style type="text/css">
td{border: 1px solid black;}
#a td{border: 1px solid black;text-align:center;}
#a{border-collapse:separate;width:300px;height:100px;}
#b{border-collapse:collapse;width:280px;height:80px;}
</style>
<table id="a">
<tr> <td>separate</td> </tr>
<tr> <td>1行1格</td> <td>1行2格</td> <td>1行3格</td> </tr>
<tr> <td>2行1格</td> <td>2行2格</td> <td>2行3格</td> </tr>
</table><br/>
<table id="b">
<tr> <td>collapse</td> </tr>
<tr> <td>1行1格</td> <td>1行2格</td> <td>1行3格</td> </tr>
<tr> <td>2行1格</td> <td>2行2格</td> <td>2行3格</td> </tr>
</table>
</body>......

 

运行结果:

本文地址:https://www.ggbiji.com/css-table.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情