INFORMATION AND COMMUNICATIONS TECHNOLOGY 9

THIRD QUARTER
MODULE NO. 1
TOPIC: HTML LIST AND TABLES

I. INTRODUCTION
In the previous lesson, you learned how to insert colors in HTML. Today, you will
learn how to make HTML tables and lists. Both could be seen as containers for other
contents or information. You can achieve clarity and a unified design by using them
to align elements. Tables and lists are used in HTML to organize and filter the content
or information provided to the webpage, making it easy to discover the information
you need. Given that tables and lists are part of HTML, you need to understand how
they work when constructing a webpage.

II. OBJECTIVES
At the end of the module, you, as an empowered learner, are expected to:

• know the use of table and list in HTML;

• apply HTML table and list in notepad; and
• appreciate the importance of table and list.

III. CONCEPT SUMMARY

The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells. The HTML tables are created using the
<table> tag in which the <tr> tag is used to create table rows and <td> tag is used
to create data cells. The elements under <td> are regular and left aligned by default.

Lists are good from a structural point of view as you help create a well-structured,
more accessible, easy-to-maintain document. They are also useful because they provide
specialized elements to which you can attach CSS styles. Finally, semantically correct lists
help visitors read your webpage, and they simplify maintenance when your pages need
to be updated.

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 1 of 13

IV. BRIEF DISCUSSION
• Concept Development/Learning Tasks
➢ HTML Table

Table header <th>, </th>

Table Row
<tr>, </tr>

Table data <td>, </td>

- HTML tables allow web developers to arrange data into rows and columns.
- The <table> HTML element represents tabular data — that is, information
presented in a two-dimensional table comprised of rows and columns of cells
containing data.
- The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
- The HTML tables are created using the <table> tag in which the <tr> tag is
used to create table rows and <td> tag is used to create data cells. The elements
under <td> are regular and left aligned by default.

• TAGS and Styles

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 2 of 13

 • Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table.

➢ HTML List
- HTML lists allow web developers to group a set of related items in lists.
There are three list types in HTML:

unordered list
- Used to group a set of related items in no
particular order.
- An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
- The list items will be marked with bullets (small black circles) by default:

Unordered(bulleted) lists are used when a set of items can be placed in any order.
An example is a shopping list:
• Milk
• Bread
• Butter
• coffee beans

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 3 of 13

The Type Attribute
You can use type attribute for <ul> tag
to specify the type of bullet you like. By
default, it is a disc. Following are the
possible options.

Ordered List
- Used to group a set of related items in a specific order
- An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
- The list items will be marked with numbers by default:

Ordered (numbered) lists are used to display a list of items that should be in a
specific order. An example would be cooking instructions:
1.Gather ingredients
2.Mix ingredients together
3.Place ingredients in a baking dish
4.Bake in oven for an hour
5.Remove from oven
6.Allow to stand for ten minutes
7.Serve

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like.
By default, it is a number. Following are the possible options

Description List
- Used to display name/value pairs such as terms and definitions.
- A description list is a list of terms, with a description of each term.
- The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term.

Description lists (previously called definition lists but renamed in HTML5) associate
specific names and values within a list. Examples might be items in an ingredient list and
their descriptions, article authors and brief bios, or competition winners and the years in

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 4 of 13

which they won. You can have as many name-value groups as you like, but there must
be at least one name and at least one value in each pair.
Description lists are flexible: you can associate more than one value with a single
name, or vice versa. For example, the term “coffee” can have several meanings, and you
could show them one after the other:

Result:

• HTML List tags

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 5 of 13

LET’S DO THIS!
Directions: Accomplish all the assigned tasks according to the given
instructions.

➢ HTML Table
• BASIC HTML TABLE
1. Open your notepad
2. Type this in your notepad.

Next

3. Save your work as .txt file and .html file.

4.Open the .html file and check if your work looks like this:

• TABLE WITH BORDER

1. Open your notepad
2. Type this in your notepad.

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 6 of 13

3. Save your work as .txt file and .html file.
4. Open the .html file and check if your work looks like this:

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 7 of 13

• CELL PADDING
1. Open your notepad
2. Type this in your notepad.

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 8 of 13

 3. Save your work as .txt file and .html file.
4.Open the .html file and check if your work looks like this:

➢ HTML List

• UNORDERED LIST
1. Open your notepad
2. Type this in your notepad.

3. Save your work as .txt file and .html file.

4. Open the .html file and check if your work looks like this:

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 9 of 13

• ORDERED LIST
1. Open your notepad
2. Type this in your notepad.

3. Save your work as .txt file and .html file.

4. Open the .html file and check if your work looks like this:

• DESCRIPTION LIST
1. Open your notepad
2. Type this in your notepad.

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 10 of 13

 3. Save your work as .txt file and .html file.
4. Open the .html file and check if your
work looks like this:

2. Broadening of Concept
• What have you realized about this topic?
_________________________________________________________________
_________________________________________________________________
________________________________________________________________

• How do these realizations help you in your task?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

• Integration
• How can you use your ability to organize at home and at work?
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

• What principle of design is applied in this lesson?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

• What role does creativity play in creating tables and lists in HTML?
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

V. CLOSURE SYNTHESIS
Synthesis
What was your most significant learning from today?
_______________________________________________________________________
_______________________________________________________________________

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 11 of 13

Meaning
What significant “a-ha” did you have today?
_______________________________________________________________________
_______________________________________________________________________
Action
How can you apply what you learned today? Why do you need this skill in the real world?
_______________________________________________________________________
_______________________________________________________________________
VI. EVALUATION/ASSESSMENT
Directions: Accomplish all the assigned tasks according to the given
instructions.

HTML Table:
1. Open your notepad.
2. Make a table about students’ information.
3. The table headers are Last Name, First Name, Middle Initial and Age.
4. At least 5 table data.
5. Save your work as .txt file and .html file.

HTML List:
1. Open your notepad
2. Make a list about cooking instructions of your pinoy favorite food.
3. Save your work as .txt file and .html file.

VII. REFERENCES
HTML - lists. (n.d.). Tutorials Point. Retrieved June 25,2021, from
https://www.tutorialspoint.com/html/html_lists.htm

HTML lists. (n.d.). W3 Schools. Retrieved June 25, 2021, from

https://www.w3schools.com/html/html_lists.asp

HTML lists. (n.d.). Web Platform. Retrieved June 25,2021, from

https://webplatform.github.io/docs/guides/html_lists/

HTML – tables. (n.d.). Tutorials Point. Retrieved June 25,2021, from

https://www.tutorialspoint.com/html/html_tables.htm

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 12 of 13

HTML tables. (n.d.). W3 Schools. Retrieved June 25, 2021, from
https://www.w3schools.com/html/html_tables.asp

HTML table basics. (n.d.). MDN Web Docs. Retrieved June 25,2021, from
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics

ISTE. (n.d.). ISTE Standards for Students. ISTE. Retrieved (July 8,2021), from
https://www.iste.org/standards/iste-standards-for-students
MDN Contributors. (2021, June 3). The table element – HTML. MDN Web Docs.
Retrieved June 25, 2021, from https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/table

MY LEARNING PERFORMANCE

COMPETENCY/SKILL ASSESSMENT SCORE WHAT I

(Formative and NEED TO DO
Summative)
Know the use of table and list in
HTML.

Apply HTML table and list in Evaluation/Assessment

notepad.

Appreciate the importance of table

and list.

Information and Communications Technology 9 – Module 1 – Third Quarter - Page 13 of 13