9. Tables (Data Architecture)
Table based layout se lekar complex multi-dimensional data presentation ka professional markup.
1. Table Anatomy and the Anti-Pattern
Basic: Table ban banane ke liye <table>, row ke liye <tr>, header cell ke liye <th> aur basic data cell ke liye <td> use hota hai.
Pro: 2005 se pehle CSS flexbox nahi the, tab poori websites ki grids tables ki rows mein dali jati thi (Table-based design). Yeh web standards ka sabse bada Anti-Pattern hai. Aaj tables sirf aur sirf Tabular Relational Data (jaise Excel sheets, matrices, schedules) render karne ke liye strict rule se use hoti hain.
2. Advanced Grouping (thead, tbody, tfoot)
Pro: Enterprise level reporting apps mein thousands of rows load karni hoti hain. Wahan grouping tags kaam aate hain:
<thead>: Isme column headings aati hain. CSS position sticky lagane ke liye ye bohot useful hai.<tbody>: Main data loop idhar chalta hai. Aap UI component library mein is body ko alag component bana kar map karte hain.<tfoot>: Grand totals ki row. Agar printing layout use ho raha hai (Ctrl+P), toh browsers automatically thead aur tfoot ko har paper page par repeat karte hain!
3. Dimensional Merging: Colspan & Rowspan
Pro: Cells ko merge karke complex UI banane ki mechanism:
colspan="3" tag vertical borders ko dissolve kar dega aur current cell aage ke 3 columns ki width capture kar lega.
rowspan="2" cell ko neeche wale row mein penetrate karwata hai.
Critical Rule: Jab aap merging attributes use karte hain, toh adjacent rows/columns se un utne <td> elements ko delete karna padta hai varna cell table structure se bahar 'leak' hone lagega.
4. Accessibility Context for Screen Readers
Pro: Tables screen readers ke liye bhool-bhulaiya hoti hain.
<caption>: Table tag ke just baad likhna zaruri hai, yeh screen reader ko batata hai aage ka massive data matrix kis topic pe hai.scope="col"&scope="row": Ye attributes sirf<th>element par lagte hain, jisse disabled user ko samajh ata hai ki value column se derive ho rahi hai ya row se.