CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Lists and tables

HTML course · Beginner · Lesson 66/68

Write a page with nested lists and a schedule table.

Recall lists and tables

Lists and tables show repeated information cleanly. <ul> gives an unordered list, <ol> an ordered one; each item goes in an <li>. Lists can nest: open a new <ul> inside an <li> and you get a sub-list.

Tables start with <table>; rows are <tr>, cells <td>, header cells <th>. <thead> and <tbody> organize the table; colspan merges cells across columns, rowspan across rows.

Exercise Write a nested list and a schedule table

Add a <h2> heading to body, then a <ul> list under it. Inside one list item, add a second <ul> for a sub-list (nested list). Then build a <table> with a <caption>, <thead> holding <th> header cells, and a <tbody> with at least one row.

Show example solution 
<body>
  <h2>My Reading List</h2>
  <ul>
    <li>
      Novels
      <ul>
        <li>Orhan Pamuk</li>
        <li>Elif Shafak</li>
      </ul>
    </li>
    <li>Poetry</li>
  </ul>
  <table>
    <caption>Event Schedule</caption>
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>May 5</td>
        <td>Istanbul</td>
      </tr>
    </tbody>
  </table>
</body>

Test yourself

  1. Write the table header cell

    <table>
  <caption>Concert Schedule</caption>
  <thead>
    <tr>
      <____ scope="col">Date</th>
      <th scope="col">City</th>
    </tr>
  </thead>
</table>
    Show answer 
    <table>
  <caption>Concert Schedule</caption>
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">City</th>
    </tr>
  </thead>
</table>

  2. Which attribute merges two columns on a <td>?

    • rowspan
    • span
    • colspan
    • merge
    Show answer

    colspan — Correct. colspan makes a cell span multiple columns side by side.

  3. Match each tag to its role

    <ul>
    Unordered list
    <ol>
    Ordered list
    <li>
    List item
    <table>
    Table container
    <th>
    Header cell

All lessons in Beginner

1 Document basics

  1. What is HTML?
  2. The document skeleton
  3. Head and meta tags
  4. Title and language
  5. Comments and readability
  6. Summary - My first HTML page

2 Text content

  1. Headings: h1–h6
  2. Paragraphs
  3. Line break and horizontal rule
  4. Emphasis and important text
  5. Quotations and sources
  6. Summary - Article page

3 Project: About me page

  1. Project: About me page
  2. Skeleton and title
  3. Introductory text
  4. Emphasis and separation
  5. Project final - About me

4 Links and navigation

  1. Anchor links
  2. Absolute and relative URLs
  3. In-page links
  4. Link targets
  5. Email and phone links
  6. Summary - Navigation menu

5 Lists

  1. Unordered lists
  2. Ordered lists
  3. Description lists
  4. Nested lists
  5. Links in list items
  6. Summary - Table of contents

6 Project: Business card page

  1. Project: Business card page
  2. Name and title
  3. Contact list
  4. Skills and links
  5. Project final - Business card

7 Images and media

  1. Adding images
  2. Image dimensions
  3. Figure and figcaption
  4. Audio and video
  5. Alternative sources
  6. Summary - Media gallery

8 Intro to tables

  1. Table skeleton
  2. Header cells
  3. Table sections
  4. Caption and title
  5. Cell spanning
  6. Summary - Class schedule table

9 Project: Recipe page

  1. Project: Recipe page
  2. Recipe title and summary
  3. Ingredient list
  4. Steps and baking table
  5. Project final - Recipe page

10 Intro to forms

  1. Form skeleton
  2. Labelled input
  3. Input types
  4. Textarea and button
  5. Selection fields
  6. Summary - Feedback form

11 Intro to semantic tags

  1. Why semantic tags matter
  2. Header and footer
  3. Nav and main
  4. Article and section
  5. Aside and address
  6. Summary - Semantic blog skeleton

12 Beginner final

  1. Challenge - Document skeleton
  2. Challenge - Text and links
  3. Challenge - Lists and tables
  4. Challenge - Form and semantic structure
  5. Challenge - Beginner capstone