Chapter 6 Beginner 55 Questions

Practice Questions — Lists and Tables

← Back to Notes

21 Easy

15 Medium

7 Hard

Topic-Specific Questions

Question 1

Easy

What does this HTML display?

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

ul is an unordered list. What do unordered lists use for markers?

A bulleted list with three items: Red, Green, Blue.

Question 2

Easy

What does this HTML display?

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

ol stands for ordered list.

A numbered list: 1. First, 2. Second, 3. Third.

Question 3

Easy

Create an unordered list of your three favourite fruits inside a complete HTML page.

Use

tags inside the body.

<!DOCTYPE html>
<html>
<body>
  <h1>My Favourite Fruits</h1>
  <ul>
    <li>Mango</li>
    <li>Banana</li>
    <li>Apple</li>
  </ul>
</body>
</html>

Question 4

Easy

What does this display?

<ol start="3">
  <li>Apple</li>
  <li>Banana</li>
</ol>

The start attribute changes the first number.

3. Apple
4. Banana

Question 5

Easy

What does this display?

<ol type="A">
  <li>Option one</li>
  <li>Option two</li>
  <li>Option three</li>
</ol>

The type attribute changes the numbering style.

A. Option one
B. Option two
C. Option three

Question 6

Easy

Create a shopping list with nested items. Top level: Groceries and Electronics. Under Groceries: Milk and Bread. Under Electronics: Headphones and Charger.

Put a nested

<ul>
  <li>Groceries
    <ul>
      <li>Milk</li>
      <li>Bread</li>
    </ul>
  </li>
  <li>Electronics
    <ul>
      <li>Headphones</li>
      <li>Charger</li>
    </ul>
  </li>
</ul>

Question 7

Easy

Aarav wrote this list but it is invalid HTML. Fix it:

<ul>
  <li>Fruits</li>
  <ul>
    <li>Apple</li>
  </ul>
</ul>

Where should the nested ul go?

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
    </ul>
  </li>
</ul>

Question 8

Easy

Create a description list with two terms: 'HTML' (meaning: structure of web pages) and 'CSS' (meaning: style of web pages).

Use

, and: .

<dl>
  <dt>HTML</dt>
  <dd>Structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Style of web pages</dd>
</dl>

Question 9

Easy

How many rows will this table have?

<table>
  <tr><th>A</th><th>B</th></tr>
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
</table>

Count the tr tags.

3 rows.

Question 10

Easy

Build a table showing 3 students with their marks. Columns: Name and Marks. Students: Aarav (92), Priya (88), Rohan (75).

Use , , , .

<table border="1">
  <caption>Cricket Scores</caption>
  <thead>
    <tr>
      <th>Match</th>
      <th>Runs</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Match 1</td><td>285</td></tr>
    <tr><td>Match 2</td><td>310</td></tr>
    <tr><td>Match 3</td><td>250</td></tr>
  </tbody>
</table>

Question 18

Medium

How many td cells should the second row have?

<table>
  <tr>
    <td rowspan="2">Merged</td>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    ???
  </tr>
</table>

The first column is already filled by the rowspan.

2 td cells (the rowspan already fills the first column).

Question 19

Medium

Build a 3-column, 3-row timetable. Columns: Day, Period 1, Period 2. Days: Monday (Maths, Science), Tuesday (English, History), Wednesday (Hindi, Art).

Header row + 3 data rows = 4 tr elements.

<table border="1">
  <tr>
    <th>Day</th>
    <th>Period 1</th>
    <th>Period 2</th>
  </tr>
  <tr>
    <td>Monday</td><td>Maths</td><td>Science</td>
  </tr>
  <tr>
    <td>Tuesday</td><td>English</td><td>History</td>
  </tr>
  <tr>
    <td>Wednesday</td><td>Hindi</td><td>Art</td>
  </tr>
</table>

Question 20

Medium

Which list type should you use for a list of ingredients in a recipe, where the order does not matter?

Order does not matter.

<ul> (unordered list).

Question 21

Medium

Rohan wrote this rowspan table, but the cells are misaligned. Fix it:

<tr>
  <td rowspan="2">Header</td>
  <td>A</td>
</tr>
<tr>
  <td>Header</td>
  <td>B</td>
</tr>

When a cell uses rowspan, don't repeat it in the next row.

<tr>
  <td rowspan="2">Header</td>
  <td>A</td>
</tr>
<tr>
  <td>B</td>
</tr>

Question 22

Medium

Create a table with a row that spans 3 columns across the top. Title: 'Student Report'. Below it, 3 columns: Subject, Marks, Grade. Add 2 students.

Use colspan=3 on the title cell.

<table border="1">
  <tr>
    <th colspan="3">Student Report</th>
  </tr>
  <tr>
    <th>Subject</th><th>Marks</th><th>Grade</th>
  </tr>
  <tr>
    <td>Maths</td><td>92</td><td>A</td>
  </tr>
  <tr>
    <td>Science</td><td>85</td><td>B</td>
  </tr>
</table>

Question 23

Medium

Where should the caption tag be placed in a table?

It is the title of the table.

Right after the opening <table> tag, before any <tr>.

Question 24

Medium

Ananya is using a table to place a logo and a menu side by side. Explain why this is wrong and what she should use.

Tables are for data only.

Tables should not be used for page layout. Ananya should use semantic tags like <header> with a logo div and a <nav>, and arrange them using CSS Flexbox or Grid.

Question 25

Medium

Create a description list for FAQs. Question 1: 'What is HTML?' Answer: 'A markup language for web pages.' Question 2: 'Is HTML hard?' Answer: 'No, it is beginner-friendly.'

Use dt for questions and dd for answers.

<dl>
  <dt>What is HTML?</dt>
  <dd>A markup language for web pages.</dd>
  <dt>Is HTML hard?</dt>
  <dd>No, it is beginner-friendly.</dd>
</dl>

Question 26

Hard

How many cells does this row need?

<table> <!-- 4 columns total -->
  <tr>
    <td colspan="2">Wide</td>
    <td rowspan="2">Tall</td>
    <td>Normal</td>
  </tr>
  <tr>
    ???
  </tr>
</table>

The 3rd column is filled by rowspan. How many columns are left?

3 td cells (columns 1, 2, and 4 need cells; column 3 is already taken by rowspan).

Question 27

Hard

Build a complete HTML page with a table showing 4 students and their marks in 3 subjects (Maths, Science, English). Include caption 'Term 1 Results', thead, tbody, and a tfoot row showing the class average for each subject.

Use caption, thead, tbody, tfoot, and calculate averages manually.

<!DOCTYPE html>
<html>
<body>
<table border="1">
  <caption>Term 1 Results</caption>
  <thead>
    <tr>
      <th>Name</th><th>Maths</th><th>Science</th><th>English</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Aarav</td><td>92</td><td>88</td><td>85</td></tr>
    <tr><td>Priya</td><td>95</td><td>91</td><td>89</td></tr>
    <tr><td>Rohan</td><td>78</td><td>82</td><td>80</td></tr>
    <tr><td>Ananya</td><td>85</td><td>87</td><td>90</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Average</td><td>87.5</td><td>87.0</td><td>86.0</td></tr>
  </tfoot>
</table>
</body>
</html>

Question 28

Hard

What is wrong with this nested list structure?

<ul>
  <li>Item 1</li>
  <ol>
    <li>Sub 1</li>
  </ol>
  <li>Item 2</li>
</ul>

The ol is in the wrong place.

The nested <ol> is a direct child of <ul>, which is invalid. It must be inside an <li>.

Mixed & Application Questions

Question 1

Easy

Which tag would you use for a list of 5 hobbies in no particular order?

The key phrase is 'no particular order'.

<ul>

Question 2

Easy

Write HTML for a numbered list of 3 goals for the year.

Use

<ol>
  <li>Learn HTML and CSS</li>
  <li>Build my first website</li>
  <li>Publish it online</li>
</ol>

Question 3

Easy

What tag is used for the title of a table?

It goes right after the opening table tag.

<caption>

Question 4

Easy

Create a simple table with 2 columns (Name, Age) and 2 rows of data (Aarav 13, Priya 14). Include a header row.

One tr for headers with th, then two tr rows with td.

<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Aarav</td><td>13</td></tr>
  <tr><td>Priya</td><td>14</td></tr>
</table>

Question 5

Easy

What is the difference between

Think about the markers they use.

<ul> is unordered (bullet points). <ol> is ordered (numbered).

Question 6

Easy

Why is this list wrong?

<ol>
  Apple
  Banana
  Cherry
</ol>

Every item needs its own tag.

Each item must be wrapped in <li>. Without li, the items don't form a list — they just appear as plain text.

Question 7

Medium

Build a table with 4 columns and 3 rows. The first row is a header that spans all 4 columns with the word 'Menu'. Below that, columns: Item, Price, Category, Available.

Use colspan=4 on the title.

<table border="1">
  <tr><th colspan="4">Menu</th></tr>
  <tr>
    <th>Item</th><th>Price</th><th>Category</th><th>Available</th>
  </tr>
  <tr>
    <td>Samosa</td><td>20</td><td>Starter</td><td>Yes</td>
  </tr>
</table>

Question 8

Medium

What does this display?

<ol type="i" start="2">
  <li>One</li>
  <li>Two</li>
</ol>

Lowercase Roman numerals, starting from 2.

ii. One
iii. Two

Question 9

Medium

Create a 3-level nested list. Level 1: Continents (Asia). Level 2: Countries (India). Level 3: Cities (Delhi, Mumbai).

Nest a ul inside an li, and another ul inside that.

<ul>
  <li>Asia
    <ul>
      <li>India
        <ul>
          <li>Delhi</li>
          <li>Mumbai</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Question 10

Medium

In a table row, what is the main visual difference between

and . How many columns are filled?

A. 2
B. 3
C. 4
D. 5

Answer: B
B is correct. colspan=2 fills 2 columns (1-2), and the second td fills 1 more (column 3). Total filled = 3 columns. Column 4 is left empty, so the row is incomplete and the table may render oddly.

MCQ 22

Which is the correct way to nest an ordered list inside an unordered list?

A. Place <ol> directly inside <ul>
B. Place <ol> inside an <li> inside <ul>
C. Use <ul> and <ol> as siblings
D. Nesting is not allowed

Answer: B
B is correct. Nested lists always go inside a list item (<li>), never directly inside another <ul> or <ol>. A ul/ol may only have li as direct children.

MCQ 23

What will

First
Second

display?

A. 1. First, 2. Second
B. I. First, II. Second
C. i. First, ii. Second
D. a. First, b. Second

Answer: C
C is correct. type="i" is lowercase Roman numerals. Capital I would give I. First, II. Second.

MCQ 24

If a table has 3 rows and 3 columns, and the top-left cell uses rowspan="3", how many total

,
for headers, and	for data. `<table border="1"> <tr> <th>Name</th> <th>Marks</th> </tr> <tr> <td>Aarav</td> <td>92</td> </tr> <tr> <td>Priya</td> <td>88</td> </tr> <tr> <td>Rohan</td> <td>75</td> </tr> </table>` Question 11 Easy What does this display? `<ol reversed> <li>Gold</li> <li>Silver</li> <li>Bronze</li> </ol>` The reversed attribute counts backwards. 3. Gold 2. Silver 1. Bronze Question 12 Easy Write an ordered list of the steps to make a cup of tea. At least 4 steps. Use because the order matters. `<ol> <li>Boil water in a pan.</li> <li>Add tea leaves.</li> <li>Add milk and sugar.</li> <li>Strain into a cup and serve.</li> </ol>` Question 13 Easy Which tag makes text bold and centered in a table by default? It is a header cell. `<th>` Question 14 Easy Priya's table has no rows. Find the bug: `<table> <th>Name</th> <th>Age</th> <td>Priya</td> <td>15</td> </table>` Table cells must be wrapped in something. `<table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>15</td> </tr> </table>` Question 15 Easy Create a nested list: top level items are 'Cricket' and 'Football'. Under Cricket list two players: Virat and Rohit. Under Football list two players: Messi and Ronaldo. Nest a inside each . `<ul> <li>Cricket <ul> <li>Virat</li> <li>Rohit</li> </ul> </li> <li>Football <ul> <li>Messi</li> <li>Ronaldo</li> </ul> </li> </ul>` Question 16 Medium What does this display? `<table> <tr> <td colspan="2">Title</td> </tr> <tr> <td>A</td> <td>B</td> </tr> </table>` colspan=2 means the cell stretches across 2 columns. A table with 2 rows. The first row has one cell 'Title' spanning both columns. The second row has two cells: A and B. Question 17 Medium Create a table with caption 'Cricket Scores', columns Match and Runs, and 3 rows of data. Include thead and tbody. Use
and	? Think about default styling. `<th>` content is bold and centered by default. `<td>` content is normal weight and left-aligned. Question 11 Medium Vikram wants a 3-column table. Why is this broken? `<tr> <td>A</td> <td colspan="2">B</td> <td>C</td> </tr>` Count the column widths: 1 + 2 + 1 = 4. The row uses colspan=2, making B take 2 columns. Total columns = 1 + 2 + 1 = 4, but the table only has 3. This shifts things or widens the table to 4 columns. Question 12 Hard Build a complete HTML page with a styled table (borders, padding, alternating row colors) showing 4 rows of sample data: name and score. Use CSS in the head. Use border-collapse, border, padding, and nth-child for stripes. `<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; margin: 20px; } th, td { border: 1px solid #333; padding: 10px; } tr:nth-child(even) { background-color: #f0f0f0; } th { background-color: #d0e0ff; } </style> </head> <body> <table> <tr><th>Name</th><th>Score</th></tr> <tr><td>Aarav</td><td>92</td></tr> <tr><td>Priya</td><td>95</td></tr> <tr><td>Rohan</td><td>78</td></tr> <tr><td>Ananya</td><td>85</td></tr> </table> </body> </html>` Question 13 Hard How many TD tags need to be written across all rows for a 3-column, 3-row table where the top-left cell has rowspan=2? Row 1 has 3 cells. Row 2 has 2 cells (one is filled). Row 3 has 3 cells. 8 td tags total (3 + 2 + 3). Question 14 Hard Create a nested unordered list for a 3-level course outline: 'HTML' (main), with sub-items 'Basics' and 'Advanced'. Under 'Basics', list 'Tags' and 'Attributes'. Under 'Advanced', list 'Forms' and 'Tables'. 3 levels of nesting. `<ul> <li>HTML <ul> <li>Basics <ul> <li>Tags</li> <li>Attributes</li> </ul> </li> <li>Advanced <ul> <li>Forms</li> <li>Tables</li> </ul> </li> </ul> </li> </ul>` Question 15 Hard Which list type is best for displaying a glossary of web terms and their meanings? It has term-description pairs. `<dl>` (description list). Multiple Choice Questions MCQ 1 Which tag creates an unordered (bulleted) list? A. <ol> B. <ul> C. <list> D. <dl> Answer: B B is correct. `<ul>` stands for unordered list and creates a bulleted list. `<ol>` is for numbered lists, `<dl>` is for description lists, and `<list>` is not a valid HTML tag. MCQ 2 Which tag is used for each item inside a or ? A. <item> B. <li> C. <list-item> D. <dt> Answer: B B is correct. `<li>` (list item) is used for items in both ordered and unordered lists. `<dt>` is for terms in description lists, not for ul/ol. MCQ 3 Which tag creates a table row? A. <td> B. <row> C. <tr> D. <th> Answer: C C is correct. `<tr>` stands for table row. `<td>` is a data cell, `<th>` is a header cell, and `<row>` is not a valid HTML tag. MCQ 4 Which tag creates a table header cell (bold and centered by default)? A. <td> B. <head> C. <th> D. <header> Answer: C C is correct. `<th>` creates a table header cell. Browsers automatically render its content in bold and center-aligned. `<head>` is the head of the HTML document (not a table cell). MCQ 5 Which attribute makes a table cell span multiple columns? A. colspan B. span C. width D. merge Answer: A A is correct. The `colspan` attribute makes a cell span multiple columns. For example, `<td colspan="3">` makes the cell stretch across 3 columns. MCQ 6 What does the tag stand for? A. Data list B. Display list C. Description list D. Document list Answer: C C is correct. `<dl>` stands for description list. It is used with `<dt>` (description term) and `<dd>` (description description) for term-definition pairs. MCQ 7 In an ordered list, what does type="A" do? A. Makes the list alphabetical B. Uses capital letters (A, B, C) instead of numbers C. Hides the markers D. Starts at A Answer: B B is correct. `type="A"` changes the numbering style to capital letters A, B, C. It does not sort items alphabetically. Other values include `a`, `I`, `i`, and `1` (default). MCQ 8 Which tag wraps the title of a table? A. <title> B. <header> C. <caption> D. <h1> Answer: C C is correct. `<caption>` wraps the title of a table and must be the first child of `<table>`. `<title>` is for the browser tab title, not for tables. MCQ 9 What will this list show: A B C A. 1. A, 2. B, 3. C B. 3. A, 2. B, 1. C C. C, B, A D. A, B, C Answer: B B is correct. The `reversed` attribute counts backwards but does not reverse the items themselves. A is numbered 3, B is 2, and C is 1. MCQ 10 Which tag groups the header rows of a table? A. <head> B. <header> C. <thead> D. <tr class='header'> Answer: C C is correct. `<thead>` wraps the header rows of a table. It goes between `<table>` and `<tbody>`. MCQ 11 For a list of ingredients in a recipe, which list is most appropriate? A. <ol> B. <ul> C. <dl> D. <table> Answer: B B is correct. Ingredients have no specific order, so an unordered list (`<ul>`) is correct. The steps of the recipe would use `<ol>`. MCQ 12 Which tag is used for the definition (description) in a description list? A. <def> B. <dt> C. <dd> D. <li> Answer: C C is correct. `<dd>` is for the description (definition). `<dt>` is the term being described. Both go inside `<dl>`. MCQ 13 What does this ordered list display? A B A. 1. A, 2. B B. 10. A, 11. B C. A, B D. 10. A, 20. B Answer: B B is correct. `start="10"` makes the list begin at 10. The next item continues counting: 11. MCQ 14 Which tag groups the body rows of a table? A. <body> B. <main> C. <tbody> D. <tr> Answer: C C is correct. `<tbody>` wraps the data rows of a table, separating them from the header (`<thead>`) and footer (`<tfoot>`). MCQ 15 For summary rows (like totals at the bottom), which tag should you use? A. <tfoot> B. <footer> C. <summary> D. <tbody> Answer: A A is correct. `<tfoot>` is specifically for footer rows in a table, commonly used for totals and summary data. `<footer>` is a semantic tag for page footers, not tables. MCQ 16 Which of the following is INVALID inside a ? A. <li>text</li> B. <li>text with <strong>bold</strong></li> C. Plain text without any tag D. <li>text with a nested list</li> Answer: C C is correct. A `<ul>` can only contain `<li>` elements as direct children. Plain text or other tags directly inside ul are invalid. MCQ 17 In a 3-column table, which row is correctly using rowspan? A. <tr><td rowspan='2'>A</td><td>B</td><td>C</td></tr> then <tr><td>D</td><td>E</td><td>F</td></tr> B. <tr><td rowspan='2'>A</td><td>B</td><td>C</td></tr> then <tr><td>D</td><td>E</td></tr> C. <tr><td rowspan='2'>A</td></tr> then <tr><td>D</td></tr> D. <tr><td rowspan='2' colspan='3'>A</td></tr> then <tr></tr> Answer: B B is correct. When a cell has rowspan=2, the next row's first column is already taken. So the next row needs only 2 td cells (for columns 2 and 3). Option A has 3 td in row 2, which would be wrong. MCQ 18 What is wrong with using tables for page layout? A. They don't look good B. Tables are banned in HTML5 C. They hurt accessibility, mobile responsiveness, and SEO D. Nothing, tables are fine for layout Answer: C C is correct. Table-based layouts are bad for screen readers (which read cell-by-cell), hard to make responsive for mobile, and confusing for search engines. Use CSS Flexbox or Grid for layout. Tables are still valid for actual data. MCQ 19 Which list type would you use for a 'Top 10 Movies' ranking? A. <ul> B. <ol> C. <dl> D. <table> Answer: B B is correct. A ranking has an order (1st, 2nd, 3rd...), so `<ol>` is correct. You could also use `reversed` to count from 10 down to 1 for a countdown effect. MCQ 20 What does	do? A. Makes the cell 2 pixels wide B. Makes the cell span 2 columns C. Duplicates the cell D. Creates 2 cells Answer: B B is correct. `colspan="2"` merges the cell across 2 columns, making it look like one wide cell. This is useful for headers that cover multiple columns. MCQ 21 In a 4-column table, a row has		A		B	tags are needed? A. 9 B. 7 C. 6 D. 5 Answer: B B is correct. Row 1: 3 td (including the rowspan cell). Row 2: 2 td (first column is filled). Row 3: 2 td. Total = 3 + 2 + 2 = 7. MCQ 25 Which statement about is FALSE? A. It is used for term-definition pairs B. Each term uses <dt> C. Each definition uses <dd> D. Only one <dd> is allowed per <dt> Answer: D D is correct (this statement is false). A single `<dt>` can have multiple `<dd>` tags if it has multiple definitions or descriptions. All the other statements are true. Coding Challenges Challenge 1: Favorite Books List Easy Create a complete HTML page with a heading 'My Favorite Books' and an unordered list of at least 5 books you like. Sample Input (No input required) Sample Output A page with the heading and a bulleted list of 5 books. Must use <ul> and <li>. Full HTML boilerplate (DOCTYPE, html, head, body). `<!DOCTYPE html> <html> <head> <title>My Favorite Books</title> </head> <body> <h1>My Favorite Books</h1> <ul> <li>Wings of Fire - A. P. J. Abdul Kalam</li> <li>The Alchemist - Paulo Coelho</li> <li>Harry Potter - J. K. Rowling</li> <li>Panchatantra - Vishnu Sharma</li> <li>Malgudi Days - R. K. Narayan</li> </ul> </body> </html>` Challenge 2: Recipe with Ordered Steps Easy Create an HTML page for Priya's favourite recipe. Include the recipe name as an h1, an unordered list of ingredients, and an ordered list of steps. Sample Input (No input required) Sample Output A page with the recipe name, a bulleted ingredient list, and a numbered step list. Use both <ul> and <ol>. Include at least 4 ingredients and 4 steps. `<!DOCTYPE html> <html> <head> <title>Masala Chai Recipe</title> </head> <body> <h1>Priya's Masala Chai</h1> <h2>Ingredients</h2> <ul> <li>1 cup water</li> <li>1/2 cup milk</li> <li>1 teaspoon tea leaves</li> <li>Sugar to taste</li> <li>Crushed ginger and cardamom</li> </ul> <h2>Steps</h2> <ol> <li>Boil water in a pan.</li> <li>Add ginger, cardamom, and tea leaves.</li> <li>Pour in milk and boil for 2 minutes.</li> <li>Strain into a cup and add sugar.</li> </ol> </body> </html>` Challenge 3: Class Marks Table Medium Build a table showing 4 students (Aarav, Priya, Rohan, Ananya) and their marks in 3 subjects (Maths, Science, English). Include a caption, a header row with th cells, and all data in a tbody. Sample Input (No input required) Sample Output A table with a title, headers, and 4 rows of student marks. Use caption, thead, tbody, and border="1". At least 4 students. <!DOCTYPE html> <html> <head> <title>Class 8A Marks</title> </head> <body> <table border="1"> <caption>Class 8A - Term 1 Marks</caption> <thead> <tr> <th>Student</th> <th>Maths</th> <th>Science</th> <th>English</th> </tr> </thead> <tbody> <tr><td>Aarav</td><td>92</td><td>88</td><td>85</td></tr> <tr><td>Priya</td><td>95</td><td>91</td><td>89</td></tr> <tr><td>Rohan</td><td>78</td><td>82</td><td>80</td></tr> <tr><td>Ananya</td><td>85</td><td>87</td><td>90</td></tr> </tbody> </table> </body> </html> Challenge 4: Nested Menu for a Restaurant Medium Create a nested list for a restaurant menu with 3 categories: Starters, Main Course, and Desserts. Each category should have at least 3 items nested inside. Sample Input (No input required) Sample Output An outer list of 3 categories, each with an indented sub-list of items. Use nested <ul> tags. The nested ul must be inside the parent li. `<!DOCTYPE html> <html> <head> <title>Restaurant Menu</title> </head> <body> <h1>Spice Palace Menu</h1> <ul> <li>Starters <ul> <li>Samosa</li> <li>Paneer Tikka</li> <li>Vegetable Pakora</li> </ul> </li> <li>Main Course <ul> <li>Butter Chicken</li> <li>Dal Makhani</li> <li>Paneer Butter Masala</li> </ul> </li> <li>Desserts <ul> <li>Gulab Jamun</li> <li>Rasmalai</li> <li>Kulfi</li> </ul> </li> </ul> </body> </html>` Challenge 5: Timetable with colspan Medium Create a school timetable with columns for Time and 3 days (Mon, Tue, Wed). Include a Lunch Break row that uses colspan=3 to span across all three days. Sample Input (No input required) Sample Output A timetable with a Lunch Break row that stretches across all 3 day columns. Must use colspan. At least 4 rows including the lunch row. `<!DOCTYPE html> <html> <head> <title>Timetable</title> </head> <body> <table border="1"> <caption>Ananya's Timetable</caption> <tr> <th>Time</th><th>Mon</th><th>Tue</th><th>Wed</th> </tr> <tr> <td>9:00</td><td>Maths</td><td>Science</td><td>English</td> </tr> <tr> <td>10:00</td><td>Hindi</td><td>Art</td><td>History</td> </tr> <tr> <td>11:00</td><td colspan="3">Lunch Break</td> </tr> <tr> <td>12:00</td><td>Music</td><td>Sports</td><td>Computer</td> </tr> </table> </body> </html>` Challenge 6: Glossary Description List Medium Create a description list for at least 5 web development terms (HTML, CSS, JavaScript, Browser, URL) with their meanings. Sample Input (No input required) Sample Output A glossary with 5 terms and their definitions. Use <dl>, <dt>, and <dd>. Full HTML page. <!DOCTYPE html> <html> <head> <title>Web Glossary</title> </head> <body> <h1>Web Development Glossary</h1> <dl> <dt>HTML</dt> <dd>HyperText Markup Language - the language used to structure web pages.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets - used to style and lay out web pages.</dd> <dt>JavaScript</dt> <dd>A programming language that adds interactivity to web pages.</dd> <dt>Browser</dt> <dd>A program like Chrome or Firefox that displays web pages.</dd> <dt>URL</dt> <dd>Uniform Resource Locator - the address of a web page on the internet.</dd> </dl> </body> </html> Challenge 7: Styled Comparison Table Hard Build a beautiful styled table comparing 3 phones. Columns: Phone, Price, Battery, Camera, Rating. Use CSS in the head for borders, padding, header background, and alternating row colors. Sample Input (No input required) Sample Output A well-designed table with 3 phone rows, alternating row colors, and a colored header. Use internal CSS. Include border-collapse, padding, and nth-child striping. <!DOCTYPE html> <html> <head> <title>Phone Comparison</title> <style> body { font-family: Arial; padding: 20px; } table { border-collapse: collapse; width: 100%; max-width: 700px; } caption { font-size: 22px; font-weight: bold; margin-bottom: 10px; } th, td { border: 1px solid #999; padding: 10px 15px; text-align: left; } thead { background-color: #2c3e50; color: white; } tr:nth-child(even) { background-color: #f5f5f5; } tr:hover { background-color: #e0f0ff; } </style> </head> <body> <table> <caption>Best Phones 2026</caption> <thead> <tr> <th>Phone</th><th>Price</th><th>Battery</th><th>Camera</th><th>Rating</th> </tr> </thead> <tbody> <tr><td>Pixel 10</td><td>60000</td><td>4500 mAh</td><td>50 MP</td><td>4.6</td></tr> <tr><td>Galaxy S26</td><td>75000</td><td>5000 mAh</td><td>108 MP</td><td>4.7</td></tr> <tr><td>OnePlus 13</td><td>55000</td><td>5200 mAh</td><td>64 MP</td><td>4.5</td></tr> </tbody> </table> </body> </html> Challenge 8: Complex Timetable with rowspan and colspan Hard Build a weekly class timetable that uses BOTH rowspan and colspan. Include at least one double-period class (rowspan=2) and at least one assembly row that spans all days (colspan). Sample Input (No input required) Sample Output A timetable with merged cells for double periods and a full-width assembly row. Must use both rowspan and colspan. At least 4 time slots. <!DOCTYPE html> <html> <head> <title>School Timetable</title> <style> table { border-collapse: collapse; margin: 20px; } th, td { border: 1px solid #333; padding: 10px 15px; text-align: center; } th { background-color: #4a90e2; color: white; } .merged { background-color: #fff3b0; } .assembly { background-color: #c0f0c0; font-weight: bold; } </style> </head> <body> <table> <caption>Rohan's Weekly Schedule</caption> <tr> <th>Time</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th> </tr> <tr class="assembly"> <td>9:00</td> <td colspan="3">Morning Assembly (all days)</td> </tr> <tr> <td>10:00</td> <td>Maths</td> <td rowspan="2" class="merged">Double Art Period</td> <td>English</td> </tr> <tr> <td>11:00</td> <td>Science</td> <td>History</td> </tr> <tr> <td>12:00</td> <td>Hindi</td> <td>Sports</td> <td>Music</td> </tr> </table> </body> </html> Previous Chapter Images, Audio, and Video Next Chapter Forms, Inputs, and Form Validation Need to Review the Concepts? Go back to the detailed notes for this chapter. Read Chapter Notes Want to learn web development with a live mentor? Explore our Frontend Masterclass

Practice Questions — Lists and Tables

Topic-Specific Questions

Mixed & Application Questions

Multiple Choice Questions

Coding Challenges

Challenge 1: Favorite Books List

Challenge 2: Recipe with Ordered Steps

Challenge 3: Class Marks Table

Challenge 4: Nested Menu for a Restaurant

Challenge 5: Timetable with colspan

Challenge 6: Glossary Description List

Challenge 7: Styled Comparison Table

Challenge 8: Complex Timetable with rowspan and colspan

Need to Review the Concepts?