Republic of the Philippines

Department of Education
National Capital Region
DIVISION OF CITY SCHOOLS – MANILA
Manila Education Center Arroceros Forest Park
Antonio J. Villegas St. Ermita, Manila

Information and Communications

Technology (ICT)
Grade 10 Webpage Design
Special Science Course

Quarter 2 Week 5
Module 5

CREATE AND MODIFY TABLES

(PART 2)
HOW TO USE THIS MODULE?

Before starting the module, I want you to set aside other tasks that will disturb
you while enjoying the lessons. Read the simple instruction below to successfully
enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on this
module.
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

● Expectations - These are what you will be able to know after completing
the lessons in the module.
● Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
● Looking Back - This section will measure what learnings and skills that you
understand from the previous lesson.
● Brief Introduction-This section will give you an overview of the lesson.
● Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
● Remember - This section summarizes the concepts and applications of the
lessons.
● Checking your Understanding - It will verify how you learned from the
lesson.
● Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: CREATING AND MODIFYING TABLES

EXPECTATIONS
Upon completion of the module, learners should be able to:
● nest tables;
● format table border; and
● add image to a table.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. What are nested tables?

a. tables within headers c. tables within rows
b. tables within lists d. tables within tables
____ 2. Which of the following code creates an invisible border?
a. <table border=“0”> c. <table border=“none”>
b. <table border=“0%”> d. <table noborder>
____ 3. Which of the following is the correct HTML code in adding image to a cell?
a. <table><img src=“Sample Picture.jpg”</table>
b. <td><img src=“Sample Picture.jpg”</td>
c. <tr><img src=“Sample Picture.jpg”</tr>
d. none of the above
____ 4. Which table data attribute is used to add background color in a cell?
a. bcolor b. bgcolor c. ccolor d. cellcolor
____ 5. Which table data attribute merges multiple rows?
a. colspan b. nowrap c. rowspan d. valign
____ 6. What table data attribute merges multiple cells?
a. colspan b. nowrap c. rowspan d. valign
____ 7. Which table data attribute prevents or removes word wrapping in the cell?
a. nowrap b. nwrap c. wrap=“none” d. wrap=“0”
____ 8. Which table data attribute is used to add background image in a cell?
a. background b. backg c. bgcolor d. bground
____ 9. Which table attribute indicates the color of the border?
a. background b. bgcolor c. border d. bordercolor
____ 10. Which table attribute indicates the horizontal alignment of the table?
a. align b. halign c. position d. valign

3
LOOKING BACK TO YOUR LESSON

Directions: Write the correct HTML code of the table below.

SECTIONS PER GRADE LEVEL

GRADE 7 GRADE 8 GRADE 9 GRADE 10

Einstein Euclid Curie Descartes

Gates Linnaeus Dalton Newton

Pythagoras Mendel Napier Quesnay

4
BRIEF INTRODUCTION

Like lists, tables can be nested. Most web page developers use this strategy to create
a more appealing layout and structure. Nesting tables simply means creating a table inside an
existing table. Nesting tables can sometimes lead to complex layouts and complicated HTML
code. It can be tricky sometimes because of the number of tags and attributes that should be
in their correct order to get the desired layout.

Tables Inside Tables

To nest a table, the complete structure must be included, such as the <table> element.
Nested tables should always be placed between <td> … </td> tags.

HTML code:

Output:

5
Creating Tables with Invisible Border

Tables can also be inserted without the borders being visible. Using the attribute of the
<table> element, set the value of border into 0.

HTML code:

Output:

6
Inserting an Image to a Table

Aside from plain text, images can also be inserted inside cells of a table. Simply use
the tag pair <td><img src=“url ”></td>.

HTML code:

Output:

7
ACTIVITY:

A. Directions: Practice creating a table by making your “My Favorites Page”. Follow the
structure/layout below and supply the needed information. Use the font, color, background,
etc. of your choice and apply your creativity!

TLE-ICT 10 Get to know my favorites!

(Your full name)

Favorite Food Favorite Pet Favorite Singer Favorite Movie

(name of your (name of your (name of your (name of your

favorite food) favorite pet) favorite singer) favorite movie)
(insert image of your (insert image of your (insert image of your (insert image of your
favorite food) favorite pet) favorite singer) favorite movie)

REMEMBER

To nest a table, the complete structure must be included, such as the <table> element.
Nested tables should always be placed between <td> … </td> tags.

Tables can also be inserted without the borders being visible. Using the attribute of the
<table> element, set the value of border into 0. On the other hand, for visible borders, the
value of the border attribute can be set to any number. Bordercolor can also be defined either
through color names or their hex code.

Aside from plain text, images can also be inserted inside cells of a table. Simply use
the tag pair <td><img src=“url ”></td>.

8
 CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Anya needs to submit the activity in webpage design given by their TLE-ICT
teacher. According to the instructions, she needs to apply nesting tables in a
webpage. What does nesting tables mean?
a. Inserting a table inside a image c. Inserting a table inside an paragraph
b. Inserting a table inside a list d. Inserting a table inside a table

____ 2. Anya has already figured out what nesting tables mean and has successfully
nested a table in her webpage. However, she wants to remove the border of the
outside table. What should be the value of her border attribute?
a. 0 c. no border
b. 0% d. none

____ 3. When Anya removed the border visibility of her outer table, she wanted to
change the color of her inside table to red. What is the correct HTML code that
she should use?
a. <table border=“0” bordercolor=“red”> … </table>
b. <table border=“1” bordercolor=”red”> … </table>
c. <table border=“none” bordercolor=“red”> … </table>
d. <table bordercolor=”red”> … </table>

____ 4. After changing the bordercolor of her inside table, Anya wants to add
background image of the whole table. What is the correct HTML code that she
should use?
a. <table background=“heart.png”>
b. <table bgcolor=“heart.png”>
c. <table bground=“heart.png”>
d. <table background=“/heart.png”>

____ 5. Lastly, Anya needs to insert an image inside a cell in the table. Which of the
following HTML code can she use to insert an image in the table?
a. <td img src=“C:\Downloads\welcome.jpg”> </td>
b. <td>img src=“C:/Downloads/welcome.jpg”> </td>
c. <td>img src=“triangle.jpg”> </td>
d. <td>img src=“/triangle.jpg”> </td>

9
 POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Which of the following code creates an invisible border?

a. <table border=“0”> c. <table border=“none”>
b. <table border=“0%”> d. <table noborder>
____ 2. Which table attribute indicates the color of the border?
a. background b. bgcolor c. border d. bordercolor
____ 3. Which table data attribute is used to add background color in a cell?
a. bcolor b. bgcolor c. ccolor d. cellcolor
____ 4. Which table data attribute merges multiple rows?
a. colspan b. nowrap c. rowspan d. valign
____ 5. What table data attribute merges multiple cells?
a. colspan b. nowrap c. rowspan d. valign
____ 6. Which table data attribute prevents or removes word wrapping in the cell?
a. nowrap b. nwrap c. wrap=“none” d. wrap=“0”
____ 7. Which table data attribute is used to add background image in a cell?
a. background b. backg c. bgcolor d. bground
____ 8. Which table attribute indicates the horizontal alignment of the table?
a. align b. halign c. position d. valign
____ 9. Which of the following is the correct HTML code in adding image to a cell?
a. <table><img src=“Sample Picture.jpg”</table>
b. <td><img src=“Sample Picture.jpg”</td>
c. <tr><img src=“Sample Picture.jpg”</tr>
d. none of the above
____ 10. What are nested tables?
a. tables within headers c. tables within rows
b. tables within lists d. tables within tables

10
ANSWER KEY

Pre-test
1. D 3. B 5. C 7. A 9. D
2. A 4. B 6. A 8. A 10. A

Looking Back To Your Lesson Activity

Rubrics for Output:

Checking Your Understanding

1. D 2. A 3. B 4. A 5. C

Post-test
1. A 3. B 5. A 7. A 9. B
2. D 4. C 6. A 8. A 10. A

REFERENCES

Books:
Web Design 3rd Edition by Jemma Development Group

Online Sources:
https://www.yourhtmlsource.com/tables/nestingtables.html
http://www.corelangs.com/html/tables/table-inside-table.html

11
 Acknowledgement
First Edition 2020
Republic Act 8293, section 176 states that: No copyright shall subsist in any
work of the Government of the Philippines. However, prior approval of the government
agency or office wherein the work is created shall be necessary for exploitation of such
work for profit. Such agency or office may, among other things, impose as a condition
the payment of royalties.

Borrowed materials (i.e. songs, stories, poems, pictures, photos, brand names,
trademarks, etc.) included in this module are owned by their respective copyright
holders. Every effort has been exerted to locate and seek permission to use these
materials from their respective copyright owners. The publisher and authors do not
represent nor claim ownership over them.

Published by the Department of Education

Secretary: Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: Jessica Frances B. Dominguez, MTE

Teacher, Manuel G. Araullo High School

Editor: Ariel D. Tosio

Education Program Supervisor – TLE-TE/Voc

Reviewer/Validator: Anthony H. Ducta

Head Teacher, Manila Science High School

Management Team: Malcolm S. Garma, Regional Director

Genia V. Santos, CLMD Chief
Dennis M. Mendoza, Regional EPS in Charge of
LRMS and Regional ADM Coordinator
Maria Magdalena M. Lim, CESO V
Schools Division Superintendent
Aida H. Rondilla, Chief-CID
Lucky S. Carpio, Division EPS in Charge of LRMS and
Division ADM Coordinator

12