React with Redux Certification Training
- 5k Enrolled Learners
- Live Class
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,
Tables are divided in three parts
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:
A table may contain any number of elements <tbody> to indicate different parts.To note this, the <thead> and <tfoot> should come before <tbody>
<!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>
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.
<!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>
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.