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
PROGRAMMING
.NET NCIII
Grade 11
Quarter 1 Week 4 Module 4
Learning Competency:
Design HTML5 document using Cascading
Style Sheet 3 (CSS3)
Creating Tables in HTML
TLE_ICTP.NET 11-12PPHJCIIf-i-29
SDO MANILA PROPERTY
PROGRAMMING.NET
K-12 CURRICULUM Division of City Schools-Manila
DEPARTMENT OF EDUCATION
K TO 12 BASIC EDUCATION CURRICULUM JUNIOR HIGH SCHOOL
TECHNICAL LIVELIHOOD EDUCATION AND SENIOR HIGH SCHOOL -
TECHNICAL-VOCATIONAL-LIVELIHOOD TRACK INFORMATION AND
COMMUNICATIONS TECHNOLOGY–PROGRAMMING (.NET TECHNOLOGY) NC
III
(1st Semester)
By:
RHAYMOND M. MONTERDE
Master Teacher I
C.P. Garcia High School
PROGRAMMING.NET
Lesson 4
K-12 CURRICULUM Creating Tables
in HTML
EXPECTATIONS:
At the end of the period, learners should be able to:
LO1. Create tables in a webpage
Key Terminologies
<table> tag - it is an HTML tag used to create table for presenting
data in rows and columns.
<tr> tag – stands for table row
<td>- stands for table data
Border – defines the size of the table border
Cellpadding - use to create more white space between cell contents
and its border
Cellspacing - use to increase distance between cells
Colspan – use to combine two or more cells from different columns
Rowspan – use to combine two or more cells from the same row
attribute – used to modify the tags used in html
LEARNING OUTCOME 1:
PROGRAMMING.NET
K-12 CURRICULUM
Create tables in a webpage
A. Direction: Choose the correct answer
1. A table attribute used to increase the distance between cells.
a. Spacing d. space
b. Cellspacing e. None of the above
c. Cellpadding
2. Table attribute use to create white space between cell contents and its
border.
a. Spacing d. space
b. Cellspacing e. None of the above
c. Cellpadding
3. What is <td>tag
a. Total data d. Table data
b. Tagging Data e. None of the above
c. Table divide
4. This table attribute is used to combine two or more cells of different
columns.
a. Colspan d. Merge
b. Rowspan e. None of the above
c. Colspanning
5. Attribute used to display table border.
a. boarder d. bold
b. line e. None of the above
c. border
PROGRAMMING.NET
Brief Introduction
K-12 CURRICULUM
Tables are defined with the <table> tag. A table is divided into table
rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). The letters td stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
Table Attributes:
Border – defines the size of the table border
Cellpadding - use to create more white space between cell contents and its
border
Cellspacing - use to increase distance between cells
Colspan – use to combine two or more cells from different columns
Rowspan – use to combine two or more cells from the same row
Sample Code using table
Sample Output
PROGRAMMING.NET
K-12 CURRICULUM
Based from the given output, it displays the list of student names on a
web browser. To show the border of the table we need to add border
attribute and the result is shown below.
The border
attribute with value
of 2. The higher the
value the thicker
the border
Output
PROGRAMMING.NET
K-12 CURRICULUM
For us to increase the space within the cell, we need to use the
cellpadding attribute and it should be place before or after the border
attribute.
The cellpadding
attribute with value
of 15. The higher
the value the bigger
the space within the
cell.
Output
PROGRAMMING.NET
K-12 CURRICULUM
ACTIVITY 1.1:
Create a calendar for the month of your choice using the <table>tag.
Write your answer below.
PROGRAMMING.NET
K-12 CURRICULUM
The <table> tag is very useful to nowadays. It help us to present
our data in a row and column manner. There are different attributes used to
modify or enhance the appearance of our table such as border and
cellpadding.
CHECKING YOUR UNDERSTANDING
What are the tags used in creating table using HTML? Write it
down give its function. Use the space below.
PROGRAMMING.NET
K-12 CURRICULUM
Direction: Debug the given code below and write the correct answer on the
space below.
PROGRAMMING.NET
K-12 CURRICULUM
PROGRAMMING.NET
K-12 CURRICULUM
Answer Key:
PRE-TEST LO1
1. B
2. C
3. D
4. A
5. C
ACTIVITY 1.1
To be check by teacher
CHECKING YOUR UNDERSTANDING
<table> tag - it is an HTML tag used to create table for presenting
data in rows and columns.
<tr> tag – stands for table row
<td>- stands for table data
Border – defines the size of the table border
Cellpadding - use to create more white space between cell contents
and its border
Cellspacing - use to increase distance between cells
Colspan – use to combine two or more cells from different columns
Rowspan – use to combine two or more cells from the same row
attribute – used to modify the tags used in html
POST-TEST LO 1
PROGRAMMING.NET
K-12 CURRICULUM
PRE-TEST LO1
Image 1
<img src=”filename” align=”right”>-
Image 2
<img src=”filename” align=”center”>-
Image 3
<img src=”filename”>-
ACTIVITY 1.1
To be check by teacher
CHECKING YOUR UNDERSTANDING
1. <img> tag- it is an html tag used to insert image in an html document.
2. Align- an attribute that lets you change the alignment of an image in a
webpage.
3. right- it is an image alignment value that se the image to the right.
4. width. An image attribute that let you change the width of an image.
5. height- an image attribute that let you change the height of an image.
POST-TEST LO1
1. E 4. A
2. A 5. D
3. C
PROGRAMMING.NET
K-12 CURRICULUM
References:
https://www.w3schools.com/
Acknowledgements
Writer: Rhaymond M. Monterde- MT I/ICT Computer Programming
Editors: Ariel Tosio- EPS, Elena C. Reyes- Principal IV, Gibson J.
Olazo– MT II/ICT Computer Programming Coordinator
Reviewer: Gibson J. Olazo– MT II/ICT Computer Programming
Coordinator, Ariel Tosio- EPS
Management Team: Maria Magdalena M. Lim-Schools Division
Superintendent-Manila, Aida H. Rondilla-Chief Education Supervisor
Lucky S. Carpio-EPS and Lady Hannah C Gillo, Librarian II-LRMS
PROGRAMMING.NET
K-12 CURRICULUM
PROGRAMMING.NET
K-12 CURRICULUM
