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,
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
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
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. Create engaging and interactive mobile app experiences with a Flutter Course that covers everything you need to know.
Check out the Angular Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the Best React Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Got a question for us? Please mention it in the comments section of article and we will get back to you.