Kit Library / Computer Science / Web Development

⚡ Topic Learning Kit

HTML Tables

English 19 leveled MCQs 18 flashcards 7 games Free

19 MCQs → 18 Flashcards → 13 Quick Revision →

Study this kit in the app Browse more kits →

Shared by a Veda learner · Generated with Veda AI

Veda Bites

The whole idea, one bite at a time

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

What is an HTML Table?

Organize data in rows and columns.

An HTML table is a structured way to display data in a grid of rows and columns. It is defined using the `<table>` element, which contains rows (`<tr>`) and cells (`<td>` for data, `<th>` for headers). Tables are ideal for presenting tabular information like schedules, pricing, or comparisons.

↳ An HTML table is a grid of rows and columns built with `<table>`, `<tr>`, and `<td>`/`<th>`.

✏️ Example

Basic Table Structure

See a simple table in action.

This creates a table with two columns (Name and Age) and two data rows. The header row uses `<th>` to label each column.

↳ A basic table uses `<tr>` for rows and `<th>`/`<td>` for header/data cells.

💡 Key Idea

Table Sections: thead, tbody, tfoot

Group rows for clarity and styling.

Tables can be divided into semantic sections: `<thead>` (header rows), `<tbody>` (body rows), and `<tfoot>` (footer rows). This improves accessibility and allows separate styling or scrolling of the body.

↳ Use `<thead>`, `<tbody>`, and `<tfoot>` to structure table content semantically.

✏️ Example

Using thead, tbody, and tfoot

Organize a table with sections.

↳ Splitting a table into thead, tbody, and tfoot makes it more readable and accessible.

💡 Key Idea

Spanning Columns and Rows

Merge cells across columns or rows.

Use the `colspan` attribute on a `<td>` or `<th>` to make a cell span multiple columns, and `rowspan` to span multiple rows. This is useful for grouping data or creating headers that cover sub-columns.

↳ `colspan` and `rowspan` let you merge cells to create complex table layouts.

✏️ Example

Using colspan and rowspan

Merge cells for better layout.

↳ `colspan` merges columns, `rowspan` merges rows, enabling complex table structures.

💡 Key Idea

Table Caption and Accessibility

Add a title and improve screen readers.

The `<caption>` element provides a title for the table, displayed above it. For accessibility, use the `scope` attribute on `<th>` to indicate whether it is a column header (`scope="col"`) or a row header (`scope="row"`).

↳ Add a `<caption>` and use `scope` on headers to make tables more accessible.

✏️ Example

Adding Caption and Scope

Make your table accessible.

↳ Use `<caption>` and `scope` to provide context and improve accessibility.

⚠️ Common Mistake

Using Tables for Layout

Don't use tables for page design.

A common mistake is using HTML tables to create page layouts (e.g., sidebars, headers). This is outdated and harms accessibility and responsiveness. Tables should be used only for tabular data.

↳ Tables are for data, not layout. Use CSS for page structure.

✅ Best Practice

Styling Tables with CSS

Make tables look clean and readable.

Use CSS to style tables: add borders, padding, background colors, and hover effects. The `border-collapse` property is often set to `collapse` to remove double borders.

↳ Style tables with CSS for better readability and visual appeal.

🛠️ Application

Real-World Use Cases

Where tables are essential.

↳ Tables are used wherever structured data needs to be presented clearly.

🎯 Exam Tip

Remembering Table Tags

Mnemonics for table elements.

To remember the order: Table → TR (row) → TH (header) / TD (data). Think: "Table Rows Head Data".

↳ Remember: Table → TR → TH/TD.

❓ Did You Know

Tables Before CSS

How websites were built in the 90s.

Before CSS became powerful, web developers used complex nested tables to create multi-column layouts. This made code hard to maintain and caused accessibility issues. Modern web design uses CSS Grid and Flexbox instead.

↳ Tables were once used for layout, but now CSS handles that.

Smart notes

What you'll study, topic by topic

HTML Tables: Structure, Attributes, and Best Practices

8 min

HTML tables are used to display tabular data in a structured grid of rows and columns. They are built with elements like ``, ``, ``, and ``, and can be enhanced with attributes like `colspan`, `rowspan`, and `scope` for…

HTML tables are defined with ``, rows with ``, and cells with `` (data) or `` (header).
Use ``, ``, and `` to group rows semantically.
The `colspan` attribute merges cells across columns; `rowspan` merges across rows.

Full explanation, worked examples & memory tricks in the app

Leveled MCQ practice

Try the smart MCQs from this kit

All 19 questions, laddered from warm-up to topper-level, each with its answer and the reasoning behind it.

Warm-up · 8 questions

Q1. Which HTML element is used to define a table row?

Beginner

A <table>

B <th>

C <td>

D <tr>

Show the answer

D · <tr>

The element defines a table row; defines a data cell, a header cell, and the table itself.

Q2. Which element is used to define a table header cell?

Beginner

A <td>

B <caption>

C <thead>

D <th>

Show the answer

D · <th>

defines a header cell, which is typically bold and centered by default.

Q3. What is the purpose of the <caption> element in a table?

Beginner

A To specify column width

B To define a row of data

C To group header content

D To provide a title or description for the table

Show the answer

D · To provide a title or description for the table

The element provides a title or description for the table, improving accessibility and context.

Q4. What is the default border value for an HTML table if no border attribute is specified?

Beginner

A 2

B 1

C 0

D No border is shown by default

Show the answer

C · 0

By default, tables have no border; you must add the border attribute or CSS to show borders.

Q5. Which attribute is used to define the number of columns a table should have?

Beginner

A width

B None; columns are defined by cells in rows

C colspan

D cols

Show the answer

B · None; columns are defined by cells in rows

HTML tables do not have a 'cols' attribute; columns are implicitly defined by the number of cells in each row.

Q6. What is the correct HTML for adding a caption to a table?

Beginner

A <header>Monthly Sales</header>

B <table-caption>Monthly Sales</table-caption>

C <caption>Monthly Sales</caption>

D <title>Monthly Sales</title>

Show the answer

C · <caption>Monthly Sales</caption>

The element is placed directly inside the element to provide a title.

Q7. Which element is used to define a data cell in a table?

Beginner

A <tr>

B <data>

C <th>

D <td>

Show the answer

D · <td>

stands for table data and is used for standard cells containing data.

Q8. What is the default alignment of text in a <th> element?

Beginner

A Center

B Left

C Justified

D Right

Show the answer

A · Center

By default, text is centered and bold, unlike which is left-aligned by default.

Building up · 9 questions

Q9. Which attribute is used to merge two or more columns in a table cell?

Intermediate

A merge

B rowspan

C span

D colspan

Show the answer

D · colspan

The colspan attribute specifies how many columns a cell should span horizontally.

Q10. Which attribute is used to merge two or more rows in a table cell?

Intermediate

A span

B colspan

C rowmerge

D rowspan

Show the answer

D · rowspan

The rowspan attribute specifies how many rows a cell should span vertically.

Q11. Which element is used to group the body content of a table?

Intermediate

A <table-body>

B <tbody>

C <thead>

D <tfoot>

Show the answer

B · <tbody>

groups the main data rows of a table, helping with structure and styling.

Q12. Which element is used to group the header content of a table?

Intermediate

A <header>

B <thead>

C <th>

D <caption>

Show the answer

B · <thead>

is used to group the header rows of a table, typically containing elements.

Q13. Which element is used to group the footer content of a table?

Intermediate

A <footer>

B <tfoot>

C <tf>

D <table-footer>

Show the answer

B · <tfoot>

groups the footer rows of a table, often used for summaries or totals.

Q14. What is the purpose of the scope attribute on a <th> element?

Intermediate

A To associate a header cell with a row or column

B To define the alignment of the header text

C To merge header cells

D To specify the width of the header cell

Show the answer

A · To associate a header cell with a row or column

The scope attribute indicates whether a header cell applies to a row (scope="row") or column (scope="col"), improving accessibility.

Q15. Which of the following is a best practice for creating accessible tables?

Intermediate

A Using inline styles for borders

B Using <th> with scope attributes for header cells

C Using <td> for all cells including headers

D Omitting the <caption> element

Show the answer

B · Using <th> with scope attributes for header cells

Using with scope attributes helps screen readers understand the table structure, making it accessible.

Q16. The <tfoot> element must appear after all <tr> elements in the table.

Intermediate

A True

B False

Show the answer

B · False

In HTML5, can appear before or after , but it must be after and can be before or after ; it is not required to be at the end.

Q17. The border attribute is deprecated in HTML5 for tables.

Intermediate

A True

B False

Show the answer

A · True

The border attribute is deprecated in HTML5; CSS is recommended for styling borders.

Topper level · 2 questions

Q18. Which attribute was used in older HTML to specify the space between cell borders?

Advanced

A cellspacing

B border-spacing

C margin

D cellpadding

Show the answer

A · cellspacing

The cellspacing attribute (deprecated in HTML5) controlled the space between cells; CSS border-spacing is now preferred.

Q19. Which attribute was used in older HTML to specify the space inside a cell between the content and the cell border?

Advanced

A padding

B cellpadding

C inner-margin

D cellspacing

Show the answer

B · cellpadding

The cellpadding attribute (deprecated in HTML5) controlled the space inside cells; CSS padding is now preferred.

Flashcards

Tap a card to flip it

18 flashcards in this kit — the app reviews them with spaced repetition so the right card returns on the right day.

Learning games

Play your way through this kit

Every game is built from this kit's own content — scores feed your mastery, so playing counts as studying.

🎮

Word Match