Week 5 Demo: Tables & Forms

This single page includes tables and a form. We use it as classroom code for Week-5.

1) Tables (Data, not layout)

Tables are for structured data (schedule, list, comparison).

A) Minimal table

Core tags: <table>, <tr>, <th>, <td>.

Technology overview (caption)
Technology Purpose
HTML Structure (content skeleton)
CSS Style (colors, spacing, fonts)
JavaScript Interaction (dynamic behavior)

Tip: We use <th scope="col"> so screen readers understand headers.

B) Spanning cells (rowspan / colspan)

Used when data truly needs grouping — not for “making it look pretty”.

Course schedule (spanning example)
Day Time Topic
Monday 10:00 HTML Basics
11:00 Links & Images
Wednesday Lab: Build your page
Note: Times are examples.

Remember: Row headers can be <th scope="row"> (day names).

2) Forms (collect user input)

A form collects input and sends it to a server using a request. In syllabus, Week-5 is “Tables and introduction to forms”. (Week‑6 continues forms + embedded media.)

A) Form basics

Contact Form (Mini Lab)
Contact preference
Options

This demo uses client-side checks only. No backend yet.

B) “Submitted data table” (concept)

In Week‑5 we keep it conceptual: form data can be stored/displayed as a table. Here we simulate it with JavaScript.

Form submissions (demo)
Name Email Topic
No submissions yet. Submit the form.

Teaching point: Tables and forms often work together (collect → display).

3) Mini Lab (in class)

  1. Create a Course Schedule table (3–5 rows).
  2. Create a Contact Form (name + email + message + submit).
  3. Use <label for> + matching id everywhere.
  4. Add basic validation: required, and one pattern example.
  5. Make it readable: indentation + consistent class names.