2016-09-23 11 views
0

この割り当てを行うのは苦労しています。これはシンプルなHTMLコーディングの割り当てですが、私はテーブルのフォーマットを尋ねるように見える問題があります。私は違う種類の休憩などを試しましたが、インストラクターがそれを望んでいるようにはうまくいかないでしょう。ここでHTMLでネストした表の書式設定

は私のテーブルです:

This is my table

そして、ここでは私のインストラクターが望んでいる一つだ:

This is what the instructor wants

ここに私のコードです:

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

答えて

2

使用特定<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>

0

下の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> 
0

2つのカラムのための2つの行とcolspanを組み合わせるための使用rowspan

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

0
<!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> 
1
<!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> 
関連する問題