The Complete WebDeveloper (38 Blogs) Become a Certified Professional

How To Best Utilize Nested Tables In HTML?

Published on Aug 26,2019 12 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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 Full Stack Web Developer Masters Program 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.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.