HTML Tables

Create a schedule with multiple employees. Use rowspan when one shift label applies to multiple consecutive employee rows.

Exercise 5: Complex Regional Report

Create a table that groups quarterly figures under two regional headings. Give the relevant headers unique IDs and use headers to associate data cells with their row and column headings.

Exercise 6: Responsive Data Table

Place a table with at least five columns inside a horizontally scrollable wrapper. Test it on a narrow screen or by resizing your browser.

Exercise 7: Debug the Table

Identify and correct the structural and semantic issues in the following example.

<table>
    <tr>
        <td>Name</td>
        <td>Marks</td>
    </tr>
    <tr>
        <th colspan="2">Rahul</th>
        <td>85</td>
    </tr>
</table>

Think about which cells are headings, whether the number of columns is consistent and whether the table needs a caption.

18. Section 10 Quiz: Test Your Understanding

Answer all 10 questions before reading the answer key. The quiz covers table structure, captions, headers, spans, grouping elements, accessibility and responsive behavior.

Question 1: Basic Table Structure

Which element represents a row in an HTML table?

1. <td>
2. <tr>
3. <th>
4. <tbody>

Question 2: Table Captions

What is the primary purpose of the caption element?

1. To merge cells
2. To identify or describe the table
3. To create a new column
4. To replace every th element

Question 3: Table Header Groups

Which element groups the main body rows of a table?

1. <thead>
2. <tfoot>
3. <tbody>
4. <caption>

Question 4: Column and Row Headers

Which scope values are most commonly used to identify a simple column header and a simple row header?

1. scope="top" and scope="left"
2. scope="col" and scope="row"
3. scope="column" and scope="line"
4. scope="head" and scope="body"

Question 5: colspan