Topic 5: Table-Forms, Page-Layout introduction

📖 11 min read · 🎯 intermediate · 🧭 Prerequisites: javascript-dom, joint-query-nested-query-filtering-data

Why this matters

Up until now, your HTML elements probably feel like furniture dropped in an empty room — everything just stacks on top of each other. You want a form with labels neatly beside their inputs, or a page with a sidebar on the left and content on the right, but you're not sure how to get there. That's exactly what this lesson solves. We'll start with HTML tables as a way to line up form fields cleanly, then zoom out to the big picture — how <div>, CSS Grid, and Flexbox give you real control over where everything sits on the page.

What You'll Learn

How to embed form inputs inside an HTML table for structured, readable layouts
How to use colspan to span form elements across multiple table columns
How to use <div> tags to divide a page into semantic sections (header, nav, content, footer)
How CSS Grid creates two-dimensional page layouts with columns and rows
How Flexbox handles one-dimensional alignment for navigation bars and toolbars
How to combine tables-in-forms and div-based layout into a complete business page

The Analogy

Think of setting up a registration desk at a conference. You have a stack of clipboards — each one is a form — but the fields on each clipboard are scattered randomly: name in the top-right corner, email buried at the bottom, submit button off to the left. Nobody can fill that out efficiently. Now imagine someone reorganizes each clipboard into a neat two-column grid: labels on the left, input boxes on the right, and the submit button stretching the full width at the bottom. That's exactly what an HTML table does for a form — it turns a pile of loose fields into an organized, scannable layout. And once your forms are tidy, the outer page layout (the conference venue itself) still needs a floor plan: a lobby, a session hall, restrooms, and an exit — which is where <div> tags, Grid, and Flexbox come in.

Chapter 1: Integrating Tables with Forms

When a form collects many pieces of information — name, email, preferences, selections — dumping every <label> and <input> in a flat list produces a wall of text. Wrapping the form fields in a table creates a predictable two-column rhythm: labels on the left, inputs on the right.

Structure of a Table-Form

<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 Concepts

Table Rows (<tr>) — Each <tr> groups one label and its matching input into a logical pair. Screen readers and visual users both process pairs naturally this way.
Table Cells (<td>) — The first <td> holds the <label>; the second <td> holds the <input>. This two-column model gives automatic left-alignment to all labels and right-side alignment to all controls.
colspan — The submit button row uses colspan="2" so the button cell stretches across both columns, centering it under the entire form rather than being awkwardly confined to one column. This is both a visual and usability improvement.
for / id pairing — Every <label for="name"> is wired to <input id="name">. Clicking the label focuses the input — essential for accessibility and touch targets.

When to Use Table-Forms vs. CSS-Only Forms

Table-forms are a classic technique that still works reliably for data-entry screens (admin panels, registration pages, data collection). Pure CSS layouts using display: grid or display: flex on the form itself are the modern alternative and offer more responsive flexibility. In practice, you'll encounter both, and knowing how table-forms work lets you read and maintain legacy codebases confidently.

Chapter 2: Introduction to Page Layout with `<div>`

With forms tidied up, the bigger question is: how does the whole page get organized? HTML on its own renders everything top to bottom in a single column. Page layout is the art of breaking that default flow into regions — header, navigation, main content, sidebar, footer — and positioning them intentionally.

The foundation is the <div> tag. It is a generic block-level container with no visual style of its own. You assign it an id or class, then use CSS to give each region its size, color, and position.

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

Alone, these four <div>s stack vertically. Pairing them with CSS is what creates the actual layout.

The Four Standard Page Regions

Region	Typical Role
`#header`	Logo, site name, top-level branding
`#navigation`	Links to major sections of the site
`#main-content`	The primary body of the page
`#footer`	Copyright, contact, secondary links

graph TD
    A[Page Root] --> B[header]
    A --> C[navigation]
    A --> D[main-content]
    A --> E[footer]
    D --> F[Form inside Table]
    D --> G[Article / Body Text]

Chapter 3: CSS Grid for Two-Dimensional Layouts

CSS Grid is the right tool when you need to control both columns and rows simultaneously. Think of it as a spreadsheet overlaid on your page: you define the columns, define the rows, and then drop elements into cells.

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

display: grid — activates Grid on the container.
grid-template-columns: 1fr 3fr — splits the container into two columns. The sidebar gets 1 fraction of the available space; the main content gets 3 fractions (75% of the total width).
gap: 10px — adds a 10-pixel gutter between all grid cells, both between columns and between rows.

A complete sidebar-plus-content layout:

<div class="container">
  <div id="sidebar">Sidebar</div>
  <div id="content">Main Content</div>
</div>

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

#sidebar {
  background: #f0f0f0;
  padding: 16px;
}

#content {
  background: #ffffff;
  padding: 16px;
}

CSS Grid is perfect for two-dimensional layouts — pages where both horizontal placement (columns) and vertical placement (rows) matter at the same time.

Chapter 4: Flexbox for One-Dimensional Layouts

Flexbox shines when you need to arrange items along a single axis — either a horizontal row or a vertical column. Navigation bars, toolbars, card rows, and button groups are classic Flexbox territory.

.container {
  display: flex;
  justify-content: space-between;
}

display: flex — activates Flexbox on the container; its direct children become flex items.
justify-content: space-between — distributes flex items along the main axis so the first item is flush left, the last item is flush right, and remaining items are evenly spaced in between.

A navigation bar in Flexbox:

<div id="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

#navigation {
  display: flex;
  justify-content: space-between;
  background: #333;
  padding: 12px 24px;
}

#navigation a {
  color: #fff;
  text-decoration: none;
}

Grid vs. Flexbox — quick rule of thumb:

Use Grid when you have a full-page template with rows and columns.
Use Flexbox when you have a single row or column of items to align.

Chapter 5: Combining Elements for a Complete Layout

Real pages layer all three techniques. A <div>-based skeleton divides the page into regions. CSS Grid or Flexbox positions those regions. A table-form inside one of the regions organizes the form fields. Here is a skeleton for a local-business job-application page that combines everything:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apply - Vizag Bakery</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    /* ── Outer page layout: header / nav / content / footer ── */
    .page-grid {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      min-height: 100vh;
    }

    #header {
      background: #4a90d9;
      color: #fff;
      padding: 16px 24px;
    }

    /* ── Navigation bar (Flexbox) ── */
    #navigation {
      display: flex;
      justify-content: space-between;
      background: #333;
      padding: 10px 24px;
    }

    #navigation a {
      color: #fff;
      text-decoration: none;
    }

    #main-content {
      padding: 24px;
    }

    #footer {
      background: #222;
      color: #aaa;
      text-align: center;
      padding: 12px;
    }

    /* ── Table-form inside main content ── */
    table {
      width: 100%;
      border-collapse: collapse;
    }

    td {
      padding: 8px 12px;
    }

    input[type="text"],
    input[type="email"],
    select {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background: #4a90d9;
      color: #fff;
      border: none;
      padding: 10px 24px;
      cursor: pointer;
      font-size: 1rem;
    }
  </style>
</head>
<body>

<div class="page-grid">

  <div id="header">
    <h1>Vizag Bakery</h1>
  </div>

  <div id="navigation">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>

  <div id="main-content">
    <h2>Job Application</h2>

    <form action="/apply" 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><label for="experience">Years of Experience:</label></td>
          <td><input type="text" id="experience" name="experience"></td>
        </tr>
        <tr>
          <td><label for="department">Preferred Department:</label></td>
          <td>
            <select id="department" name="department">
              <option value="baking">Baking</option>
              <option value="delivery">Delivery</option>
              <option value="sales">Sales</option>
              <option value="management">Management</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center;">
            <input type="submit" value="Submit Application">
          </td>
        </tr>
      </table>
    </form>
  </div>

  <div id="footer">
    &copy; 2026 Vizag Bakery. All rights reserved.
  </div>

</div>

</body>
</html>

This single file demonstrates:

<div class="page-grid"> with CSS Grid rows for header / nav / content / footer
#navigation with Flexbox justify-content: space-between
A table-form inside #main-content with four fields and a colspan="2" submit button

🧪 Try It Yourself

Task: Build the job-application page for "Vizag Bakery" described above from scratch.

Success criteria:

Open the file in a browser — you should see a blue header, a dark navigation bar with four evenly-spaced links, a centered form with four labeled rows, and a dark footer at the bottom.
Resize the browser window — the navigation links should stay on one line and the form should not overflow horizontally.
Click the "Name:" label — the cursor should jump into the Name input (confirming for/id wiring).

Starter snippet (copy and expand):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apply - Vizag Bakery</title>
  <style>
    /* Add your CSS Grid page layout here */
    /* Add your Flexbox nav here */
    /* Add your table-form styles here */
  </style>
</head>
<body>
  <div class="page-grid">
    <div id="header"><!-- your header --></div>
    <div id="navigation"><!-- your nav links --></div>
    <div id="main-content">
      <form action="/apply" method="post">
        <table>
          <!-- your table-form rows here -->
        </table>
      </form>
    </div>
    <div id="footer"><!-- your footer --></div>
  </div>
</body>
</html>

🔍 Checkpoint Quiz

Q1. Why is colspan="2" applied to the submit button's <td> in a two-column table-form?

A) To make the button twice as tall
B) So the button cell stretches across both label and input columns, centering it under the whole form
C) Because submit inputs require two parent cells to render correctly
D) To skip a row in the table

Q2. Given this CSS, how wide will the sidebar be relative to the total container width?

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

A) 50%
B) 33%
C) 25%
D) 75%

Q3. What does this snippet produce in the browser, and what layout technique is being used?

<div id="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

#navigation {
  display: flex;
  justify-content: space-between;
}

A) A vertical stack of links using CSS Grid
B) Three links in a horizontal row with equal space between them, using Flexbox
C) Three links centered in the middle of the page, using Flexbox
D) A table row of three cells using the HTML table model

Q4. You're building a page that needs a two-column layout (sidebar left, main content right) and a horizontal navigation bar. Which combination of tools is most appropriate?

A) Two nested <table> elements — one for the columns, one for the nav
B) CSS Grid for the sidebar/content columns; Flexbox for the nav bar
C) Flexbox for everything, including the columns
D) Only <div> tags with float: left on each section

A1. B — colspan="2" tells the table to merge two adjacent cells in that row, so the submit button spans the full width of the two-column form, giving it visual prominence and centering.

A2. C — The total fractional units are 1 + 3 = 4. The sidebar gets 1 out of 4 = 25%. The main column gets 3 out of 4 = 75%.

A3. B — display: flex lines the <a> elements up horizontally (the default flex direction is row), and justify-content: space-between pushes them to the ends with equal gaps between adjacent items.

A4. B — CSS Grid is designed for two-dimensional layouts (columns + rows), making it ideal for the sidebar/content split. Flexbox is purpose-built for one-dimensional alignment, making it the right choice for a horizontal navigation bar.

🪞 Recap

Placing form <input> elements inside <table> rows and cells creates a clean two-column label/input grid that is easy to read and fill out.
colspan lets a single table cell span multiple columns — the submit button uses colspan="2" to stretch across both the label and input columns.
<div> tags are generic block containers used to carve a page into named regions: header, navigation, main content, and footer.
CSS Grid (display: grid; grid-template-columns: 1fr 3fr) is the best choice for two-dimensional page layouts where both column widths and row heights matter.
Flexbox (display: flex; justify-content: space-between) handles one-dimensional alignment — navigation bars, toolbars, and card rows — efficiently.

📚 Further Reading

MDN: HTML tables — the source of truth on table structure, rowspan, and colspan
MDN: CSS Grid Layout — complete reference for grid-template-columns, gap, and placement
MDN: CSS Flexbox — full Flexbox guide covering justify-content, align-items, and flex direction
CSS-Tricks: A Complete Guide to Grid — visual cheat-sheet for every Grid property side by side
CSS-Tricks: A Complete Guide to Flexbox — the go-to visual reference for Flexbox alignment properties
⬅️ Previous: Form, Buttons
➡️ Next: Transition & Animations