React with Redux Certification Training
- 5k Enrolled Learners
- Weekend
- Live Class
(1950)
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 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.
