zoukankan      html  css  js  c++  java
  • HTML表格嵌套、合并表格

    一、表格元素< table>

    table常用属性

    border:边框像素 
    width,height:表格宽度/高度 
    bordercolor:表格边框颜色 
    bgcolor:表格背景颜色


    二、tr,th,td元素

    th和td元素是在tr中的 
    一组tr代表一行 
    一组th或td代表一列

    <table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0">
        <tr>
            <th>asa</th>
        </tr>
        <tr>
            <td>hahha</td>
        </tr>
    </table>

    效果 
    这里写图片描述

    从以上效果和代码可以看出,th表示表头,会自动居中,td表示普通内容


    三、合并单元格(重点)

    合并单元格在表格中是最重要的,需要两个属性colspan和rowspan 
    1.colspan:合并的是该行的单元格,就是同一行不同列的单元格合并,比如colspan=”2”则需要删除该行一个单元格,否则超出格子 
    2.rowspan:合并的是该列的单元格,同列不同行,与colspan一样若要rowspan=”2”将删除下一列的一个td或th标签,(不管删除下一列的哪一个,这一行被合并,其他元素都是在后面的,除了该列以前元素)

    <table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0">
        <tr>
            <th>asa</th><th>asas</th><th>as</th>
        </tr>
    <tr>
        <td rowspan="2">hahha</td><td>hahha</td><td>hahha</td>
    </tr>    <!-- rowspan合并该列的两个单元格,所以它的下一列将删除一个单元格-->
        <tr>
            <td colspan="2">hahha</td>
        </tr>   <!--colspan合并该行的2个单元格,所以该行删除一个标签-->
        <tr>
            <td>hahha</td><td>hahha</td><td>hahha</td>
        </tr>
    </table>

    效果 
    这里写图片描述


    四、表格嵌套

    - 在某个th或td中加table 
    - 最好在嵌套表格的地方用合并单元格(就是把嵌套的表格放入合并的单元格)

    <table border="1" width="800" bordercolor="blue">
        <caption><h1>阿水的阿里blog</h1></caption>
        <tr>
            <th>name</th> <th>password</th> <th>goal</th>
        </tr>
        <tr>
            <th>xlj</th><th colspan="2">001</th>
        </tr>
        <tr>
            <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">
            <caption><h1>阿水的阿里blog</h1></caption>
            <tr>
                <th>name</th><th>password</th><th>goal</th>
            </tr>
            <tr>
                <th>xlj</th><th colspan="2">001</th>
            </tr>
            <tr>
                <th>asa</th><th rowspan="2">002</th><th>88</th>
            </tr>
            <tr>
                <th>add</th><th>76</th>
            </tr>
        </table></th><th>88</th>
        </tr>
        <tr>
            <th>add</th><th>76</th>
        </tr>
    </table>

    五、表格练习代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阿水的阿里</title>
    </head>
    <body>
    <table border="1" width="800" bordercolor="blue">
        <caption><h1>阿水的阿里blog</h1></caption>
        <tr>
            <th>name</th> <th>password</th> <th>goal</th>
        </tr>
        <tr>
            <th>xlj</th><th colspan="2">001</th>
        </tr>
        <tr>
            <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">
            <caption><h1>阿水的阿里blog</h1></caption>
            <tr>
                <th>name</th><th>password</th><th>goal</th>
            </tr>
            <tr>
                <th>xlj</th><th colspan="2">001</th>
            </tr>
            <tr>
                <th>asa</th><th rowspan="2">002</th><th>88</th>
            </tr>
            <tr>
                <th>add</th><th>76</th>
            </tr>
        </table></th><th>88</th>
        </tr>
        <tr>
            <th>add</th><th>76</th>
        </tr>
    </table>
    </body>
    </html>

    效果 
    这里写图片描述


    以上的表格标题在table中写:

    < caption>< h1>阿水的阿里blog< /h1>< /caption> 
    caption是表格标题居中,并且一直跟着表格,不管表格怎么移动

  • 相关阅读:
    洛谷P3796 【模板】AC自动机(加强版)(AC自动机)
    洛谷P3203 [HNOI2010]弹飞绵羊(LCT,Splay)
    洛谷P1501 [国家集训队]Tree II(LCT,Splay)
    LCT总结——概念篇+洛谷P3690[模板]Link Cut Tree(动态树)(LCT,Splay)
    [BZOJ3172][TJOI2013]单词 AC自动机
    [BZOJ1968][AHOI2005]COMMON约数研究 数学
    [BZOJ1053][SDOI2005]反素数ant 数学
    [BZOJ1045][HAOI2008]糖果传递 数学
    [BZOJ2733][HNOI2012]永无乡 线段树合并
    [BZOJ1005][HNOI2008]明明的烦恼 数学+prufer序列+高精度
  • 原文地址:https://www.cnblogs.com/robinunix/p/9172881.html
Copyright © 2011-2022 走看看