Nested Table
CSS / HTML

Nested Tables in HTML

Nested Table

Hi, Are you looking for a tutorial where you can learn how to make nested tables in html? If yes the this tutorial is for you. I will explain everything in details so that you can make it very easily in future whenever you need.

Let’s understand Nested Tables in HTML

First we will create a basic table with two columns which will contain a nested table.

<table cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Skills</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dheeraj Verma</td>
			<td>
			<!--Nested Table-->
			<table>
				<tbody>
					<tr>
					        <td>HTML</td>
						<td>JavaScript</td>
					</tr>
					<tr>
						<td>CSS</td>
						<td>jQuery</td>
					</tr>
				</tbody>
			</table>
			<!--Nested Table-->
			</td>
		</tr>
	</tbody>
</table>

Now we will write some basic CSS for the table.

CSS:

table tr>th, table tr>td {
	border: 1px solid black;
}

Now the trick ! Actually our nested table’s parent is a td. So first we will give padding:0; to our nested table’s parent td.

<td style="padding: 0;">

Final action need to be taken which is write some css for the nested table.

<table style="border-style: hidden; border-collapse: collapse;">

That’s it ! You are done.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *