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>

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

  • 相关阅读:
    自定义开发服务器_2_使用webpack_dev_middleware和express
    自定义开发服务器_1_使用webpack_dev_middleware
    用webpack搭建专用于实时重加载html的开发服务器
    如何批量导入组件,并在vue-router中批量设置?
    [webpack]在package.json中设置开发服务器"start": "webpack serve --open"的一小坑
    【读书笔记】node.js实战第二版中关于ejs的一个小坑
    动态的修改页面标题title
    vue-cropperjs 基本使用 及其裁剪前压缩,相同图片第二次选择失效,第二次压缩失效,第一次图片转Base64 失效 打印‘data:,' 的问题
    原生js 首次加载的loading效果
    vue 首次加载的loading效果
  • 原文地址:https://www.cnblogs.com/kplsm123/p/6485411.html
Copyright © 2011-2022 走看看