第七十五节，CSS表格与列表

CSS表格与列表

学习要点：
1.表格样式
2.列表样式
3.其他功能

一．表格样式
表格有五种独有样式，样式表如下：

            属性              　　　　 值                 　　　　   说明              　　　　　　　　　　CSS版本

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

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

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

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

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

border-collapse单元格相邻的边框被合并

             值                           说明                  　　　　　　　　 CSS版本

             separate         　　   默认值，单元格边框独立                   2

             collapse         　　    单元格相邻边框被合并                      2

table{
    border-collapse: collapse;
}
 
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

border-spacing设置单元格之间的间距

解释：border-collapse:separate;（默认）的状态下才有效。因为要设置间距，不能合并。

             值                           说明                   　　　　　　　　　　　　  CSS版本

            长度值             　　 0表示间距，其他使用CSS长度值                      2

table{
    border-spacing: 10px;
}
 
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

caption-side设置表格标题位置

             值                            说明                  　　　　　　CSS版本

            top           　　　　   默认值，标题在上方                   2

            bottom          　　    标题在下方                               2

table{
    border-spacing: 10px;
    caption-side: bottom;
}
 
<table border="1">
    <caption>这是一张表</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

empty-cells单元格内容为空时隐藏边框

               值                           说明                 　　　　　　 CSS版本

              sho             　　　　默认值，显示边框                     2

              hide            　　      不显示边框                              2

table{
    border-spacing: 10px;
    empty-cells: hide;
}
 
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td></td>
    </tr>
</table>

table-layout内容过长后，不会拉伸整个单元格

注意：要设置了表格的宽度和高度后有用

               值                           说明                    　　　　　　　　　　　　CSS版本

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

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

table{
    width: 400px;
    height: 300px;
    text-align: center;
    table-layout: fixed;
}
 
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4这个表格的内容加长了</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

vertical-align属性用于表格内容垂直对齐

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

             值                           说明                    　　　　　　CSS版本

          baseline        　　　 内容对象与基线对齐                        1

             top          　　　   内容对象与顶端对齐                        1

           middle         　　　 内容对象与中部对齐                        1

           bottom         　　　内容对象与底部对齐                        1

table{
    width: 400px;
    height: 300px;
}
table td{
    vertical-align: bottom;
}
 
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

vertical-align属性用于上标和下标

             值                           说明                  　　　　　　  CSS版本

             sub          　　　　垂直对齐文本的下标                         1

            super         　　　  垂直对齐文本的上标     

b{
    vertical-align: sub;
}
 
<div>html<b>5</b></div>

vertical-align属性用于其他元素的文本垂直对齐

解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。

              值                           说明                   　　　　　　　　　　　　 CSS版本

            长度值           　　　　设置上下的偏移量，可以是负值                       1

            百分比           　　　　同上                                                           1

div{
    background-color: #bec7ff;
    width: 400px;
    height: 300px;
    text-align: center;
}
div span{
    vertical-align: -10px;
}
 
<div><span>这是一段文本</span></div>

二．列表样式
列表有四种独有样式，样式表如下：

             属性               　　　　 值              　　　　  说明             　　　　 　　　　CSS版本

        list-style-type       　　    类型值        　　　　　列表中的标记类型                     1/2

       list-style-image  　　　　 none或url 　　　　　  图像作为列表标记                     1

     list-style-position      　　 位置值        　　　　　 排列的相对位置                         1

          list-style         　　　　 简写属性  　　　　　　 列表的简写形式                         1

list-style-type列表前缀的标记类型

                值                           说明                    CSS版本

               none            　　　　没有标记                    1

               disc            　　　　 实心圆                        1

              circle           　　　　  空心圆                       1

              square           　　　  实心方块                    1

             decimal           　　　  阿拉伯数字                 1

           lower-roman         　　 小写罗马数字              1

           upper-roman        　　 大写罗马数字              1

           lower-alpha         　　  小写英文字母              1

           upper-roman        　　大写英文字母              1

ul{
    list-style-type: none;
}
 
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

list-type-position标记位于内容框的内部

              值                            说明                   　　　　　　　　　　CSS版本

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

              inside          　　　　 标记位于内容框内部                                1

ul{
    list-style-position: inside;
}
 
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

list-type-image使用图片作为前缀的标记

               值                           说明                          CSS版本

               none           　　    不使用图像                      1

               url            　　　　 通过url使用图像              1

ul{
    list-style-image: url("bullet.png");
}
 
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>