第七十五节，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>