School: Rio Chico National High School Grade Level: 8

MATATAG K to 10
Name of Teacher: DONNA MAY Z. PADOLINA Learning Area: SP – ICT 8 (Web Design)
Curriculum - Lesson
Exemplar Teaching Dates and Time: January 20 - 24,2025 Quarter: 3rd

I. CURRICULUM CONTENT, STANDARDS, and LESSON COMPETENCIES

Day: 1 Day: 2 Day: 3 Day: 4 Day: 4
A. CONTENT: HTML Table Attributes of Tables Merging Cells Nesting tables Adding Image to a Table
The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates
basic understanding of basic understanding of basic understanding of basic understanding of basic understanding of
terminologies, history, terminologies, history, terminologies, history, terminologies, history, terminologies, history,
principles of creating an principles of creating an principles of creating an principles of creating an principles of creating an
effective web page, effective web page, including effective web page, including effective web page, effective web page, including
including an in-depth an in-depth consideration of an in-depth consideration of including an in-depth an in-depth consideration of
B. Content
consideration of information architecture. information architecture. consideration of information architecture.
Standards
information architecture. Become familiar with graphic Become familiar with graphic information architecture. Become familiar with graphic
Become familiar with design principles that relate design principles that relate Become familiar with design principles that relate
graphic design principles to the web and learn how to to the web and learn how to graphic design principles to the web and learn how to
that relate to the web and implement these theories implement these theories that relate to the web and implement these theories
learn how to implement into practice. into practice. learn how to implement into practice.
these theories into practice. these theories into practice.
By the end of the quarter, By the end of the quarter, the By the end of the quarter, the By the end of the quarter, By the end of the quarter, the
C. Performance the learners are able to learners are able to develop learners are able to develop the learners are able to learners are able to develop
Standards develop skills in analyzing skills in analyzing the usability skills in analyzing the develop skills in analyzing skills in analyzing the usability
the usability of a website. of a website. usability of a website. the usability of a website. of a website.
D. Learning Creates and modifies HTML Describes different attributes Merges multiple table cells Nest tables Adding Image to a Table
Competencies tables of tables, rows, and data.

E. Instructional At the end of the lesson, At the end of the lesson, By the end of the lesson, At the end of the lesson, At the end of the lesson,
Objectives students will be able to: students will be able to: students will be able to: students will be able to: students will be able to:
1. Define the purpose of
1. Explain the purpose of 1. Identify key attributes merging table cells in 1. Define nesting tables in 1. Explain the purpose of
HTML tables and their used in HTML tables HTML. HTML. adding images to tables
role in structuring data. (border, cellpadding, 2. Demonstrate how to 2. Explain the importance in web design.
2. Identify and understand cellspacing, colspan, merge table cells using of nested tables for 2. Insert images into table
the basic elements of an rowspan, width, height, the rowspan and creating complex cells using HTML <img>
HTML table (<table>, align, style). colspan attributes in layouts. tags.
<tr>, <td>, <th>). 2. Explain how table HTML. 3. Create a simple HTML 3. Create a simple HTML
 1. Create a simple HTML attributes enhance the 3. Create a simple HTML table with a nested table table with images
table to organize data. presentation and table with merged cells inside a cell. incorporated into
functionality of tables. to represent a timetable specific cells.
1. Apply table attributes to
create and customize
tables for better visual
presentation.
Web Development Web Development Mathematics: Understanding Art and Design: Visualizing Art and Design: Enhancing
Curriculum: After covering Curriculum: After introducing rows and columns as part of creative layouts using visual appeal with images in
basic HTML tags and page basic table structure. a grid structure. nested tables. tables.
structure. Digital Design Curriculum: ICT Skills: Applying coding ICT Skills: Using coding to ICT Skills: Applying HTML to
Digital Literacy Curriculum: While teaching the principles practices to format tables create structured and well- organize and display images
F. Integration As part of teaching how to of effective layout and data effectively. organized table layouts. effectively.
present data effectively. presentation.
Data Management Project-Based Learning: To
Curriculum: To introduce refine student-created
the concept of organizing websites with visually
data in tabular format. appealing tables.
II. LEARNING RESOURCES
Ppt presentation on Ppt presentation on attributes Ppt presentation on merging Ppt presentation on nesting Ppt presentation on adding
introduction to html table. of tables cells tables image to a table
III. TEACHING AND LEARNING PROCEDURES
Begin by asking: "Where do Ask: "Have you seen tables Display a visual example of a Show an example of a Show a real-world example of
you often see tables online? that look sleek and well- well-formatted HTML table website layout created a table with images (e.g., a
What are they used for?" organized? What do you think with merged cells (e.g., a using nested tables. product catalog, a menu).
Show examples of tables on makes them visually weekly schedule). Ask: "What do you think is Ask: "What makes this table
websites (e.g., schedules, appealing?" Ask: "What do you notice unique about this layout? visually engaging? How does
A. Pre- Lesson Proper product comparisons, price Show examples of simple about this table? Why might Can you spot how smaller the use of images help
a. Activating Prior
Knowledge lists). tables versus styled tables. we want to combine some tables are inside larger convey information?"
b. Establishing Purpose cells?" tables?"
of the Lesson
"Why do you think tables "Why is customization Inform students that they will
are useful for organizing important when presenting Inform students that they will Inform students that they learn how to add images to
information?" data in tables on a webpage?" learn how to merge table will learn how to create tables to improve their layout
cells to enhance table nested tables to structure and usability.
Share the lesson objectives structure in HTML. content effectively.
B. Lesson Proper Structure of an HTML Table: Common Table Attributes: efine merging table cells: Define nested tables: Define adding images to a
a. Developing and <table>: Defines the table. “Merging cells means “Nesting tables means table:
Deepening border: Adds a border to the
Understanding <tr>: Defines a table row. combining two or more cells placing one table inside a
table “Adding images to a table
 <td>: Defines a table data cellpadding: Adds spacing into one. This is useful for cell of another table. It’s a means embedding visual
cell. inside each cell. creating headers or visually technique to create more content within table cells
<th>: Defines a table organizing data.” detailed or complex using the <img> tag in HTML.
cellspacing: Adjusts spacing
header cell. Explain the attributes: layouts.” It’s useful for enhancing user
between cells.
colspan: Merges cells experience and presenting
Attributes to Enhance colspan and rowspan: Merges horizontally. Discuss common uses of visual information.”
Tables: cells across columns or rows. rowspan: Merges cells nested tables:
border: Adds a border to vertically.
the table. width and height: Sets the Structuring data with Briefly discuss the syntax of
cellspacing and cellpadding: dimensions of the table or Guided Demonstration subcategories. the <img> tag:
Adjust spacing inside and cells Creating headers and
Open a code editor and
between cells. align: Aligns the table on the footers in detailed forms.
colspan and rowspan: demonstrate merging cells
page (deprecated, use CSS Guided Demonstration
Merge cells across columns instead). Open a code editor and
or rows. explain the structure of a Open a code editor and
Activity: nested table. demonstrate inserting an
Activity: Provide students with a starter Show the following example image into a table
Provide a starter HTML HTML file containing a simple
b. Making Generalization
template and guide table.
students to:
Create a table with two Guide them to:
rows and three columns. Add border, cellpadding, and
Add a header row to label cellspacing to adjust the
each column. table’s appearance.
Use the border attribute for Ask students to create a table
better visibility. Merge cells using colspan or that includes:
rowspan. A column for product names.
Ask students to create their
Adjust the table’s width and Ask students to create a A column for product images.
own HTML file with:
height. table representing a weekly
A table displaying data for A column for product prices.
three fictional characters schedule, where:
(Name, Age, and The main table contains
Hometown). days of the week.
Use <th> for headers and Nested tables represent the
<td> for data. morning and afternoon
Add an extra row that schedules within each day.
merges two cells using
colspan.
 Summarize the key points: Summarize the key points: Ask students to answer the Ask the following quick Ask students the following
following quick questions: questions: quick questions:
The purpose and basic Attributes like border, What is the purpose of the What is a nested table? What HTML tag is used to
structure of HTML tables. cellpadding, and cellspacing colspan attribute? How do you structure add images to a table?
How to create headers, enhance table appearance. How does rowspan differ nested tables in HTML? Why is the alt attribute
rows, and cells using <th>, colspan and rowspan help from colspan? When should nested tables important when adding
<tr>, and <td>. organize data by merging Why is merging cells be used? images?
C. Post-Lesson Proper Using attributes like border cells. important in creating tables? How can you adjust the size
a. Evaluating Learning
b. Remarks
to improve table Inline CSS adds further of an image in a table?
c. Reflection appearance. customization and polish.
Exit Question: Exit Question:

"How do attributes like

"What are some colspan and cellpadding
advantages of using tables improve the readability and
for organizing information usability of tables?"
on a webpage?"
Remarks: Remarks: Remarks: Remarks: Remarks:

Prepared by: Checked: APPROVED:

DONNA MAY Z. PADOLINA ALMA G. PAR CARLOS G. CORPUZ, PhD

Teacher III Head Teacher III School Principal IV