Kit Library / Computer Science / Web Development
⚡ Topic Learning KitShared by a Veda learner · Generated with Veda AI
Veda Bites are swipeable micro-lessons — each one teaches exactly one idea. The bites below come from this kit — swipe through them in the app.
💡 Key Idea
Rows first, cells inside — that's the rule.
An HTML table is constructed row by row, not column by column. Each `<tr>` defines a row, and cells (`<th>` or `<td>`) live inside that row.
↳ You always write rows first; the browser figures out the columns from the cells inside each row.
📖 Definition
Four tags power every HTML table.
↳ Memorize these four: table, tr, th, td — every table is built from them.
⚖️ Comparison
One is bold, one is plain — know why.
↳ Use <th> for labels and <td> for values — never swap them just for styling.
See a real table come together.
↳ Header row first, then one <tr> per data record — that's the standard pattern.
💡 Key Idea
One cell can span many columns.
↳ Use colspan for horizontal merges and rowspan for vertical merges — but keep them minimal for clarity.
⚙️ Process
Split your table into three zones.
These tags don't change the visual look by default, but they organize the table semantically and help screen readers and CSS target sections.
↳ thead, tbody, tfoot make big tables easier to read, style, and print.
⚠️ Common Mistake
Tables are for data, not design.
↳ If the content isn't naturally rows-and-columns data, don't use a table.
Every table deserves a title.
The `<caption>` tag gives a table a visible title and is read aloud by screen readers, improving accessibility.
↳ Always add <caption> — it's one line that boosts clarity and accessibility.
⭐ Important Fact
No border unless you ask for one.
By default, HTML tables have no visible borders. The old `border="1"` attribute works but is deprecated — modern practice uses CSS `border` or `border-collapse`.
↳ Style table borders with CSS, not the deprecated border attribute.
🎯 Exam Tip
Examiners love testing nesting order.
↳ Wrong nesting is the #1 reason students lose marks on table questions.
🧠 Memory Trick
Table → Row → Cell. Say it thrice.
Think T-R-C: Table contains Rows, Rows contain Cells. Just like a spreadsheet — sheet, row, cell.
↳ T-R-C (Table-Row-Cell) keeps your nesting correct every time.
🌍 Real World
Tables run more of the web than you think.
↳ Any time data is naturally rows-and-columns, HTML tables are the right tool.
🛠️ Application
Screen readers need your table's map.
For complex tables, add `scope="col"` or `scope="row"` to `<th>` so assistive tech knows whether a header labels a column or a row.
↳ scope attributes turn a visual table into an accessible one.
🚫 Warning
Never leave a cell truly empty.
↳ Use in blank cells to preserve table alignment.
❓ Did You Know
Tables were the original layout tool.
Before CSS Flexbox and Grid existed, web designers used invisible HTML tables to position headers, sidebars, and footers. This is why old websites often look rigid and hard to make responsive.
↳ Tables shaped early web design — modern CSS exists partly to replace them.
HTML tables organize data into rows and columns using the element along with , , and tags. This topic covers table structure, spanning cells with colspan and rowspan, grouping with thead/tbody/tfoot, and best practices…
Full explanation, worked examples & memory tricks in the app
All 18 questions, laddered from warm-up to topper-level, each with its answer and the reasoning behind it.
Q1. Which tag declares the start of an HTML table?
BeginnerC · `<table>`
`` is the container element that declares a table. `` only defines a single row inside it.
Q2. Which tag represents one horizontal row of data?
BeginnerC · `<tr>`
`` stands for table row and holds the cells for one horizontal line of data.
Q3. Which tag holds an ordinary data cell inside a row?
BeginnerB · `<td>`
`` is the table data cell that holds ordinary content inside a ``.
Q4. Which tag marks a cell as a header or label for surrounding data?
BeginnerC · `<th>`
`` is the table header cell; it carries the semantic meaning of a label for the data around it.
Q5. Is there a dedicated column tag in basic HTML?
BeginnerC · No, columns are implied by cell position.
Basic HTML has no column tag. Columns are implied by the position of cells within each row.
Q6. HTML tables are designed for tabular data, not page layout; using them for layout breaks accessibility and responsiveness.
BeginnerA · True
HTML tables are designed for tabular data, not page layout; using them for layout breaks accessibility and responsiveness.
Q7. A marksheet has a 'Science' header that should cover Physics, Chemistry, and Biology columns. Which attribute should the header cell use?
IntermediateD · `colspan="3"`
`colspan="3"` makes the cell stretch horizontally across three columns, which is exactly what a header covering three subject columns needs.
Q8. A cell should stretch vertically to label two rows. Which attribute achieves this?
IntermediateB · `rowspan="2"`
`rowspan="2"` makes a cell stretch across two rows vertically.
Q9. You use `colspan="2"` on a cell in a row that originally had four cells. What must you do?
IntermediateB · Remove one cell that would have occupied the merged position.
When a cell spans multiple positions, the cells that would have occupied those positions must be removed, or the row will have too many cells and the grid will break.
Q10. Which group of tags is used to divide a long table into header, body, and footer sections?
IntermediateD · `<thead>`, `<tbody>`, `<tfoot>`
``, ``, and `` group rows into header, body, and footer sections of a table.
Q11. Which tag provides a visible title for a table that is also read by assistive technology?
IntermediateB · `<caption>`
`` sits inside the table and provides a visible title that screen readers announce before the table content.
Q12. Which CSS rule merges adjacent cell borders into a single clean line?
IntermediateD · `border-collapse: collapse;`
`border-collapse: collapse;` merges adjacent cell borders into one clean line. `border-spacing` only controls gaps when borders are not collapsed.
Q13. A student writes a table where the header row uses `<td>` with bold text instead of `<th>`. What is the main problem?
IntermediateC · The header loses its semantic meaning for screen readers.
`` carries semantic meaning that `` does not. Screen readers announce `` content before related data cells, so using `` breaks accessibility even if the visual style looks the same.
Q14. A developer needs to arrange a page header, sidebar, and footer. Which approach is correct?
AdvancedB · Use CSS Grid or Flexbox for the layout.
Tables are for tabular data, not page layout. Using tables for layout confuses screen readers, breaks responsiveness, and produces bloated HTML. CSS Grid or Flexbox is the correct tool.
Q15. A table has four rows, each with three cells. A developer adds a fourth cell to one row only. What happens?
AdvancedA · The entire grid shifts because cell counts must match across rows.
Columns are implied by cell position, so cell counts must match across rows. An extra cell in one row shifts the entire grid.
Q16. A developer wants to restyle an old table that uses `border="1"`, `cellpadding`, and `cellspacing`. What is the recommended modern approach?
AdvancedD · Replace them with CSS properties like `border-collapse` and `padding`.
Legacy attributes like `border`, `cellpadding`, and `cellspacing` are replaced by CSS. `border-collapse: collapse;` merges borders and `padding` controls cell spacing.
Q17. A developer is creating a table where the header for 'Science' must span three columns: Physics, Chemistry, and Biology. Which of the following implementations correctly uses the `colspan` attribute, and what must the developer remember to do with the other cells in that row?
AdvancedA · <th colspan='3'>Science</th> <td></td> <td></td>
The correct implementation is 'Science ' because the developer must remove the cells that would have occupied the positions under the 'Science' header to avoid breaking the grid.
Q18. Consider a long table that requires a footer for totals. Which of the following structures correctly groups the rows into header, body, and footer sections, ensuring that the footer is semantically correct and can be styled separately?
AdvancedD · <table><thead><tr><th>Header</th></tr></thead><tbody><tr><td>Data</td></tr></tbody><tfoot><tr><td>Total</td></tr></tfoot></table>
The correct structure is 'HeaderDataTotal' because it properly groups the header, body, and footer sections, allowing for better accessibility and styling.
20 flashcards in this kit — the app reviews them with spaced repetition so the right card returns on the right day.
Every game is built from this kit's own content — scores feed your mastery, so playing counts as studying.
Word Match
Built from this kit's own content
True False
Built from this kit's own content
Memory Match
Built from this kit's own content
Flashcard Battle
Built from this kit's own content
Speed Quiz
Built from this kit's own content
Guess Term
Built from this kit's own content
Sequence Builder
Built from this kit's own content
Categorization
Built from this kit's own content
Revision Battle
Built from this kit's own content
Playable in the app
The full Veda Bites deck, complete notes, spaced-repetition flashcards, leveled MCQs, tests and games for this kit — plus Daily Facts and the Arena, every day.