表格属性(特有)

时间:2022-06-08
本文章向大家介绍表格属性(特有),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

表格特有属性

  1.边框合并属性

属性

  border-collapse

            取值

1.separate  代表不合并

                2.collapse  代表合并

  2.边框边距

            属性:

border-spacing:

            作用:

 设置相邻两个边框的距离

            前提:

border-collapse取值一定是separate

            取值

1.值;      水平和垂直都一样

                2.  值1       值2; 

  水平方向   垂直方向

border-spacing:设置边框边距;

       设置边框前提border-collapse取值为sparete(不合并),

       当然border-collapse取值还有collaps(合并),在sparate(不合并)下才能进行表格边框边距设置;

       border-spacing取值一个值表示水平数值全部一样,两个值的话是:第一个值(水平),第二个(垂直)边距;

<style>
.t1{border-collapse:separate;
/*border-collapse:表格是否合并取值collapse合并,separete不合并*/

border-spacing:5px;
/*当边框不合并取值为separete时候可以进行外边距设置*/
/*一个值表示上下左右一样 两个值:第一个表示上下 第二个表示作业 */
table-layout:fixed;
/*显示规则table-layout默认auto自动计算,fixed根据自己设置排布*/
width:500px;
height:350px;
text-align: right;
vertical-align: top;

}

3.显示规则

            1.作用

规定单元格的 宽度 和 高度 处理方式

            2.属性

table-layout:

                取值

                    1.auto

  默认,自动计算单元格的宽和高

                    2.fixed

固定表格布局

table-layout:fixed;
/*显示规则table-layout默认auto自动计算,fixed根据自己设置排布*/

            3.对比

                1.自动表格布局table-layout:auto;

1.单元格大小会根据内容自动调整

                    2.加载复杂的表格速度比较慢

                    3.适用于不确定每列的内容大小

                2.固定表格布局table-layout:fixed;

1.单元格大小和内容无关

                    2.加载复杂表格相对较快

                    3.适用于每列内容固定的情况