Tables and Embedded Content
Represent tabular information correctly and understand embedded resources.
HTML Tables
Tables represent data with meaningful row and column relationships. Core elements include <table>, <tr>, <th>, and <td>. Additional structural elements include <caption>, <thead>, <tbody>, <tfoot>, and <colgroup>.
Accessible Data Table
<table>\n <caption>Developer Salaries</caption>\n <thead>\n <tr><th scope="col">Role</th><th scope="col">Salary</th></tr>\n </thead>\n <tbody>\n <tr><th scope="row">Frontend Developer</th><td>₹12 LPA</td></tr>\n <tr><th scope="row">Backend Developer</th><td>₹15 LPA</td></tr>\n </tbody>\n</table>💡 Header cells and scope attributes help assistive technologies understand table relationships.
Key Takeaways
- Use tables for data, not page layout.
- Use th for headers and scope when appropriate.
Knowledge Check
Which element represents a table header cell?
Embedding External Content
The <iframe> element embeds another browsing context inside a page. Common uses include maps, videos, and trusted external applications. When embedding untrusted content, use security controls such as sandbox where appropriate.
Sandboxed iframe
<iframe\n src="https://example.com/widget"\n title="Example widget"\n sandbox="allow-scripts">\n</iframe>💡 The iframe embeds another document. The title helps identify it to assistive technologies and sandbox can restrict capabilities.
Key Takeaways
- Give iframes meaningful titles.
- Consider sandboxing when embedding content from external or untrusted sources.
Knowledge Check
Which attribute describes an iframe to assistive technology?