ICT1-Lesson Guide 15

Learning Guide
Grade 7 - ICT 1
Lesson 15 : Page Templates (Part 1)
Pre-requisite Concept : HTML Basics
Time : 3 hours/week
Introduction
Tables allow content in a page to be organized into sections in a page. Instead

of displaying content in a straightforward manner, it may be displayed in newspaper-
style as seen in popular websites. Tags are also used to markup sections in a
document for proper structuring, future modifications, and presentations.
This learning guide will discuss first on how to layout the page using tables and
in the following learning guide creating a page template will be tackled.
Objectives
1. Define the structure of a table.

2. Create and use tables to create tabular data or layout sections in web pages.
Lesson Proper
UNDERSTANDING TABLES
A table is composed of rows (horizontal) and columns (vertical). The intersection

of a row and a column is called a cell. Data is put inside a cell. The first row of a table
is normally used as the heading; it is where labels are put to describe the data
contained in the cells. A title (or caption) would definitely help the reader to know what
information or data the table contains.
Planning Your Table
Creating tables in HTML is like piling together blocks or tiles, like the ones in your
bathroom. You start with a row and add the columns for that row. The main
difference is that you build from the top.
It is a good practice to plan your tables first before you start coding them in
HTML. You can do this on paper so you would know how many columns and rows you
would need and if some cells or headers need to span several rows and columns.
Arranging the Tags
The <table> tag is used to indicate the start of the table. This tag can have
border, height, and width as attributes. The <tr> tag indicates the start of a row in the
table and inside these tags you use the <td> tag to add the content in the cell. The
<th> tag is a special tag used for indicating the headers of the columns of the table.
All these tags have corresponding closing tags to indicate the end of the effect of each
tag.
For you to understand how these tags are arranged in your HTML code, study
the structure of a sample table below. The table has 3 rows and 3 columns, with the
first row used as a header.
<table> start of table
<tr> start of row 1

<th> </th> cell 1 in row 1 – for header
</tr> end of row 1
<tr> start of row 2

<td> </td> cell 1 in row 2 – for data
</tr> end of row 2
<tr> start of row 3

</tr> end of row 3
</table> end of table
This is how you build a table in HTML. The three steps needed are: (1) starting
the table; (2) starting the row; and (3) adding the content for each cell.
Putting Caption
A caption tells your readers what your table contains. To indicate a caption, you
must make sure that the <caption> </caption> tag pair is inside the <table> </table>
tag pair. Captions, by default, are placed at the top of the table. No matter where you
place a text with the <caption> tag, it will always be displayed at the top of the table,
unless you explicitly define its vertical alignment.
The sample HTML code below is an example of not explicitly defining the caption
alignment.
<html>
<body>
<table border>
<tr>
<td> This is col 1 of row 1 </td>
</tr>
<caption> This is the caption defined using the CAPTION tag
pair </caption>
</table>
</body>
</html>
To explicitly define a caption’s alignment, you can define it using the ALIGN
attribute of the <caption> tag. To put the caption at the bottom of the table, you add
BOTTOM to the ALIGN attribute as shown in the HTML code below.
<html>
<body>
<table border>
<caption align=bottom> This is the caption defined using

the CAPTION tag pair </caption>
<tr>
</tr>
</table>
</body>
</html>
Using the ALIGN attribute of the <caption> tag
DEFINING THE STRUCTURE OF A TABLE
Defining Rows
In defining the structure of a table, you define it in this manner: Define the
rows first. The syntax for this is:
<tr>
Row content
</tr>
where the row content contains the columns and contents of the row.
Defining Cells
Cells are placed inside every row. Whenever a cell is defined column or columns
are implicitly defined. If a cell contains a heading, you use the table header <th>
</th> tag pair. Contents placed inside <th> tags are displayed in bold in most
browsers. If a cell contains data, you use the table data <td> </td> tag pair.
Contents placed inside <td> tags are displayed in normal text.
Spanning Cells
 To define the number of rows a cell will span, use the ROWSPAN attribute of
the <td> tag.
 To define the number of columns a cell will span, use the COLSPAN attribute
of the <td> tag
The sample HTML code below is an application on defining the table structure.
<html>
<body>
<table border>
<caption> Flower Prices </caption>
<tr>
<th> </th>
<th> 2-4 pcs </th>
<th> 5-8 pcs </th>
<th> 9-10 pcs </th>
<th> 12 or more </th>
</tr>
<tr>
<td> Rose </td>
<td rowspan=2> @45.00 </td>
<td> @40.00 </td>
<td colspan=2> @35.00 </td>
</tr>
<tr>
<td> Tulip </td>
<td> @42.00 </td>
<td> @36.00 </td>
<td> @32.00 </td>
</tr>
</table>
</body>
</html>
Below is the output on the browser:

MODIFYING THE STRUCTURE OF A TABLE
Even though rows and cells have already been defined, they can still be modified
to suit your taste. The attributes of a table that can be modified are the table borders,
the spacing between cells, the space between the table border and the cell border, the
alignment of cell contents, the space between the cell border and the content, and the
width and height of the cells and the entire table.
Enhancing Borders and Adjusting Cell Spacing
To change the width of the outside border (the border around the table), you
simply add a value to the BORDER attribute to indicate the thickness of the border in
pixels. The syntax to do is:
<table border = n>
Below is a sample code on enhancing <th> This uses border = 8

table border: </th>
</tr>
</table>
<html>
<body> </body>
</html>
<table border>
<tr> Below is the output on the browser:
<th> This uses the
default border </th>
</tr>
</table>
<br>
<table border=4>
<tr>
<th> This uses border = 4
</th>
</tr>
</table>
<br>
<table border=8>
<tr>
To change the spacing between cells, set the attribute CELLSPACING of the
<table> tag to the spacing you desire in pixels.
<table border cellspacing = n>
Below is a sample code on adjusting cell

spacing:
<table border cellspacing=1>
<tr>
<html> <th> This cells are spaced 1
<body> pixel </th>
</tr>
<table border cellspacing> </table>
<tr>
<th> This uses the default </body>
border </th> </html>
</tr>
</table>
<br> Below is the output on the browser:

<tr>
<th> This cells are spaced 8
pixels </th>
</tr>
</table>
<br>

<tr>
<th> This cells are spaced 4
pixels </th>
</tr>
</table>
<br>
Changing Content Alignment
To change the alignment of the contents in all the cells in a row, use the ALIGN
attribute of the <TR> tag. The syntax for this is:
<tr align = alignment>
where alignment is either CENTER, RIGHT, or LEFT. The default alignment is RIGHT.
Below is a sample code on changing content alignment:
<html>
<body>
<table border>
<tr align=right>
<td> The content here is right-aligned </td>
<td> The content here is right-aligned </td>
</tr>
<tr align=left>
<td> Look at this; the content is left-aligned </td>
<td> Look at this; the content is left-aligned </td>
</tr>
<tr align=center>
<td> This is centered </td>
<td> This is centered </td>
</tr>
</table>
</body>
</html>
To change the alignment of the contents of individual cells, use the ALIGN
attribute of the <td> or <th> tag. The syntax for this is:
<td align = alignment>

<th align = alignment>
where alignment is either CENTER, RIGHT, or LEFT. The default alignment is RIGHT.
Below is the sample code in html:
<html>
<body>
<table border>
<tr>
<th align=right> The header is right-aligned </th>
<th align=left> Look at this header; it is left-aligned </th>
</tr>
<tr>
<td align=center> The content is center-aligned </td>
<td align=center> This content is also center-aligned </td>
</tr>
</table>
</body>
</html>
Adjusting Space Around Content
Sometimes you do not want to increase the width of the cell border. Instead,
you want to modify the amount of space present around the content of each cell (this
method is called cell padding). You can do so by indicating how many spaces in pixels
you want using the CELLPADDING attribute of the <table> tag. The syntax to do this
is:
<table border cellpadding = n>
Below is the sample code:
<html>
<body>
<table border cellpadding>

<tr>
<th> This uses the default border </th>
</tr>
</table>
<br>
<table border cellpadding=8>

<tr>
<th> This cells are padded with 8 pixels around them </th>
</tr>
</table>
<br>

<tr>
<th> This cells are padded with 4 pixels around them </th>
</tr>
</table>
<br>

<tr>
<th> This cells are padded with 1 pixel around them </th>
</tr>
</table>
</body>
</html>

Changing Width and Height of the Table and Cells
If you want the table to be displayed using your own defined width and height,
you can do so using the WIDTH and HEIGHT attributes of the <table> tag. The syntax
to do this is:
<table height = height>

<table width = width>
where height and width are values in pixels or percent depending on the window size.
<html>
<body>
<table border height=150 width=450>

<tr>
<td> The table is 150 pixels in height and 450 pixels in width
</td>
</tr>
</table>
<br>
<table border height=25% width=450>

<tr>
<td> The table is 25% of the screen in height and 450 pixels in
width </td>
</tr>
</table>
<br>
<table border height=80 width=50%>

<tr>
<td> The table is 80 pixels in height and 50% of the screen in
width </td>
</tr>
</table>
</body>
</html>
To change the height and width of the cell, you use the height and width
attributes of either the <td> tag or the <th> tag. The syntax to do this is:
<td height=height> <th height=height>

<td width=width> <th width=width>
<html>
<body>
<table border>
<tr>
<th height=250 width=10%> This header uses a 250 pixel height
and 10% of the screen width </th>
<td> This cell is affected by the header height and width since
it belongs to the same table </td>
</tr>
</table>
<br>
<table border>
<tr>
<th> This header is affected by the other cell since it belongs
to the same table </th>
<td height=100 width=210> This is 100 pixels in height and 210
pixels in width </td>
</tr>
</table>
</body>
</html>

Note: For other topics on creating table, read pages 248 to 254 in your
textbook.
Activity 14
Write the complete html code in a 1 whole sheet of paper that outputs the
multiplication table. The sample output is found on page 255 of your
textbook.
Note: You can use extra sheets, if one sheet is not enough. Do not forget to
write your name, your section and the activity number. Submit the said
activity on February 14, 2022.
References
1. Developing Useful Computer Applications for Today’s World: Fundamentals of

Web Design and Development (2015) by Dennis Cesar R. Patiño (Textbook)
2. Designing Web Pages by Teresita P. Padasas, et. Al. (2009)
3. Introduction to Computer by Antonio M. Andres, Sr.
4. Computer Concepts, Windows, & MS Office by N. Saravanan and D. Shanthi
(2002)

ICT1-Lesson Guide 15

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ICT1-Lesson Guide 15

Uploaded by

Copyright:

Available Formats

Learning Guide

Lesson 15 : Page Templates (Part 1)

Pre-requisite Concept : HTML Basics

Tables allow content in a page to be organized into sections in a page. Instead

1. Define the structure of a table.

A table is composed of rows (horizontal) and columns (vertical). The intersection

Planning Your Table

<table> start of table

<tr> start of row 1

<tr> start of row 2

<tr> start of row 3

</table> end of table

<caption align=bottom> This is the caption defined using

DEFINING THE STRUCTURE OF A TABLE

Below is the output on the browser:

Enhancing Borders and Adjusting Cell Spacing

<table border = n>

Below is a sample code on enhancing <th> This uses border = 8

<table border cellspacing = n>

Below is a sample code on adjusting cell

<table border cellspacing=8>

<table border cellspacing=4>

Changing Content Alignment

<tr align = alignment>

Below is the output on the browser:

<td align = alignment>

Below is the output on the browser:

Adjusting Space Around Content

<table border cellpadding>

<table border cellpadding=8>

<table border cellpadding=4>

<table border cellpadding=1>

Below is the output on the browser:

<table height = height>

Below is the sample code:

<table border height=150 width=450>

<table border height=25% width=450>

<table border height=80 width=50%>

<td height=height> <th height=height>

Below is the sample code:

Below is the output on the browser:

1. Developing Useful Computer Applications for Today’s World: Fundamentals of

You might also like