css_16_表格相关属性

一.边框

• 边框相关的属性，不仅仅是表格能用，其他元素也能用

• 属性名：border-width（边框宽度）

• 属性名：border-color（边框颜色）

none默认值
solid 实线
dashed 虚线
dotted 点线
double 双实线

• 属性名：border-style（边框风格）
• 属性名：border（边框复合属性）

没有数量、顺序的要求

举例：

        table {
            border-width: 2px;
            border-color: green;
            border-style: solid;
            /* border:2px green solid; */
        }

二.表格独有属性

只有table标签可以用

• 属性名：table-layout（设置列宽度）

auto：自动，列宽根据内容计算（默认值）。
fixed：固定列宽，平均。

• 属性名：border-spacing（单元格间距）

生效的前提：单元格边框不能合并。

• 属性名：border-collapse（合并单元格边框）

collapse：合并
separate：不合并

• 属性名：empty-cells（隐藏没有内容的单元格）

show：显示，默认
hide：隐藏
生效前提：单元格不能合并。

• 属性名：caption-side（设置表格标题位置）

top：上面（默认值）
bottom：在表格下面

举例：

        table {
            border:2px green solid;
            width:500px;
            /* 控制表格的列宽 */
            table-layout: fixed;
            /* 控制单元格间距（生效的前提是：不能合并边框） */
            border-spacing: 10px;
            /* 合并相邻的单元格的边框 */
            border-collapse: collapse;
            /* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
            empty-cells: hide;
            /* 设置表格标题的位置 */
            caption-side: top;
        }

    <table>
        <caption>表格属性</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
            </tr>
        </tbody>
    </table>
</body>