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:
And here's the one my 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>
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>