HTML – Nested tables

Previous
Next

Nested Tables:

  • Defining a table inside another table is called Nested table.
  • We must place the table as data of another table.
<!DOCTYPE html>
<html>
	<body>
		<table border="5">
			<tr>
				<th>Content</th>
				<th>subtable</th>
			</tr>

			<tr>
				<td>data</td>
				<td>
					<table border="3" bordercolor="red" bgcolor="cyan">
						<tr>
							<td>Nested row1, column1</td>
							<td>Nested row1, column2</td>
						</tr>

						<tr>
							<td> Nested row2, column1</td>
							<td> Nested row2, column2</td>
						</tr>
					</table>
				</td>
			</tr>
		
		</table>
	</body>
</html>

Nested table with information:

<!DOCTYPE html>
<html>
	<body>
		<table border="1" width="100%">
			<tr>
				<td>first cell and second cell contains sub table</td>
				<td>
					<table border="1" width="100%">
						<tr>
							<th>Name</th>
							<th>Salary</th>
						</tr>
						
						<tr>
							<td>Harin</td>
							<td>9000</td>
						</tr>
   
						<tr>
							<td>Harsha</td>
							<td>7000</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
Previous
Next

Courses Enquiry Form