Question

我很难完成这项任务。这是一个简单的HTML编码工作，但我在格式化表格时看起来像是在问什么。我尝试过不同类型的休息等，但它只是按照教练的要求进行了工作。

这是我的表：

这是我教练想要的那个：

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <table border="border">
    <tr>
      <th>Header Column 1</th>
      <th>Header Column 2</th>
      <th>Header Column 3</th>
      <th>Header Column 4</th>
    </tr>
    <tr>
      <td>Row 2 - Item 1</td>
      <td>Row 2 - Item 2</td>
      <td><b>Row 2:Nested table 1</b>
        <table border="border">
          <tr>
            <th>Row 1 Header</th>
            <td>item</td>
            <tr>
              <th>Row 2 Header</th>
              <td>item</td>
              <tr>
                <th>Row 2 Header</th>
                <td>item</td>
        </table>
      </td>
      <td>Row 2 - Item 4
        <br>A second line</td>
      <tr>
        <td>Row 3 - Item 1</td>
        <td>Row 3 - Item 2</td>
        <td>
          <br>
        </td>
        <td>Row 3 - Item 3</td>
      </tr>
      <tr>
        <td>Row 4 - Item 1</td>
        <td>Row 4 - Item 2</td>
        <td>Row 4 - Item 3</td>
  </table>

</body>

</html>

＆＃13;

Answer 1

对特定rowspan

使用概念<td>

＆＃13;

    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table border = "border">
 <tr>
  <th>Header Column 1</th>
  <th>Header Column 2</th>
  <th>Header Column 3</th>
  <th>Header Column 4</th>
 </tr>
 <tr>
   <td>Row 2 - Item 1</td>
   <td>Row 2 - Item 2</td>
   <td rowspan=2><b>Row 2:Nested table 1</b>
      <table border = "border">
         <tr><th>Row 1 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
       </table>
       </td>
   <td>Row 2 - Item 4<br>A second line</td>
  <tr>
    <td>Row 3 - Item 1</td>
    <td>Row 3 - Item 2</td>
    <td rowspan=2>Row 3 - Item 3</td>
   </tr>
  <tr>
    <td>Row 4 - Item 1</td>
    <td>Row 4 - Item 2</td>
    <td>Row 4 - Item 3</td>
</table>

＆＃13;

Answer 2

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table border = "border">
 <tr>
  <th>Header Column 1</th>
  <th>Header Column 2</th>
  <th>Header Column 3</th>
  <th>Header Column 4</th>
 </tr>
 <tr>
   <td>Row 2 - Item 1</td>
   <td>Row 2 - Item 2</td>
   <td rowspan="2"><b>Row 2:Nested table 1</b>
      <table border = "border">
         <tr><th>Row 1 Header</th><td>item</td></tr>
         <tr><th>Row 2 Header</th><td>item</td></tr>
         <tr><th>Row 2 Header</th><td>item</td></tr>
       </table>
       </td>
   <td>Row 2 - Item 4<br>A second line</td>
</tr>
<tr>
    <td>Row 3 - Item 1</td>
    <td>Row 3 - Item 2</td>

    <td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
    <td>Row 4 - Item 1</td>
    <td>Row 4 - Item 2</td>
    <td>Row 4 - Item 3</td>
</tr>
</table>

</body>
</html>

Answer 3

删除底部td并将rowspan 2添加到嵌套表td标记。

<html>
<head>
<title>Page Title</title>
</head>
<body>

<table border = "border">
 <tr>
  <th>Header Column 1</th>
  <th>Header Column 2</th>
  <th>Header Column 3</th>
  <th>Header Column 4</th>
 </tr>
 <tr>
   <td>Row 2 - Item 1</td>
   <td>Row 2 - Item 2</td>
   <td rowspan="2"><b>Row 2:Nested table 1</b>
      <table border = "border">
         <tr><th>Row 1 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
       </table>
       </td>
   <td>Row 2 - Item 4<br>A second line</td>
  <tr>
    <td>Row 3 - Item 1</td>
    <td>Row 3 - Item 2</td>

    <td>Row 3 - Item 3</td>
   </tr>
  <tr>
    <td>Row 4 - Item 1</td>
    <td>Row 4 - Item 2</td>
    <td>Row 4 - Item 3</td>
</table>

Answer 4

使用rowspan组合两行，colspan组合两列。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table border = "border">
 <tr>
  <th>Header Column 1</th>
  <th>Header Column 2</th>
  <th>Header Column 3</th>
  <th>Header Column 4</th>
 </tr>
 <tr>
   <td>Row 2 - Item 1</td>
   <td>Row 2 - Item 2</td>
   <td rowspan="2"><b>Row 2:Nested table 1</b>
      <table border = "border">
         <tr><th>Row 1 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
         <tr><th>Row 2 Header</th><td>item</td>
       </table>
       </td>
   <td>Row 2 - Item 4<br>A second line</td>
  <tr>
    <td>Row 3 - Item 1</td>
    <td>Row 3 - Item 2</td>
    <td rowspan="2">Row 3 - Item 3</td>
   </tr>
  <tr>
    <td>Row 4 - Item 1</td>
    <td>Row 4 - Item 2</td>
    <td>Row 4 - Item 3</td>
</table>

</body>
</html>

＆＃13;

<强>结果

Table format

Answer 5

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border = "border">
    <tr>
        <th>Header Column 1</th>
        <th>Header Column 2</th>
        <th>Header Column 3</th>
        <th>Header Column 4</th>
    </tr>
    <tr>
        <td>Row 2 - Item 1</td>
        <td>Row 2 - Item 2</td>
        <td rowspan="2"><b>Row 2:Nested table 1</b>
            <table border = "border">
                <tr>
                    <th>Row 1 Header</th>
                    <td>item</td>
                <tr>
                    <th>Row 2 Header</th>
                    <td>item</td>
                <tr>
                    <th>Row 2 Header</th>
                    <td>item</td>
            </table>
        </td>
        <td>Row 2 - Item 4<br>
            A second line</td>
    <tr>
        <td>Row 3 - Item 1</td>
        <td>Row 3 - Item 2</td>
        <td>Row 3 - Item 3</td>
    </tr>
    <tr>
        <td>Row 4 - Item 1</td>
        <td>Row 4 - Item 2</td>
        <td>Row 4 - Item 3</td>
</table>
</body>
</html>

在HTML中格式化嵌套表

5 个答案: