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>

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

             属性               　　　　 值              　　　　  说明             　　　　 　　　　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>

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