zoukankan      html  css  js  c++  java
  • HTML标签 table(4)

    1.table简介

      <table>标签的属性border表示线框宽度,只接受自然数。

    2.single table

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    
    <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
    
    <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js" ></script>
    
    <script>
    </script>
    
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>hehe</th>
                    <th>haha</th>
                    <th>xixi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    3.rowspan table

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    
    <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
    
    <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js" ></script>
    
    <script>
    </script>
    
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>hehe</th>
                    <th>haha</th>
                    <th>xixi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    4.colspan table

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    
    <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
    
    <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js" ></script>
    
    <script>
    </script>
    
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>hehe</th>
                    <th>haha</th>
                    <th>xixi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">1</td>
                    <!-- <td>2</td> -->
                    <td>3</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    5.rowspan and colspan table

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    
    <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
    
    <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js" ></script>
    
    <script>
    </script>
    
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>hehe</th>
                    <th>haha</th>
                    <th>xixi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2" rowspan="3">1</td>
                    <!-- <td>2</td> -->
                    <td>3</td>
                </tr>
                <tr>
                    <!-- <td>一</td> -->
                    <!-- <td>二</td> -->
                    <td></td>
                </tr>
                <tr>
                    <!-- <td>壹</td> -->
                    <!-- <td>贰</td> -->
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">this is tfoot</td>
                </tr>
            </tfoot>
        </table>
    </body>
    </html>

    6. TD line feed

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Auto complete</title>
    
    <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
    
    <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js" ></script>
    
    <script>
    </script>
    
    </head>
    <body>
        <table border="1"  style="table-layout:fixed;" width="800px">
            <thead>
                <tr>
                    <th>hehe</th>
                    <th>haha</th>
                    <th>xixi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2" rowspan="3">1</td>
                    <!-- <td>2</td> -->
                    <td>3</td>
                </tr>
                <tr>
                    <!-- <td>一</td> -->
                    <!-- <td>二</td> -->
                    <td></td>
                </tr>
                <tr>
                    <!-- <td>壹</td> -->
                    <!-- <td>贰</td> -->
                    <td style="word-break:break-all;">叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">this is tfoot</td>
                </tr>
            </tfoot>
        </table>
    </body>
    </html>

    小结:做表格不要怕麻烦,细心一点,一会儿就出来啦

  • 相关阅读:
    【原创】【js】screenLeft screenTop screenX screenY属性的有效性和兼容性研究
    兼容兼容兼容:浏览器兼容性大集合
    Vue 打包成APP后首屏出现白屏问题
    uniapp 安卓app端本地打包错误: Not found -1,6 at view.umd.min.js:1
    uniapp 下获取cid
    uniapp fill abort statuscode:-1
    Vuex刷新时数据会消失,那如何解决?为什么还要使用Vuex
    vue 安装失败;vue不是内部或外部命令
    js 文件下载,多个文件下载,pdf下载
    uni-App 去掉顶部导航栏
  • 原文地址:https://www.cnblogs.com/kplsm123/p/6485411.html
Copyright © 2011-2022 走看看