Opening
Prayer
Checking of
attendance
QUICK
QUESTION AND
ANSWER USING
WORD WALL-
SPIN THE
WHEEL GAME
PRESENTATI
ON OF
LEARNING
OBJECTIVES
At the end of the lesson, you should be
able to:
1. 1. Identify and explain what HTML table is
2. list down and explain the tags and attributes
used in creating an HTML table
a. Border e. cellspacing
b. Bordercolor f. cellpadding
c. Bgcolor g. width
d. Background i. height
d. Cellspacing
At the end of the lesson, you should
be able to:
3. Create an HTML table and modify it using tags
and attributes
4. Appreciate the importance of clarity, order, and
systematic thinking ,essential qualities not only in
web design but also in daily life and academics by
being systematic and orderly at all times
WHAT IS
HTML
TABLE?
-An element in web
development that allows users
to PRESENT data in a more
organized way composed of
rows and columns
HOW TO CREATE
AN
HTML TABLE?
<TABLE>
ALONG WITH
<TABLE> </TABLE>
<TR>
<TH>
<TD>
DIFFERENT
ATTRIBUTES
OF HTML
1. BORDER- defines the
thickness of the border
around the table and its
cells.
The value is usually a
number, which represents
the width of the border in
pixels.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Juan</td>
<td>15</td>
</tr>
</table>
Drill: It ‘s your turn.
Using your own table output,
apply a border with a thickness
of 10 pixels
2. BORDERCOLOR-is used to set the
color of the table borders, including the
outer table border and the borders of
individual
The border attribute must be setcells.
first because
bordercolor only works when a border is already
visible.
The value of bordercolor can be:
Color name – e.g., "red", "blue", "green".
Hex code – e.g., "#FF0000" for red, "#0000FF" for blue
ETC.
EXAMPLE:<table border="2" bordercolor="green">
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
<tr>
<td>Math</td>
<td>Mr. Santos</td>
</tr>
<tr>
<td>Science</td>
<td>Ms. Cruz</td>
</tr>
Drill: It ‘s your turn.
Using your own table output,
apply a red bordercolor .
3. BGCOLOR-
is used to set the background color
of a table, table rows (<tr>), or table
cells (<td>, <th>).
It helps make data more visually
appealing and easier to read by
adding color highlights.
<table border="1" bgcolor="lightyellow">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
EXAMPLE: <td>Apples</td>
<td>P25.00</td>
</tr>
<tr>
<td>Bananas</td>
<td>P20.00</td>
</tr>
Drill: It ‘s your turn.
Using your own table output,
apply a yellow background color
on the entire table
. BACKGROUND-
is used to set an image as the
background of a table, table row (<tr>),
or table cell (<td>, <th>). This can make
tables more visually appealing and help
emphasize certain data.
<table border="1"
background="[Link]
oads/2024/02/[Link]">
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
EXAMPLE<tr>
<td>Math</td>
<td>Mr. Santos</td>
</tr>
<tr>
<td>Science</td>
<td>Ms. Cruz</td>
</tr>
</table>
Drill: It ‘s your turn.
Using your own table output,
apply a any background image
on the entire table
5. CELLSPACING-
Is used to set the amount of space
between the borders of table cells. It
controls the gap between each cell in a
table, making the layout more readable
or visually appealing.
The value is measured in pixels (default is
2 if not specified). A higher value creates
wider gaps between cells.
<table border="1" cellspacing="10">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
EXAMPLE<tr>
<td>Apples</td>
<td>P25.00</td>
</tr>
<tr>
<td>Bananas</td>
<td>P20.00</td>
</tr>
</table>
Drill: It ‘s your turn.
Using the table you have
created, apply the cellspacing
attribute to control the amount
of space between the table cells.
Set the value to 10, then save
and refresh your file to observe
the changes.
. CELLPADDING-
is used to set the space between the
content of a table cell and its border. It
creates an inner margin inside each cell,
making the text or content easier to read
by preventing it from being too close to
the edges.
The value is measured in pixels (default is
usually 1 or 2).A larger value increases
the padding inside each cell.
<table border="1" cellpadding="10">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
EXAMPLE<tr>
<td>Notebook</td>
<td>P25.00</td>
</tr>
<tr>
<td>Pencil</td>
<td>P20.00</td>
</tr>
</table>
Drill: It ‘s your turn.
Using the table you have
created, apply the cellpadding
attribute to control the space
between the content of each cell
and its border. Set the value to
20, then save and refresh your
file to observe how it affects the
appearance of the table.
7. WIDTH-
is used to set the width of a table, a column,
or a specific cell.
It helps control how much horizontal space
the table or its elements occupy on a
[Link] attribute can be specified in
pixels (px) or percentage (%), depending on
whether you want a fixed or responsive
layout.
<table border="1" width="500">
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
EXAMPLE<tr>
<td>Math</td>
<td>Mr. Santos</td>
</tr>
<tr>
<td>Science</td>
<td>Ms. Cruz</td>
</tr>
</table>
Drill: It ‘s your turn.
Using the table you have
created, apply the width
attribute to control how wide the
table appears on the webpage.
Set the value to 500 (pixels) for
a fixed width
8. HEIGHT-
is used to set the height of a table, table row
(<tr>), or table cell (<td> or <th>).
It determines how tall the table or its elements
will appear on a [Link] can help control
layout and spacing, making the data easier to
read. However, in HTML5, the height attribute is
deprecated, and CSS should be used instead for
modern, responsive design.
<table border="1" height="300">
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
EXAMPLE<tr>
<td>Math</td>
<td>Mr. Santos</td>
</tr>
<tr>
<td>Science</td>
<td>Ms. Cruz</td>
</tr>
</table>
Drill: It ‘s your turn.
Using the table you have created, apply the
height attribute to control the vertical size
of the table, a specific row, or an individual
cell.
Set the value to 300 (pixels) for a fixed
height, orUse a percentage (e.g., 50%) to
make it adjust relative to the browser.
After adding the attribute, save your file,
refresh the browser, and observe the
Summarize the
key concepts of
the lesson
using “Spin It”.
It’s Plicker
Time!
Mechanics:
Each of you will receive a
QR card, which you will use
to respond to the questions
projected on the screen.
Your answers will be
checked and scanned using
a mobile device.
Hands-on Activity:
1. You are tasked to design a web page that
displays the list of SDA Administrators from
previous years up to the present.
2. Use the student handbook as your
reference for the list of
[Link] the layout using the
HTML <table> tag to organize the data
Hands-on Activity:
3. Apply different table attributes such as
border, cellspacing, cellpadding, width,
height, bgcolor, and others to make the
table visually appealing to viewers.
4. Ensure the final output is neat,
functional, and well-designed when
viewed in a web browser.
Hands-on Activity:
5. Submit your completed output
through Orange Apps on or before
October 14, 2025.
Rubric Criteria :
Criteria Description Points
Complete and accurate list of
Content Accuracy SDA administrators based on 5 pts
the student handbook.
Correct and proper use of
Proper HTML Structure <table>, <tr>, <th>, <td>, and 5 pts
related table attributes.
Table design is neat, readable,
Visual Appeal and visually attractive. 5 pts
Effective use of colors, layout,
and styling to enhance
Creativity presentation without 5 pts
cluttering.
The final webpage is well-
Overall Presentation organized, clear, and easy to 5 pts
understand.
Total 25 pts
Closing
Prayer