htmlcss

Formatting a nested table in HTML

I'm having a hard time doing this assignment. It's a simple HTML coding assignment but I'm having problems formatting my table to look like what's asked. I've tried different types of breaks etc, but it just won't work in the way the instructor wants it.

Here's my table:

This is my table

And here's the one my instructor wants:

This is what the instructor wants

Here's my code:

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

Solution

  • Use the concept rowspan for particular <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>