The Complete WebDeveloper (47 Blogs) Become a Certified Professional

How To Best Utilize Nested Tables In HTML?

Last updated on Apr 14,2022 16.5K Views


This article will introduce you to a simple but an important concept that is Nested Tables In HTML with a programmatic demonstration. Following pointers will be covered in this article,

So let us get started then,

Nested Tables In HTML

Tables are divided in three parts

  • Header
  • Body
  • Foot

The body is the main content holder whereas the header and body are similar to headers and footers in a word processed document.This remains same for every page.

In HTML teh elements to all the three parts are:

  • <thead> – this creates a separate header for the table. 
  • <tbody> – this indicates the main body of the table.
  • <tfoot> – this creates a seperate table footer.

A table may contain any number of elements <tbody> to indicate different parts.To note this, the <thead> and <tfoot> should come before <tbody>

Moving on with this article on Nested Tables In HTML

Sample Program 1

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tbody>
</table>
</tr>
</body>
</html>

Output

Output - Nested Table In HTML - Edureka

Nested tables is placing one table over another table.By opening and closing the <table> tag any number of tables can be constructed inside the table.

Moving on with this article on Nested Tables In HTML

Sample Program 2

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Earnings</th>
</tr>
<tr>
<td>Sathish</td>
<td>5000</td>
</tr>
<tr>
<td>Mukesh</td>
<td>8000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Output

Output - Nested Tables In HTML - Edureka

This brings us to the end of this article.

Check out our Web developer course which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of  article and we will get back to you.

Upcoming Batches For Web Developer Certification Training Course
Course NameDate
Web Developer Certification Training Course

Class Starts on 28th May,2022

28th May

SAT&SUN (Weekend Batch)
View Details
Web Developer Certification Training Course

Class Starts on 6th August,2022

6th August

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How To Best Utilize Nested Tables In HTML?

edureka.co