HTML5

Chapter 4 — HTML Tables & Media

📚 Chapter Overview

Displaying data and rich content is vital for modern websites. In this chapter, you will learn how to build structured data tables and embed Audio and Video directly into your pages.

Learning Objectives:

4.1 Data Tables

Part 1 — Definition

HTML tables allow web developers to arrange data like text, images, and links into rows and columns of cells. A table is defined with the <table> tag. Each table row is defined with <tr>, and each header/data cell with <th> and <td>.

Part 2 — Syntax

<table>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Data</td>
    </tr>
</table>

Part 3 — Example

Problem: Create a "Price List" for services.

index.html 
<table border="1">
    <tr>
        <th>Service</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Web Design</td>
        <td>$500</td>
    </tr>
</table>

Part 4 — Video

Video: Coming Soon

4.2 Audio and Video

Part 1 — Definition

HTML5 introduced native tags for multimedia. The <video> and <audio> tags allow you to embed files without needing external plugins. You must include the controls attribute to show the play/pause buttons.

Part 2 — Syntax

<video src="movie.mp4" controls></video>
<audio src="song.mp3" controls></audio>

Part 3 — Example

Problem: Embed a YouTube video on your page.

index.html 
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>

Observation: iframe is used to embed content from external sources like YouTube or Google Maps.

Part 4 — Video

Video: Coming Soon

🏆 Chapter Challenge

Challenge Objective

Create a "Class Timetable" page with a video tutorial link.

Requirements

Step-by-Step Process

  1. Structure the table with 6 columns (Time + 5 Days).
  2. Use <td colspan="5">Lunch</td> in one row.
  3. Add the <iframe> tag at the bottom.

Expected Deliverables

Solve in Editor