Day 9 – Tables & Forms in HTML | Complete Beginner’s Guide

📥 Download Full Notes + Example Code (PDF) – Click here to get your Day 9 Notes

Introduction

When you start building websites, you’ll quickly realize you need two important things:

A way to present data clearly → Tables 📊
A way to collect user information → Forms 📝

Both are essential building blocks of HTML and are widely used across the internet:

Online exam results pages
Price lists on e-commerce sites
Contact forms on business websites
Registration forms for events

In this guide, you’ll learn:
✅ What tables and forms are in HTML
✅ How to write their code
✅ Common tags used
✅ Styling & accessibility tips
✅ Practice exercises to improve your skills

1. HTML Tables – Display Data in Rows & Columns

A table is made of rows and columns.
HTML tables use these tags:

Tag	Purpose
`<table>`	Creates the table container
`<tr>`	Creates a table row
`<td>`	Creates a table cell (data)
`<th>`	Creates a header cell (bold, centered)
`<caption>`	Adds a table title (optional)

Basic Table Example

Advanced Table Example – With Row & Column Span

2. HTML Forms – Collect User Data

Forms are interactive elements that allow users to submit data to a server.

Tag	Purpose
`<form>`	Wraps all form elements
`<input>`	Accepts single-line text, emails, passwords, etc.
`<label>`	Displays a field label
`<textarea>`	Accepts multi-line input
`<select>`	Creates dropdown menus
`<option>`	Dropdown choices
`<button>`	Clickable buttons

Basic Form Example

Form Example with More Inputs

<!DOCTYPE html>

<html>

<head>

  <title>HTML Form with Multiple Inputs</title>

</head>

<body>

  <form>

    <label for="gender">Gender:</label>

    <input type="radio" name="gender" value="Male"> Male

    <input type="radio" name="gender" value="Female"> Female

    <br><br>

    <label for="hobbies">Hobbies:</label>

<input type="checkbox" name="hobby" value="Reading">

Reading

    <input type="checkbox" name="hobby" value="Traveling"> Traveling

    <br><br>

    <label for="country">Country:</label>

    <select name="country">

      <option value="India">India</option>

      <option value="USA">USA</option>

    </select>

    <br><br>

<textarea name="message" rows="4" cols="30" placeholder="Write your message">

</textarea>

    <br><br>

    <button type="submit">Send</button>

  </form>

</body>

</html>

3. Styling Tables & Forms with CSS

<!DOCTYPE html>

<html>

<head>

  <title>Styled Table & Form</title>

  <style>

    table {

      border-collapse: collapse;

      width: 100%;

    th, td {

      border: 1px solid #333;

      padding: 10px;

      text-align: left;

    form {

      background: #f4f4f4;

      padding: 15px;

      border-radius: 5px;

      width: 300px;

<

/style>

</head>

<body>

  <h2>Student Table</h2>

  <table>

    <tr>

      <th>Name</th>

      <th>Subject</th>

      <th>Marks</th>

    </tr>

    <tr>

      <td>Rahul</td>

      <td>Maths</td>

      <td>95</td>

    </tr>

    <tr>

      <td>Ananya</td>

      <td>Science</td>

      <td>89</td>

    </tr>

  </table>

  <h2>Contact Form</h2>

  <form>

    <label for="name">Name:</label>

<input type="text" id="name" required>

<br><br>

    <label for="email">Email:</label>

<input type="email" id="email" required>

<br><br>

    <button type="submit">Submit</button>

  </form>

</body>

</html>

4. Practice Task

Task 1: Create a table showing 3 courses with duration and fees.
Task 2: Make a form to collect name, email, and preferred course.

Day 9 – Tables & Forms in HTML | Beginner’s Guide