css table表格相关设置和属性

css table表格相关设置和属性

前言

记录表格的结构，属性设置相关知识

一、表格结构

<table>
        <caption>表格标题</caption>
        <thead>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
            </tr>
        </tfoot>
    </table>

二、使用行内样式控制表格样式

1.属性

border=“1” 控制表格的边框粗细 （加粗的是表格外围的边框粗细）

borderColor=“yellow” 控制表格边框颜色

width=“300” height=“200” 控制表格整体宽高（可以加给 td 会控制单元格所在的列的单元格的宽高）

bgcolor=“skyblue” 控制表格背景颜色（可以加给tr控制行的背景色，加给td控制单元格的背景色）

align=“center” 加给表格是表格居中（加给 tr 控制行的内容居中,加给 td 单独控制单元格的内容的居中方式）

cellpadding=“10” 控制表格的内边距（内容与边框之间的距离）

cellspacing=“0” 控制单元格之间的间隙

代码如下（示例）：

<table border="1" borderColor="yellow" width="300" height="200" bgcolor="skyblue" align="center" cellpadding="10" cellspacing="0">
        <caption>表格标题</caption>
        <thead>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>           
        </tbody>
        <tfoot>
            <tr>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
            </tr>
        </tfoot>
    </table>

2.使用css控制表格的样式

只有table，th和td有独立的边框，tr并无边框
table，th和td的样式控制可以直接进行设置，代码如下

代码如下（示例）：

thead th{
 			width: 80px;
            height: 20px;          
            background-color: skyblue;
            border: 3px  solid black;
        }
td{
            width: 80px;
            height: 20px;
            border: 1px solid black;
            background-color: skyblue;
            text-align:center;
        }

想要对thead,tbody,tfoot,tr进行控制，需要对table设置

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
参数：

separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承border-collapse 属性的值

代码如下（示例）：

table {
            border-collapse: collapse;
        }

设置之后就可以对thead,tbody,tfoot,tr进行样式控制了