Science, Technology, Engineering and Mathematics

(Empowerment Technologies)
SY 2021 – 2022

Unit 2: Web Programming-Hypertext Markup Language

Lesson 7: HTML Table

Introduction

Hi students! In this module we will be discussing

about HTML Table, and you will learn when to use tables
and the mark up that you need to create tables in your
webpages. Tables display information in rows and
columns, they are commonly used to display all manner
of data that fits in a grid such as train schedules, television
listings, financial reports, and sports results.

Learning Objectives

After studying and completing this module with 80%-100% accuracy, and to earn a grade with at
least 15 to 20 points in the activity you are expected to:

a) understand the correct markup of elements and attributes of tables in the syntax of an HTML
document.

b) modify a new or existing HTML document’s table properties according to specifications

c) create a webpage with tables using the proper element and attributes of HTML tables.

Pre-requisite Skills / Review

Before we begin the lesson, let us play a game.

Guess the word behind the pictures.

1. ____________________

2. ____________________

Page 1 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Lesson 1.1 – Table

▪ Advanced HTML constructs that allow categorical conversion and presentation of text,
images, and other HTML content into tabular data; that is, rows and columns.
▪ Indicated by the <TABLE></TABLE> tag pair.

Table Sub-elements
o Table rows are defined by using the <TR></TR> tag pair.
o Each row has several table cells; each table cell is defined by heading cells
(<TH></TH>) and/or data cells (<TD></TD>).
o Optional table captions can be defined using <CAPTION></CAPTION>
tag pair.
o Specifies a line of text that will appear centered above or below the table.
o Acts like a title for the table’s contents

Example:
Input this simple HTML table syntax as follows:

This will produce the following result:

Example:
Input this simple HTML table syntax as follows:

This will produce the following result:

Page 2 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Lesson 1.2 – Table Properties

A. Table Border and border color
▪ the border is an attribute of <table> tag and it is used to put a border across
all the cells.
▪ A numerical value is used to specify the border thickness in pixels.
▪ You can also set border color also using bordercolor attribute.
Example:
Input the following syntax as follows:

This will produce the following result:

B. Table Background Color

▪ You can set table background using one of the following two ways –
1. bgcolor attribute − You can set background color for whole table or just for one cell.
2. background attribute − You can set background image for whole table or just for one
cell.
Example 1:
Input the following syntax as follows:

This will produce the following result:

Page 3 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Example 2:
Input the following syntax as follows:

This will produce the following result:

B. Background color for Table cells

▪ Bgcolor is not applicable when setting the background color for table
cells.
▪ You can change the color of the table cell by using a CSS code. Add
<style=“background-color:yellow;”> to the specific cell that you want to
change the background color with your preferred color.
Example:
Input the following syntax as follows:

D. Table Width
▪ Use to change the width of a table.
▪ You can set a table width using width attributes.
▪ You can specify table width in terms of pixels or in terms of percentage of
available screen area.

Page 4 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Example:
Input the following syntax as follows:

This will produce the following result:

E. Table Height
▪ Use to change the height of a table.
▪ You can set a table height using height attributes.
▪ You can specify table height in terms of absolute number of pixels only.
Example:
Input the following syntax as follows:

This will produce the following result:

Example:
Input the following syntax as follows:
F. Table Alignment
▪ Use to align the table along the confines of the HTML document.
▪ Uses the ALIGN attribute of the table element to align left, right and center.

Example:
Input the following syntax as follows; two tables with alignment as “center” and “right”.

Page 5 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

This will produce the following result:

H. Table Header, Body, and Footer

▪ Tables can be divided into three portions.
▪ The three elements for separating the head, body, and foot of a table are:
o <thead> − to create a separate table header.
o <tbody> − to indicate the main body of the table.
o <tfoot> − to create a separate table footer.
Example:
Input the following syntax as follows:

Page 6 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

This will produce the following result:

I. Row and Column Spanning

▪ You will use colspan attribute if you want to merge two or more columns into
a single column. Similar way you will use rowspan if you want to merge two
or more rows.
Example:
Input the following syntax as follows:

This will produce the following result:

J. Cell Alignment
▪ Use to align a cell’s contents within the cell’s confines.
▪ Cell data can be horizontally aligned using the ALIGN attribute within heading cells or
data cell elements to be aligned left, right, or center.
▪ Cell data can also be vertically aligned using the VALIGN attribute within heading cells
or data cells to be aligned top, bottom, or middle.

Example 1: ALIGN attribute

Input the following syntax as follows:

Page 7 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

This will produce the following result:

Example 2: VALIGN attribute

Input the following syntax as follows:

This will produce the following result:

K. Cell Padding and Spacing

▪ cellpadding and cellspacing attributes are used to adjust the white space in
your table cells.
▪ The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.
Example:
Input the following syntax as follows:

This will produce the following result:

L. Nested Table
▪ Is the use of one table inside another table.

Page 8 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Example:
Input the following syntax as follows: One table inside a table.

This will produce the following result:

Key Concepts

➢ HTML tables allow you to arrange data like text, images, links, other tables, etc. into rows and
columns of cells using <table> tag.
➢ Table rows are defined by using the <TR></TR> tag pair.
➢ Each row has several table cells; each table cell is defined by heading cells (<TH></TH>)
and/or data cells (<TD></TD>).
➢ HTML Table Attributes:
o border (border)
o background (bgcolor/background)
o width (width %); height (height px)
o caption (caption)
o alignment (align)
o header (thead); body (tbody); footer (tfoot)
o row spanning (rowspan)
o column spanning (colspan)
o cell alignment (align); (valign)
o cell padding (cellpadding); cell spacing (cellspacing)
➢ Nested Table is the use of table inside another table

Page 9 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Enrichment Activity

I. Day 1: Post-test in Canvas (Check-out Activity)

Direction: Create and design a calendar like webpage using HTML table tags and attributes.
The calendar that you are going to create must be your birth month. Make sure to mark the date of your
birthday.
Sample Output:

Study Questions:

1. How can you use table effectively and efficiently in a webpage?

2. If you are going to create a webpage or website, in what instances are you going to apply table?

II. Day 2: Color Table

Worksheet #4

Directions: Using manual coding, create a webpage using HTML Table tags displaying the
following details below. Change the color of each cell based on the color indicated on each
cell in the table, also include the name of the color and divide them based on the format of the
table below. Attach a copy of the syntax/code and a screenshot of your final output.

Page 10 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

Enrichment Activity

III. Day 2: Performance Task

Situation: Create and design a Group Portfolio to showcase yourself with your hobbies and
interest as well as your achievements in life. Make the website as interactive as possible with the
integration of Principles in designing a website using manual coding (HTML).
Activity 1: Field Observation (10 minutes)
Guidelines: Students will be given different types of websites; each group member will give
their insights about their observations.

Activity 2: Dagdag, Bawas, Atbp. (20 minutes)

Guidelines: Students will take note of the information and concepts that they can add on their
webpage and discuss the parts or concepts that is applicable on their webpage.

Activity 3: Prototype Types (1 week)

Guidelines: Student will create their webpage using IDE’s available on their device (ex.
notepad or notepad++)

Activity 4: Testing Session (1 day)

Guidelines: Students will undergo for three testings. (For debugging and improvement of the
website)
1. Alpha testing - testing the website within the team.
2. Beta testing – testing the website outside the team.
3. User/Client testing – testing the website for the client's feedback.

Activity 5: I like, I wish, What If (1 day)

Guidelines: In this activity, students will share their feedback from the created webpage design
through answering the following questions:
I LIKE: What aspects in your design did you appreciate?
I WISH: What would you change from your design?
WHAT IF: What are your suggestions/alternative ideas for the improvement of your webpage
design?

YouTube Videos

Here are some YouTube videos you can watch for you to have a better understanding about the
lesson.

• HTML Tables
https://www.youtube.com/watch?v=vbqBVT99M6I
• HTML Nested Table
https://www.youtube.com/watch?v=LWs0C4td4Ws

Page 11 of 12
 Science, Technology, Engineering and Mathematics
(Empowerment Technologies)
SY 2021 – 2022

References
Larsen, R. (2013). Beginning HTML and CSS. Wrax. Retrieved from
https://learning.oreilly.com/library/view/beginning-html-and/9781118416518/
Willard, W. (2006). HTML: A beginner's guide, 3rd edition. Berkeley, Calif:
Osborne/McGraw-Hill.

For online simulation of codes:

https://www.tutorialspoint.com/html/index.htm
https://www.w3schools.com/

Page 12 of 12