X1XX
Reputation: 141
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:
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>Upvotes: 0
Views: 3714
Answers (6)
Santanu Guin
Reputation: 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 ="1"><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>Upvotes: 0
A.K.
Reputation: 2322
Use rowspan for combine two row and colspan for two column.
<!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>Result
Upvotes: 0
Milan Nakrani
Reputation: 34
<!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>
Upvotes: 0
Darshan Prajapati
Reputation: 66
<!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>
Upvotes: 1
Gowtham
Reputation: 1597
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>Upvotes: 2
danish farhaj
Reputation: 1354
Remove the bottom td and add rowspan 2 to your nested table td tag.
<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>
Upvotes: 0