Lecture 7: CSS Introduction, Syntax & Selectors

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-04

Lecture 7

CSS Introduction, Syntax & Selectors

Week 2 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Outcomes

After this lecture, students will be able to:

  • create complete semantic HTML tables
  • apply colspan and rowspan for complex table layouts
  • use accessibility attributes in tables correctly
  • embed external content using iframes
  • apply sandbox attributes for secure iframe usage

Prerequisites

  • HTML structure and tag basics
  • Understanding of attributes and links
  • Familiarity with browser testing workflow

Syllabus Mapping

Syllabus mapping:

  • HTML table structure: thead, tbody, tfoot, tr, th, td
  • colspan and rowspan for merging cells
  • table accessibility: scope, caption, headers
  • iframe element: src, width, height, sandbox
  • Security and use cases for iframe embedding

Prerequisites used:

  • HTML semantic structure from Lectures 3-6
  • understanding of attributes and paths

Agenda

  • Introduction and motivation
  • Table fundamentals and semantic structure
  • Colspan and rowspan spanning
  • Table accessibility requirements
  • Iframe element and embedding
  • Iframe security with sandbox attribute
  • Summary and exam preparation

Introduction and Motivation

  • Tables are the correct tool for presenting relational, comparable, tabular data in HTML.
  • Misusing tables for layout was a legacy practice; modern layout uses CSS Flexbox and Grid instead.
  • Iframes allow embedding external documents (maps, videos, PDFs) directly within a web page.
  • Proper table accessibility ensures data is understandable by screen readers and assistive technology.
  • Knowing when to use a table versus a list versus a layout div is a critical professional skill.

Think About It - Interactive Questions

Before we dive into details, think about these:

  • Why does a comparison table for phone specs feel natural but using a <table> for a 3-column layout feel wrong?
  • What happens when a screen reader encounters a table with no header cells defined?
  • How does Google Maps appear inside a webpage without loading the whole Google Maps website?
  • What security risk exists if you embed an untrusted external page in an iframe?

HTML Table Structure

flowchart TD
  TABLE["table"]
  CAPTION["caption\n(optional title)"]
  THEAD["thead\nHeader rows"]
  TBODY["tbody\nData rows"]
  TFOOT["tfoot\nFooter rows"]
  TR["tr - Table Row"]
  TH["th - Header Cell"]
  TD["td - Data Cell"]
  TABLE --> CAPTION
  TABLE --> THEAD
  TABLE --> TBODY
  TABLE --> TFOOT
  THEAD --> TR
  TR --> TH
  TBODY --> TR
  TR --> TD

Creating a Basic Table

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>Mumbai</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>Delhi</td>
        </tr>
    </tbody>
</table>

Table Caption and Semantic Structure

<table>
    <caption>Student Exam Results - Semester 1, 2026</caption>
    <thead>
        <tr>
            <th scope="col">Student</th>
            <th scope="col">Theory</th>
            <th scope="col">Practical</th>
            <th scope="col">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Priya Sharma</td>
            <td>78</td>
            <td>45</td>
            <td>123</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Class Average</td>
            <td>118</td>
        </tr>
    </tfoot>
</table>

Merging Cells: Colspan & Rowspan

colspan - merge across columns:

<tr>
    <td colspan="2">
        Spans two columns
    </td>
</tr>
<tr>
    <td>Cell A</td>
    <td>Cell B</td>
</tr>

rowspan - merge across rows:

<tr>
    <td rowspan="2">Spans two rows</td>
    <td>Row 1 Data</td>
</tr>
<tr>
    <td>Row 2 Data</td>
</tr>

Rule: colspan merges horizontally. rowspan merges vertically.

Colspan in a Real Table

<table>
    <thead>
        <tr>
            <th scope="col" rowspan="2">Student</th>
            <th scope="col" colspan="2">Marks</th>
        </tr>
        <tr>
            <th scope="col">Theory</th>
            <th scope="col">Practical</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>85</td>
            <td>42</td>
        </tr>
    </tbody>
</table>

Table Accessibility

  • Use <th> for header cells, not <td>
  • Add scope="col" for column headers
  • Add scope="row" for row headers
  • Add <caption> to describe the table
  • Use id + headers for complex tables
<table>
  <caption>
    Monthly Sales Data
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  ...
</table>

HTML Table Best Practices

  1. Use semantic structure - <thead>, <tbody>, <tfoot> always
  2. Header cells - Use <th> with scope attribute, never <td> for headers
  3. Caption - Always add <caption> to describe the table purpose
  4. Do NOT use tables for layout - Use CSS Flexbox or Grid instead
  5. Keep it simple - Avoid deeply nested or complex merged cell structures
  6. Style with CSS - Use CSS for borders and spacing, not the deprecated border attribute
  7. Responsive - Wrap complex tables in a scrollable div on mobile

The iframe Element

An <iframe> (inline frame) embeds another HTML document inside the current page:

<iframe
    src="https://www.example.com"
    width="800"
    height="450"
    title="Embedded content from Example">
</iframe>
  • src -> URL of the page to embed
  • width and height -> dimensions in pixels or percentage
  • title -> describes the iframe content (required for accessibility)
  • Common uses: Google Maps, YouTube videos, PDF documents, external dashboards

Common Iframe Use Cases

Embed a Google Map:

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450"
    title="Location map of our office"
    allowfullscreen loading="lazy">
</iframe>

Embed a YouTube video:

<iframe
    width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Introduction to HTML - Video Tutorial"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
    allowfullscreen>
</iframe>

Iframe Security: The sandbox Attribute

The sandbox attribute restricts what embedded content can do:

<!-- Maximum restriction - no scripts, no forms, no top navigation -->
<iframe src="untrusted-page.html" sandbox></iframe>

<!-- Selectively allow features -->
<iframe src="trusted-demo.html"
        sandbox="allow-scripts allow-same-origin">
</iframe>
Sandbox flag What it allows
allow-scripts JavaScript execution
allow-forms Form submission
allow-same-origin Same-origin resource access
allow-popups Opening new windows

Choosing: Table or Iframe?

Use <table> when:

  • Displaying rows and columns of related data
  • Showing comparison between items
  • Presenting schedule or timetable
  • Listing products with properties

Use <iframe> when:

  • Embedding a map (Google Maps)
  • Embedding a video (YouTube)
  • Displaying a PDF document
  • Showing a live external widget

Neither should be used for page layout - that is the job of CSS Flexbox and Grid

Memory Booster: Tables and Iframes

  • <table> = A spreadsheet embedded in HTML - rows, columns, headers, cells, but for display not data processing
  • <thead> = The column header row in your spreadsheet (bold, frozen at top)
  • <tbody> = The data rows of your spreadsheet
  • <tfoot> = The summary row at the bottom (totals, averages)
  • colspan = “Merge cells across” (horizontal merge like Excel “merge and center”)
  • rowspan = “Merge cells down” (vertical merge)
  • <iframe> = A picture-in-picture window showing a completely different website or document
  • sandbox = The security fence around that picture-in-picture to prevent it from affecting your page

Live Demo: Tables & Iframes Explorer

Interactive demonstration of HTML table structure and iframe embedding:

?? Open Interactive Demo: HTML Tables & Iframes

What you’ll see:

  • Basic table with thead, tbody, tfoot
  • Colspan and rowspan visual merge demonstration
  • Table with caption and accessibility scope attributes
  • Iframe embedding a map and a document
  • Sandbox attribute toggle showing restriction effects

?? Key insight: A screen reader navigates tables cell by cell - headers make this comprehensible!

Resources & References

Structured Debug Checklist for Tables & Iframes

When table layout breaks:

  1. check that tr/td counts are consistent across all rows
  2. verify colspan and rowspan values add up correctly
  3. inspect HTML structure in DevTools Elements panel
  4. check for missing closing tags
  5. validate with W3C HTML Validator

When iframe does not load:

  1. verify src URL is correct and accessible
  2. check browser console for blocked-frame errors
  3. confirm the target site allows iframe embedding (X-Frame-Options header)
  4. test with sandbox="" removed to isolate permission issues

Summary

After this lecture, you should understand:

  • Complete HTML table structure: caption, thead, tbody, tfoot
  • Merging cells using colspan and rowspan
  • Table accessibility: scope, headers, caption
  • The iframe element for embedding external content
  • Sandbox attribute for iframe security
  • When to use tables vs iframes vs CSS layout

Exam Preparation Questions: Short

  • What is the purpose of <th> vs <td>?
  • What is the role of <thead>, <tbody>, and <tfoot>?
  • What does colspan="2" mean?
  • What does rowspan="3" mean?
  • Why is scope attribute important in tables?
  • What does <caption> do in a table?
  • What is an <iframe> used for?
  • What is the purpose of the sandbox attribute on an iframe?

Exam Preparation Questions: Long

  • Explain complete HTML table structure with semantic elements and accessibility.
  • Create a timetable using colspan and rowspan with a suitable example.
  • Discuss table accessibility requirements with scope and caption attributes.
  • Explain the iframe element with use cases for maps, videos, and documents.
  • Discuss iframe sandbox attribute and its security implications.

Practice Task

  • create a semester timetable using a complete semantic table
  • apply colspan and rowspan to merge at least two cells
  • add a caption and scope attributes for accessibility
  • embed a Google Map or YouTube video using iframe
  • test table in browser and inspect with DevTools

Checklist

Can you:

  • create semantic and accessible HTML tables?
  • apply colspan and rowspan correctly?
  • embed external content with iframe?
  • explain sandbox security attribute?
  • answer short and long exam questions?

Next Lecture

  • Topic: HTML Forms & Form Elements
  • Preparation required: revise HTML attributes and semantic structure

CSS Introduction, Syntax & Selectors

Next: Lecture 8 - HTML Forms & Form Elements

```{.html code-line-numbers=“|1|2-4|5”}