Topic 5 of 26 · UI Designer

Topic 5 : Table-Forms, Page-Layout introduction

Lesson TL;DRTopic 5: TableForms, PageLayout Introduction 📖 5 min read · 🎯 intermediate · 🧭 Prerequisites: javascriptbom, javascriptdom Why this matters Here's the thing — when you first start building web page...
5 min read·intermediate·html · css · tables · forms

Topic 5: Table-Forms, Page-Layout Introduction

📖 5 min read · 🎯 intermediate · 🧭 Prerequisites: javascript-bom, javascript-dom

Why this matters

Here's the thing — when you first start building web pages, they can quickly start to look like a messy pile of boxes thrown on a screen. No order, no breathing room, nothing feels intentional. That's usually because two things are missing: a solid layout system that gives your page structure, and a clear way to present data inside forms. In this lesson, we're going to fix exactly that. You'll learn how tables fit inside forms, and how layout tools give your page its backbone — so your designs start feeling organized and professional instead of accidental.

What You'll Learn

  • How to embed HTML form controls inside a <table> for structured, readable input layouts
  • When and how to use colspan to span cells across columns
  • How <div> elements divide a page into semantic regions
  • How CSS Grid handles two-dimensional layouts with rows and columns
  • How Flexbox handles one-dimensional alignment along a single axis

The Analogy

Think of setting up a registration desk at a large conference. You need to collect a name, contact details, and session preferences from every attendee — and you need it all organised so volunteers can read it at a glance. Slapping fields randomly on a table is chaos; arranging them in a neat two-column grid, labels on the left and inputs on the right, turns the desk into a smooth check-in machine. That is exactly what a table-wrapped form does for a webpage. And the page surrounding that desk — where the banner hangs, where the schedule board stands, where the exit signs point — that is your page layout.

Chapter 1: Integrating Tables with Forms

When you wrap form fields in a <table>, you gain precise column alignment without needing extra CSS. Labels and inputs line up in a true two-column grid, making the form easier to scan and fill.

<form action="/submit-registration" method="post">
  <table>
    <tr>
      <td><label for="name">Name:</label></td>
      <td><input type="text" id="name" name="name"></td>
    </tr>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="email" id="email" name="email"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Register"></td>
    </tr>
  </table>
</form>

Key mechanics at work:

  • Table rows and cells — each <tr> groups a label-input pair into a logical row, keeping related fields visually connected and easy to read in sequence.
  • colspan="2" — the submit button cell stretches across both columns, centering the action across the full form width for better alignment and visual balance.
flowchart LR
  form["&lt;form&gt;"] --> table["&lt;table&gt;"]
  table --> r1["&lt;tr&gt; Name row"]
  table --> r2["&lt;tr&gt; Email row"]
  table --> r3["&lt;tr&gt; Submit row (colspan=2)"]
  r1 --> label1["&lt;td&gt; label"]
  r1 --> input1["&lt;td&gt; input[text]"]
  r2 --> label2["&lt;td&gt; label"]
  r2 --> input2["&lt;td&gt; input[email]"]
  r3 --> btn["&lt;td colspan=2&gt; input[submit]"]

Chapter 2: Introduction to Page Layout

Page layout in HTML is the practice of arranging content visually on a page to improve user experience and interaction. Think of it like planning a new office floor: you decide where the reception desk goes, where the open-plan area sits, where the meeting rooms are, and where the utility rooms live — all so the space feels logical and navigable.

The <div> Building Block

The <div> element is the workhorse of page division. It carries no visual style of its own, but it gives you named containers you can style and position freely.

<div id="header">Header</div>
<div id="navigation">Navigation Bar</div>
<div id="main-content">Content</div>
<div id="footer">Footer</div>

Each id corresponds to a distinct zone of the page. CSS then decides how those zones are arranged relative to each other.

CSS Grid — Two-Dimensional Layouts

CSS Grid is designed for layouts that need both rows and columns — the full two-dimensional plane. You define the track structure on a container and the browser slots children into it.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}
  • grid-template-columns: 1fr 3fr — creates two columns; the sidebar takes one fractional unit and the main content takes three. If the total width is 800 px, the sidebar is 200 px and the main area is 600 px.
  • gap: 10px — adds consistent spacing between all grid cells without touching margins.

Flexbox — One-Dimensional Layouts

Flexbox excels at distributing items along a single axis — either horizontally in a row or vertically in a column. It is the go-to for navigation bars, card rows, and any strip of elements that need to be aligned or spaced evenly.

.container {
  display: flex;
  justify-content: space-between;
}
  • display: flex — activates the flex formatting context on the container.
  • justify-content: space-between — pushes flex children to the far ends and distributes equal space between any remaining items.

Choosing Between Grid and Flexbox

NeedUse
Row and column controlCSS Grid
Single row or single columnFlexbox
Named template areasCSS Grid
Aligning a nav barFlexbox
Card grid with auto-fillCSS Grid

Chapter 3: Combining Elements for Complete Layouts

By nesting these techniques, you can build responsive pages that adapt to any screen size. A typical pattern uses Grid to position the major page zones (header, nav, main, footer) and Flexbox inside each zone to align the smaller pieces.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
    }

    #navigation {
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
    }

    #main-content {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 10px;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div id="header">Header</div>
  <div id="navigation">
    <span>Home</span>
    <span>About</span>
    <span>Contact</span>
  </div>
  <div id="main-content">
    <aside>Sidebar</aside>
    <main>Content goes here</main>
  </div>
  <div id="footer">Footer</div>
</body>
</html>

The body uses a three-row grid (header / content / footer). The nav inside uses Flexbox to space its links. The main content area uses Grid again to carve out a sidebar and a primary column. This layering of techniques is how real production layouts are built.

🧪 Try It Yourself

Task: Build a web page for a local business that collects job applications.

Your page must include:

  1. A <div id="header"> with the business name
  2. A <div id="navigation"> with at least three nav links laid out with Flexbox
  3. A <div id="main-content"> split into a 1fr/3fr Grid (sidebar + main area)
  4. Inside the main area, a <form> wrapped in a <table> collecting: Name, Email, Years of experience, and Preferred department — with the submit button using colspan="2"
  5. A <div id="footer"> with a copyright line

Success criterion: Open the page in a browser. The navigation links should sit side-by-side with space between them. The sidebar and form area should appear in two columns. The submit button should span the full width of the form table.

Starter snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local Business — Careers</title>
  <style>
    #navigation { display: flex; justify-content: space-between; padding: 0.5rem 1rem; background: #333; color: #fff; }
    #main-content { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; padding: 1rem; }
  </style>
</head>
<body>
  <div id="header"><h1>Acme Co.</h1></div>
  <div id="navigation">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Careers</a>
  </div>
  <div id="main-content">
    <aside><p>Why join us?</p></aside>
    <main>
      <form action="/apply" method="post">
        <table>
          <!-- Add your rows here -->
        </table>
      </form>
    </main>
  </div>
  <div id="footer"><p>© 2026 Acme Co.</p></div>
</body>
</html>

🔍 Checkpoint Quiz

Q1. What does colspan="2" do when placed on a <td> inside a two-column table?

A) Duplicates the cell and places it in a second row
B) Makes the cell span across two columns horizontally
C) Adds a second table inside the cell
D) Removes the cell border on both sides

Q2. Given this CSS, how wide will the sidebar column be if .container is 800 px wide?

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

A) 100 px
B) 200 px
C) 192.5 px (accounting for the 10 px gap)
D) 400 px

Q3. What is the primary distinction between CSS Grid and Flexbox?

A) Grid only works in Chrome; Flexbox works everywhere
B) Grid controls two-dimensional layouts (rows and columns); Flexbox controls one-dimensional layouts (a single row or column)
C) Flexbox requires JavaScript; Grid is pure CSS
D) Grid is for images; Flexbox is for text

Q4. You have a navigation bar with a logo on the left and three links on the right. Which CSS property and value would push the links to the far right in a single line?

A) display: grid; grid-template-columns: repeat(4, 1fr);
B) display: flex; justify-content: space-between;
C) display: flex; align-items: center;
D) display: block; text-align: right;

A1. B — colspan="2" makes the cell stretch horizontally across two columns. Here it allows the submit button to be centred across the label and input columns.

A2. C — The grid has 1fr + 3fr = 4fr total, minus the 10 px gap. So available space is 800 - 10 = 790 px. The sidebar gets 790 × (1/4) = 197.5 px. Option C is the closest correct reasoning; the exact value is 197.5 px.

A3. B — Grid is two-dimensional (rows and columns simultaneously); Flexbox is one-dimensional (either a row or a column at a time).

A4. B — display: flex; justify-content: space-between; places the logo at the left edge and pushes the remaining items to the right, distributing space between them.

🪞 Recap

  • Wrapping form fields in a <table> aligns labels and inputs in neat columns without extra CSS.
  • colspan="2" stretches a table cell across multiple columns — ideal for submit buttons in two-column form tables.
  • <div> elements divide a page into named regions (header, navigation, main-content, footer) that CSS can then position.
  • CSS Grid handles two-dimensional layouts with grid-template-columns, track fractions (fr), and gap.
  • Flexbox handles one-dimensional alignment — justify-content: space-between is the classic nav-bar pattern.

📚 Further Reading

Like this topic? It’s one of 26 in UI Designer.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →