zoukankan      html  css  js  c++  java
  • 一天搞定CSS:表格(table)--19

    1.表格标签

    这里写图片描述

    表格标签的嵌套关系

    <table>
        <!--表格头-->
        <thead>
            <!--表格行-->
            <tr>
                <!--表格列,【注意】这里使用的是th-->
                <th></th>
            </tr>
        </thead>
    
        <!--表格主体-->
        <tbody>
            <!--表格行-->
            <tr>
                <!--表格列,【注意】这里使用的是td-->
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </tbody>
    
        <!--表格底部-->
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

    2.实例演示–课程表

    border-collapse:collapse; - - -表示清除表格之间的间隙
    这里写图片描述

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                /*1.清除表格默认样式*/
                table{
                    border-collapse: collapse;
                }
                th,td{
                    padding: 0;
                }
    
    
                /*2.设置表格大小,以及表框颜色*/
                table{
                    margin: 0 auto;
                    width: 500px;
                }
                th,td{
                    border: 1px solid pink;
                    font: 20px/50px "微软雅黑";
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <!--
                表格标签
                    table           表格
                    thead           表格头
                    tbody           表格主体
                    tr              表格行
                    th              表格头里的单元格(默认加粗并且居中)
                    td              表格主体里的单元格
                    tfoot           表格底部
    
                表格的默认样式
                    table{border-collapse:collapse;}        单元格之间的间隙
                    th,td{padding:0}
    
            -->
    
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
    

    3.表格行和列的合并

    rowspan 合并行(竖着合并)
    colspan 合并列(横着合并)

    效果图:

    这里写图片描述

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                table{
                    border-collapse: collapse;
                }
                th,td{
                    padding: 0;
                }
    
    
                table{
                    margin: 0 auto;
                    width: 500px;
                }
                th,td{
                    border: 1px solid pink;
                    font: 20px/50px "微软雅黑";
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <!--
                表格标签    
                rowspan         合并行(竖着合并)
                colspan         合并列(横着合并)
            -->
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="4">    上午</td>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <!--合并行-->
                        <td rowspan="2">    下午</td>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <td>语文  </td>
                        <td>数学</td>
                        <td>英文</td>
                        <td>生物</td>
                        <td>化学</td>
                    </tr>
                    <tr>
                        <!--合并列-->
                        <td colspan="6">夜自习</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
    

    配套小练习

    链接地址:http://blog.csdn.net/baidu_37107022/article/details/71713520

  • 相关阅读:
    SQL 分页存储
    ubuntu下删除openjdk,改用sun jdk
    LCD 驱动的整体分析。
    关于IT行业人员吃的都是青春饭?[透彻讲解]
    【转载】I.MX25上摄像头调试总结
    wifi 移植
    函数指针的透彻分析
    关于module_param()宏 (转)
    problem with aptget update ubuntu 11.10
    YUV 格式讲解
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853962.html
Copyright © 2011-2022 走看看