Home
Forums
New posts
Search forums
What's new
New posts
New profile posts
Latest activity
Members
Registered members
Current visitors
New profile posts
Search profile posts
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
The Complete HTML Tutorial
Table Header, Body, and Footer 1
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="AllJobsInfo" data-source="post: 170" data-attributes="member: 1"><p>In HTML, tables can be structured with a distinct header (`<thead>`), body (`<tbody>`), and footer (`<tfoot>`) sections. This structure helps to organize and differentiate the content within the table. Here's how you can use these elements:</p><p></p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Table Header, Body, and Footer Example</title></p><p> <style></p><p> table {</p><p> width: 100%;</p><p> border-collapse: collapse;</p><p> }</p><p> th, td {</p><p> border: 1px solid #dddddd;</p><p> text-align: left;</p><p> padding: 8px;</p><p> }</p><p> th {</p><p> background-color: #f2f2f2;</p><p> }</p><p> tfoot {</p><p> background-color: #f2f2f2;</p><p> font-weight: bold;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <table></p><p> <thead></p><p> <tr></p><p> <th>Product</th></p><p> <th>Price</th></p><p> </tr></p><p> </thead></p><p> <tbody></p><p> <tr></p><p> <td>Product 1</td></p><p> <td>$10.00</td></p><p> </tr></p><p> <tr></p><p> <td>Product 2</td></p><p> <td>$20.00</td></p><p> </tr></p><p> </tbody></p><p> <tfoot></p><p> <tr></p><p> <td>Total</td></p><p> <td>$30.00</td></p><p> </tr></p><p> </tfoot></p><p> </table></p><p></body></p><p></html></p><p></p><p>In this example:</p><p>- `<thead>` contains table header cells (`<th>`), typically used for column headings.</p><p>- `<tbody>` contains the main body content of the table, which consists of data cells (`<td>`).</p><p>- `<tfoot>` contains the footer rows of the table, often used for summarizing or providing totals.</p><p></p><p>Each section can have its own distinct styling if needed, as demonstrated with the background color applied to the table header and footer. This structure helps in maintaining semantic HTML and enhances accessibility by allowing screen readers to interpret the different parts of the table more accurately.</p></blockquote><p></p>
[QUOTE="AllJobsInfo, post: 170, member: 1"] In HTML, tables can be structured with a distinct header (`<thead>`), body (`<tbody>`), and footer (`<tfoot>`) sections. This structure helps to organize and differentiate the content within the table. Here's how you can use these elements: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Header, Body, and Footer Example</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { background-color: #f2f2f2; } tfoot { background-color: #f2f2f2; font-weight: bold; } </style> </head> <body> <table> <thead> <tr> <th>Product</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Product 1</td> <td>$10.00</td> </tr> <tr> <td>Product 2</td> <td>$20.00</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$30.00</td> </tr> </tfoot> </table> </body> </html> In this example: - `<thead>` contains table header cells (`<th>`), typically used for column headings. - `<tbody>` contains the main body content of the table, which consists of data cells (`<td>`). - `<tfoot>` contains the footer rows of the table, often used for summarizing or providing totals. Each section can have its own distinct styling if needed, as demonstrated with the background color applied to the table header and footer. This structure helps in maintaining semantic HTML and enhances accessibility by allowing screen readers to interpret the different parts of the table more accurately. [/QUOTE]
Verification
Post reply
Home
Forums
The Complete HTML Tutorial
Table Header, Body, and Footer 1
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top