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

  • 相关阅读:
    Solon 开发进阶,二、体外扩展机制
    Solon Web 开发,二、开发知识准备
    Solon Web 开发,四、请求上下文
    CODING 项目协同 2.0 —— 让协作有条不紊
    (三)React组件的三大特性 State
    (四)React组件的三大特性 Props
    (五)React的三大特性 refs
    (二)React的组件的创建 ,js类的基础复习
    (一)React系列文章:虚拟DOM的创建与解释,注意的相关规则
    [源码解析] PyTorch 分布式(16) 使用异步执行实现批处理 RPC
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853962.html
Copyright © 2011-2022 走看看