• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML表格_动力节点Java学院整理

    在html中绘制表格使用table标签

    下面是一个列子。

    <html>
        <head>
            <title>Table in html</title>
        </head>
        <body>
            <p>水平表头</p>
            <table border="1">
             <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
             </tr>
             <tr>
                <td>zdd</td>
                <td>30</td>
                <td>male</td>
             </tr>
             </table>
             <p>垂直表头</p>
             <table border="1">
             <tr>
                <th>Name</th>
                <td>autumn</td>
             </tr>
             <tr>
                <th>Age</th>
                <td>30</td>
             </tr>
             <tr>
                <th>Gender</th>
                <td>famale</td>
             </tr>
            </table>
        </body>
    </html>

    效果图

    水平表头

    Name
    Age
    Gender
    zdd
    30
    male

    垂直表头

    Name
    autumn
    Age
    30
    Gender
    famale

    无边框表格

    如果在定义表格时,没有指定border属性,那么表格就没有边框

    <table>
        <tr><td>zdd</td><td>30</td></tr>
        <tr><td>ddz</td><td>27</td></tr>
    </table>

    效果图

    zdd
    30
    ddz
    27

    空单元格

    如果没有为单元格指定内容,那么单元格将是空的,且没有边框,如下,这样很不美观。

    zdd
    30
     
    27

    如果解决呢?方法是给空的单元格加上空格,由于html忽略多余的空格,所以我们不能直接加空格,而要加 &nbsp; nbsp表示空格。

    <table border="1">
        <tr><td>zdd</td><td>30</td></tr>
        <tr><td>&nbsp;</td>20</tr>
    </table>

    效果图

    zdd
    30
     
    20

    带标题的表格

    使用caption属性,但是好像标题中不能有空格,否则显示的时候会换行!

    <table border="1">
    <caption>我的表格</caption>
        <tr><td>zdd</td><td>30</td></tr>
        <tr><td>&nbsp;</td><td>20</td></tr>
    </table>

    我的表格

    zdd
    30
     
    20

    跨行或者跨列的表格

    用colspan跨行

    <table border="1">
    <tr><th>姓名</th><th colspan="2">电话</th></tr>
    <tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
    </table>

    姓名
    电话
    Bill Gates
    555 77 854
    555 77 855

    用rowspan跨列

    <table border="1">
    <tr><th>姓名</th><td>Bill Gates</td></tr>
    <tr><th rowspan="2">电话</th><td>555 77 854</td></tr>
    <tr><td>555 77 855</td></tr>
    </table>

    嵌套的表格

    table标签是可以嵌套的,也就是说在tr或者td标签中加入table标签即可创建表格中的表格。

  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML表格_动力节点Java学院整理 HTML,表格,动力,节点,Java,