24.CSS表格与列表

                                            第十八掌  CSS表格与列表

一、表格样式

          属性               值             说明              CSS版本

      border-collapse    边框样式     相邻单元格的边框样式      2

      border-spacing     长度值       相邻单元格边框间距        2

      caption-side       位置名称     表格标题位置              2

      empty-cells        显示值       空单元格是否显示边框      2

      table-layout       布局样式     指定表格的布局样式        2

   1、border-collapse ：

            值             说明                  CSS版本

     （1）separate ： 默认值，单元格边框独立       2        //单元格边框是空心的   

     （2）collapse ： 单元格相邻边框被合并         2        //单元格边框是实心的，一条黑线。

   2、border-spacing  ：

     （1）长度值   ： 表示间距，其他使用CSS长度值      2    //单元格边框线空心的间距

   3、caption-side    ：

     （1）top     ：  默认值，标题在上方          2

     （2）bottom  ：  标题在下方                  2

   4、empty-cells     ：

     （1）show  :默认值，显示边框           2       

     （2）hide  :不显示边框                 2        //如果单元格内没有内容，则不显示边框。

   5、table-layout    ：

     （1）auto  ： 默认值，内容过长时，拉伸整个单元格       2

     （2）fixed ： 内容过长时，不拉伸整个单元格             2

二、列表样式

   列表有四种独有样式

   1、list-style-type:

     （1）、none        : 没有标记        1

     （2）、disc        : 实心圆          1

     （3）、circle      : 空心圆          1

     （4）、square      : 实心方块        1

     （5）、decimal     : 阿拉伯数字      1

     （6）、lower-roman : 小写罗马数字    1

     （7）、upper-roman : 大写罗马数字    1

     （8）、lower-alpha : 小写英文字母    1

     （9）、upper-roman : 大写英文字母    1

     例、·张三

         ·李四   //变化的是前方到实心圆

         ·王五

         ·马六

   2、lise-type-position

     （1）outside    默认值，标记位于内容框外部     1

     （2）inside     标记位于内容框内部             1            

     例、（1）：·张三，是一个       （2）：·张三，是一个

                  好青年                    好青年

                ·李四                      ·李四

                ·王五                      ·王五

   3、list-type-image

      （1）none  不使用图像          1  

      （2）url   通过url使用图像     1

   4、list-style （简写形式）

         ul{

              list-style： lower-alpha inside url（bullet.png）;

         }

三、其他功能

     在<table>中<td>单元格，我们可以使用text-align属性水平对齐，但是垂直对齐就无法操作了。CSS为我们提供了vertical-align属性用于垂直对齐。

       值                说明            CSS版本

     baseline      内容对象与基线对齐      1

     top           内容对象与顶端对齐      1

     middle        内容对象与中部对齐      1

     bottom        内容对象与底部对齐      1

    //内容在表格中实现移动   例如内容紧贴上边框。

     sub           垂直对齐文本下标      1

     super         垂直对齐文本上标      1

    //脚标

     长度值        设置上下值的偏移量    1

     百分比        同上                  1