Question

我无法为此表创建HTML代码。该怎么做？enter image description here

Answer 1

您可能会遇到的错误是“ E”必须位于其自己的行上……当然，还有其他方法可以做到这一点（包括不使用表）。但是要回答您提出的问题：

    <table border=1>
      <tr>
        <td>A</td><td rowspan=2>D</td>
      </tr>
      <tr>
        <td rowspan=2>B</td>
      </tr>      
      <tr>
        <td rowspan=2>E</td>        
     </tr>
     <tr>
       <td>C</td>
     </tr>
    </table>

Answer 2

table {
  border: 2px solid ;
  border-collapse: collapse;
}
td {
  border: 2px solid;
  padding: 20px;
}

<table>
  <tr>
         <td rowspan="2">A</td>                            <td rowspan="3">D</td>
  </tr>
  <tr>
    <!-- <td rowspan="2">A</td> -->                   <!-- <td rowspan="3">D</td> -->
  </tr>
  <tr>
         <td rowspan="2">B</td>                       <!-- <td rowspan="3">D</td> -->
  </tr>
  <tr>
    <!-- <td rowspan="2">B</td> -->                        <td rowspan="3">E</td>
  </tr>
  <tr>
         <td rowspan="2">C</td>                       <!-- <td rowspan="3">E</td> -->
  </tr>
  <tr>
    <!-- <td rowspan="2">C</td> -->                   <!-- <td rowspan="3">E</td> -->
  </tr>
</table>

或与grid

.grid {
  display: inline-grid;
  grid-template-areas: 
    "A D" 
    "A D" 
    "B D" 
    "B E" 
    "C E" 
    "C E"
  ;
  border-style: solid;
  border-width: 2px 0 0 2px;
}

.grid .a, 
.grid .b, 
.grid .c, 
.grid .d, 
.grid .e {
  padding: 20px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  display: flex;
  align-items: center;
}

.grid .a {
  grid-area: A;
}

.grid .b {
  grid-area: B;
}

.grid .c {
  grid-area: C;
}

.grid .d {
  grid-area: D;
}

.grid .e {
  grid-area: E;
}

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>

Answer 3

我不确定为什么要为此使用Table。我们可以通过遵循HTML的任何方式实现这一目标

<!DOCTYPE html>
<html>

<head>
    <style>
        td {
            width: 100px;
            height: 100px;
        }
        table.child tr,
        table.child tr td {
            padding: 0px;
        }

        table.child,
        table.child tr {
            border: 1px solid #fff;
        }

        table.child tr td {
            border: none;
        }

        table.child,
        table.child tr,
        table.child tr td {
            border: none;
            border-collapse: collapse;
        }

        table.base,
        table.base tr,
        table.base tr td {
            border-collapse: collapse;
        }

        table.base tbody tr,
        table.base tbody tr td {
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Table</h2>

    <table border=1 class="base">
        <tr>
            <td>
                A
            </td>
            <td rowspan=3 style="padding: 0">
                <table border=1 class="child">
                    <tr>
                        <td style="border-bottom: 1px solid">
                            D
                        </td>
                    </tr>
                    <tr>
                        <td>
                            E
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td valign=middle>
                B
            </td>
        </tr>
        <tr>
            <td>
                C
            </td>
        </tr>
    </table>

</body>

</html>

Answer 4

我认为它将为您提供帮助

HTML

public static void methodOne(){
   myMethod(new MyObject());

}

public static void methodOne(){
  MyObject objRef = new MyObject();
  myMethod(objRef);
}

CSS

<table>
  <tr>
    <td rowspan="2">A</td>                            
    <td rowspan="3">D</td>
  </tr>
   <tr></tr>
  <tr>
     <td rowspan="2">B</td>                       
  </tr>
  <tr>                       
    <td rowspan="3">E</td>
  </tr>
  <tr>
     <td rowspan="2">C</td>                       
  </tr>
  <tr></tr>
</table>

我已经尝试过，但是无法为此表创建HTML代码

4 个答案: