Skip to content
Laviyx Learn

Try

HTML Forms and Tables Practice

Practise building data tables and accessible forms with labels, the right input types and built-in validation. Each solution is rendered live, and the forms show what they would send.

Intermediate6 problemsUpdated

Review first: Tables, Table Sections and Spanning, Forms, Input Types, Labels, Fieldsets and Legends, Form Validation

  1. 1.A class timetable

    Beginner

    Build a table with the caption "Monday timetable", a header row with Time and Subject, and three rows: 9:00 Maths, 10:00 Science, 11:00 English. Use header cells correctly and add simple borders with a style element.

    Show hint

    <caption> must be first inside <table>. Use <th> for headings and border-collapse: collapse for single borders.

    Show solution
    HTML
    <style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
<table>
  <caption>Monday timetable</caption>
  <thead>
    <tr><th scope="col">Time</th><th scope="col">Subject</th></tr>
  </thead>
  <tbody>
    <tr><td>9:00</td><td>Maths</td></tr>
    <tr><td>10:00</td><td>Science</td></tr>
    <tr><td>11:00</td><td>English</td></tr>
  </tbody>
</table>
    Result

  2. 2.Merged table cells

    Intermediate

    Build a 3-column table (Name, Monday, Tuesday) for two people, Asha and Ravi, where Asha is "On leave" across both days (one cell spanning two columns) and Ravi is "Office" on Monday and "Remote" on Tuesday.

    Show hint

    colspan="2" makes a cell cover two columns; that row then has one cell fewer.

    Show solution
    HTML
    <style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; text-align: center; }
</style>
<table>
  <tr><th>Name</th><th>Monday</th><th>Tuesday</th></tr>
  <tr><th scope="row">Asha</th><td colspan="2">On leave</td></tr>
  <tr><th scope="row">Ravi</th><td>Office</td><td>Remote</td></tr>
</table>
    Result

  3. 3.A labelled contact form

    Beginner

    Build a form that posts to /contact with a required name field, a required email field (using the email input type), a message textarea, and a submit button. Every field must have a label connected to it.

    Show hint

    Connect labels with for and id, and give each field a name so it is submitted.

    Show solution
    HTML
    <form action="/contact" method="post">
  <p>
    <label for="name">Name</label><br>
    <input id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email</label><br>
    <input id="email" name="email" type="email" required>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">Send</button>
</form>
    Result

    Try submitting the form in the result with an empty name or an invalid email: the browser stops it and shows a message. A valid form shows the data it would send.

  4. 4.A grouped set of options

    Intermediate

    Build a form with a fieldset whose legend is "Delivery speed", containing three radio buttons, Standard (selected by default), Express and Same day, with values standard, express and same-day, plus a submit button.

    Show hint

    All radio buttons in a group share the same name. Wrap each input in its label, or connect them with for and id.

    Show solution
    HTML
    <form action="/checkout" method="post">
  <fieldset>
    <legend>Delivery speed</legend>
    <label><input type="radio" name="speed" value="standard" checked> Standard</label><br>
    <label><input type="radio" name="speed" value="express"> Express</label><br>
    <label><input type="radio" name="speed" value="same-day"> Same day</label>
  </fieldset>
  <p><button type="submit">Continue</button></p>
</form>
    Result

  5. 5.Built-in validation rules

    Intermediate

    Build a sign-up form where: the username is required and 3 to 15 lowercase letters ([a-z]{3,15}); the age is a whole number from 13 to 120; and the PIN code is exactly six digits. Show the username rule in visible text.

    Show hint

    Use required, pattern, type="number" with min, max and step, and inputmode="numeric" for the PIN.

    Show solution
    HTML
    <form action="/signup" method="post">
  <p>
    <label for="user">Username</label>
    <input id="user" name="username" required pattern="[a-z]{3,15}" aria-describedby="user-hint">
    <br><small id="user-hint">3 to 15 lowercase letters.</small>
  </p>
  <p>
    <label for="age">Age</label>
    <input id="age" name="age" type="number" min="13" max="120" step="1" required>
  </p>
  <p>
    <label for="pin">PIN code</label>
    <input id="pin" name="pin" required pattern="[0-9]{6}" inputmode="numeric">
  </p>
  <button type="submit">Create account</button>
</form>
    Result

  6. 6.Choosing from lists

    Intermediate

    Build a form with a required drop-down for "Course" (HTML, CSS, JavaScript, with a first "Choose a course" option that has an empty value) and a "City" text field that suggests Hyderabad, Pune and Chennai while still allowing any city.

    Show hint

    Use <select required> with an empty-value first option, and <input list="..."> with a <datalist>.

    Show solution
    HTML
    <form action="/enrol" method="post">
  <p>
    <label for="course">Course</label>
    <select id="course" name="course" required>
      <option value="">Choose a course</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
    </select>
  </p>
  <p>
    <label for="city">City</label>
    <input id="city" name="city" list="cities">
    <datalist id="cities">
      <option value="Hyderabad">
      <option value="Pune">
      <option value="Chennai">
    </datalist>
  </p>
  <button type="submit">Enrol</button>
</form>
    Result
← All practice setsLearn HTML course →