在HTML中格式化嵌套表格

我很難完成這項任務。這是一個簡單的HTML編碼任務，但我有問題格式化我的表看起來像問什麼。我嘗試了不同類型的休息等，但它不會像教練想要的那樣工作。在HTML中格式化嵌套表格

這裏是我的表：

而這裏的一個我的教練希望：

這裏是我的代碼：

<!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>

來源

2016-09-23 X1XX

使用特定<td>

概念

<!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>

來源

2016-09-23 04:22:34 Gowtham

刪除最底部的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>

來源

2016-09-23 04:12:59

使用rowspan爲組合兩個行和colspan兩列。

<!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>

結果

Table format

來源

2016-09-23 04:14:59

<!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>

來源

2016-09-23 04:17:38

<!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>

來源

2016-09-23 04:31:50

在HTML中格式化嵌套表格

回答

相關問題