GRADE

TLE-ICT
COMPUTER PROGRAMMING
QUARTER 2 – MODULE 5
Inserting Tables

1
 COMPUTER PROGRAMMING
QUARTER 2 MODULE 5

Inserting Tables

Objectives
• Understand what a table is and how to create and modify it
• Identify the different attributes of tables, rows and data
• Learn to merge cells and nest tables
• Know how to add images to a table
• Build a table with invisible border

What is a Table?
Tables allow you to organize and arrange data into columns and rows. Tables allow you to divide your
page into section where you can place header, footers and navigation links. Almost all Web sites are laid out using
tables.
Before starting to create any kind of table, whether to control the page layout or presentation of data in
tabular format, you should make a plan to help you build your table faster and more accurately.
A table is made up of rows and columns. You can place different elements in each cell like text or image.

Creating a Table
Tables arrange and organize content into columns and rows. Basically, they can be made via the
container tags <table></table>. Each row within the table is defined by the container tags <tr></tr>. Moreover, each
cell or data within a row is defined by the container tags <td></td>.
Remember that the cells <td></td> are placed inside rows <tr></tr> and rows are placed inside the table
<table></table>

Modifying Table
There are various ways to change the appearance of your table. You can change the thickness and color of
the border, set a certain distance between the contents of the cells and the border around it, set its background color
or image, etc. These various ways can be done through the table’s attributes.

2
 Attributes for <table></table>
Attribute Definition Values
Name
align Indicates the horizontal alignment of the table. left,right,center
Ex: <table align=”center”><table>
background Indicates the horizontal alignment of the table. Filename (path could be included)
Ex: <table background=”red.Flower.jpg”></table> of the image file
bgcolor Indicates the horizontal alignment of the table. Assigned name or hexadecimal
Ex: <table bgcolor=”red”></table> value of the color
border Indicates the thickness of the border in pixels. Number of pixels
Ex: <tableborder=”2”></table>
bordercolor Indicates the color of the border. Assigned name or hexadecimal
Ex:<table bordercolor=”red”></table> value of the color
cellpadding Indicates the distance (in pixels) between the contents of Number of pixels
the cells and the border around it.
Ex:<table cellpadding=”2”></table>
cellspacing Indicated the distance between the cells in pixels. Number of pixels
Ex: <table cellspacing=”2”></table>
width Indicates the width of the table in pixels or percent of the Number of pixels or number
width displayed by the Web browser. expressed as percent
Ex:<table width=”800”></table>

Modifying Table Rows

Specifically, rows’ <tr></tr> appearance can be changed as well and can be done through their attributes. By
default, the contents of table rows are aligned vertically.

Attributes for <tr></tr>

Attribute Definition Values
Name
align Indicates the horizontal alignment of the contents of left,right,center
the row.
Ex: <tr align=”center”><tr>
Valign Indicates the vertical alignment of the contents of the top, middle, bottom
row.
Ex: <tr valign=”bottom”></tr>
bgcolor Indicates the background color of the row. Assigned name or hexadecimal
Ex: <tr bgcolor=”red”></tr> value of the color
height Indicates the height of the row in pixels. Number of pixels
Ex: <tr height=”200”></tr>

3
Modifying Table Data

The appearance of <td></td> data on each cell can be changed through their attributes. The
nowrap attribute needs no value. It just needs to be present in the tag in order for it to provide its effect.
Bear in mind that the alignment set on a cell overrides the alignment set on the row.

Attributes for <td></td>

Attribute Definition
Align Indicates the horizontal alignment of the contents of the cell.
Ex: <td align=”center”><td>
Valign Indicates the vertical alignment of the contents of the cell.
Ex:<td valign=”bottom”></td>
Background Indicates the background image of the cell.
Ex:<td background=”redFlower.jpg”></td>
Bgcolor Indicates the background of the row.
Ex:<td bgcolor=”red”></td>
Height Indicates the height of the cell in pixels.
Ex:<td height=”200”></td>
Width Indicates the width of the table in pixels or percent of the width of the table.
Ex:td width=”300”></td>
Nowrap Inhibit word wrapping in the cell.
Ex:<td nowrap></td>
Colspan Merges multiple cells.
Ex: <td colspan=”2”></td>
rowspan Merges multiple rows.
Ex:<td rowspan=”2”></td>

4
Merging Cells Horizontally
Cells in the same row can be merged using the colspan attribute of <td></td> and <th></th>.

Merging Cells Vertically

Cells in the adjacent row can also be merged using the rowspan attribute of <td></td> and <th></th>.

Merging Cells Horizontally and Vertically

Merged cells on the same row can also be merged with cells on the adjacent rows by combining the rowspan and
colspan attributes.

5
Nesting Tables
Just like lists, tables can be nested. Web page developers use this technique to enhance even more the
layout and structure.

Creating a Table with Invisible Border

You can also try laying out tables without the border.

6
Adding an Image to a Table
You can add image to a cell by using the tag pair <td><img src=” …”>.

7
 ACTIVITIES

I. Identify the following questions.

1. This allows you to organize and arrange data into columns and rows.
2. What tag should be used to create a table in HTML?
3. The attribute that is used to indicate the distance (in pixels) between the contents of the cells and
the border around it.
4. The attribute that is used to indicate the horizontal alignment of the table.
5. The attribute that is used to indicate the background color of the row.
6. The attribute that is used to indicate the distance between the cells in pixels.
7. The attribute that is used to indicate the thickness of the border in pixels.
8. The attribute that is used to indicate the width of the table in pixels or percent of the width displayed
by the Web browser.
9. The attribute that is used to inhibit word wrapping in the cell.
10. The attribute that is used to merge multiple cells.

II. Enumerate me
Direction: Enumerate all the attributes you used in test III. Your answers here should match the codes
used in Test III.

III. Create the HTML file for the following outputs.

OUTPUT CODE

(Create your weekly schedule for the month of March.

Each week must consist of SUNDAY-MONDAY
Each day must consist of the 6:00 AM to 12 AM.)
Feel free to nest any list or add images.
This activity is 20 points.

Please see Figure 1 below as an example.

8
9
Figure 1

Schedule for the month of February

Week 1

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

6 AM – 7
AM
8 -9 AM

9-10 AM

10-11 AM

11 AM –
12 NN
12 NN –
1 PM
1 -2 PM

2- 3 PM

3 – 4 PM

5 – 6 PM

7 -11 PM

11 PM –
12 AM
WEEK 2

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

WEEK 3

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

10