css-表格

 

    表格
        作用：收集信息

       <table>
            <thead>
                <tr>
                    <th>1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>1</td>
                </tr>
            </tfoot>
       </table>

            tr：行
            td:列 
            th:标题

            表格的划分
                行 列  单元格

        表格的属性(直接给table标签上添加)
            width="100px"
            height="200px"
            border="1"---------------表格的边框
            bgcolor="red"------------表格背景颜色
            bordercolor="yellow"-----表格边框颜色
            cellspacing="10px"-------单元格与单元格之间的间距
            cellpadding="20px"-------内容与单元格之间的间距

         <table    border="1"  bgcolor="red" bordercolor="yellow" cellspacing="10px" cellpadding="20px"></table>

            tr或者td,th添加
               align="center|left|rigth" --------------文本水平对齐方式和
               valign="top|middl|bottom|baseline"------文本垂直对齐方式

        行合并：rowspan="n"
            rowspan给单元格添加（td）,n要合并的单元格数字，删除要合并的单元格
        行合并：colspan="n"
            colpan给单元格添加（td）,n要合并的单元格数字，删除要合并的单元格    

        补充：css属性

            border-spacing: 20px;-----------单元格与单元格之间的距离（table添加）
            border-collapse: collapse|separate;------合并相邻单元格边框
                    collapse合并
                    separate不合并（默认值）
            table-layout:auto|fixed;------------单元格宽度是否会随着内容变化而变化
                         table-layout:auto；变化
                         table-layout:fixed；固定
            empty-cells: show|hide;------------空白单元格是否隐藏
                show:展示
                hide:隐藏
         
       标签
        <caption>数字</caption>-------表格标题
                caption-side: top|bottom|left|right;-------------标题的位置
                    top:表格整体上边 
                    bottom:表格整体下边
                    left|right :火狐浏览器可以识别

        <colgroup span="3" bgcolor="red"></colgroup>----划分祖列 span="3" 3列
        <colgroup span="3" bgcolor="green"></colgroup>
        <col span="4" bgcolor="yellow"></col>

    
        组分割线（添加到table上）
            rules="groups|rows|cols|all|none"---------------组分割线
                    groups--------组分割线
                    rows----------行分割线
                    cols----------列分割线
                    all-----------单元格分割线
                    none----------无分割线