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>

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

  • 相关阅读:
    并发编程3
    并发编程2
    4/23
    4/22
    并发编程1
    粘包问题
    Navicat12激活
    IDEA创建maven项目报错解决:Failed to create a Maven project: 'C:/Users/../IdeaProjects/../pom.xml' already e
    IDEA
    windows下查看端口运行情况--解决端口冲突问题
  • 原文地址:https://www.cnblogs.com/kplsm123/p/6485411.html
Copyright © 2011-2022 走看看