Unit 2.9 Tables

Programming and Development Tools Web Programming

UNIT

2.9
Web Programming
Tables

OBJECTIVES
This unit helps you to add tables in your Web page and format them.
At the end of this unit, you will be able to
Insert tables into your Web page
Add caption, heading and border to your table
Modify the rows and columns as per the need
Format the table by providing enough spaces between cells and
text.
Align the table in the browser window
Add background colour and images to the cells and the table

Benchmark standard
Create Web pages with tables of various formats

Tables 2.9-1


Let us Revise!

1. Write how to add music to a Web page.
2. Name the attributes of the <EMBED> tag.
3. Write how to add movie to a Web page.
4. Write how to add animation to a Web page.

Introduction
A table is a rectangular grid of cells arranged in the form of rows and columns.
For example, you write your time table in the form of a table. A simple
example for a table is given in Table 2.9.1.
0 30 45 60 90
1 √3
Sin 0 ½ /√2 /2 1
√3 1
Cos 1 /2 /√2 ½ 0
1
Tan 0 /√3 1 √3 ∞
Table 2.9.1: Trigonometric values in a table
Tables can also be added to a Web page. HTML provides tags to add tables
into a Web page easily.

Hands-On!

The following example illustrates how to insert tables in a Webpage,
Open the HTML file Table.html in Internet Explorer.
The code in Table.html file is given below:
<HTML>
<HEAD>
<TITLE> Table </TITLE>
</HEAD>
<BODY>
<H1 Align="Center"> Basic Information About Some
Countries </H1>
<TABLE Border="10" Width="100%" Height="450"
CellPadding="10" Cellspacing="3" Align="Center"
Background="Picture1.jpg" Style="Color:Yellow;Font-
size=20">
<TR>

Tables 2.9-2


<TH><TH Width="12%" Height="75"> Malaysia <TH Width="12%"
Height="75"> India <TH Width="12%" Height="75"> China <TH
Width="12%" Height="75"> Japan
<TH Width="12%" Height="75"> Australia <TH Width="12%"
Height="75"> USA <TH Width="12%" Height="75"> UK
</TR>
<TR>
<TH> Continent <TD> Asia <TD> Asia <TD> Asia <TD> Asia
<TD> Australia <TD> North America <TD> Europe
</TR>
<TR>
<TH> Capital <TD> Kuala Lumpur <TD> New Delhi <TD>
Beijing <TD> Tokyo <TD> Canberra <TD> Washington <TD>
London
</TR>
<TR>
<TH> Flag <TD Background="Mal_Flag.gif" Width="12%"
Height="68"><TD Background="Ind_Flag.gif"><TD
Background="Chi_Flag.gif"><TD
Background="Jap_Flag.gif"><TD
Background="Aus_Flag.gif"><TD
Background="Ame_Flag.gif"><TD Background="Eng_Flag.gif">
</TR>
<TR>
<TH> Currency <TD> Ringgit <TD> Rupee <TD> Yuan Renminbi
<TD> Yen <TD> Dollar <TD> Dollar <TD> Pound
</TR>
<TR>
<TH> ISD Code <TD> 60 <TD> 91 <TD> 86 <TD> 81 <TD> 61
<TD> 1 <TD> 44
</TR>
</Font>
</TABLE>
</BODY>
</HTML>
Code Sample 2.9.1
The Web page shown in Figure 2.9.1 is displayed in the browser window.

Tables 2.9-3


Figure 2.9.1: A Web Page containing a Table

2.9.1 Creating Basic Table
A simple table can be created using three tags namely <TABLE>, <TR> and
<TD>. The code used to create a table are enclosed between <TABLE> and
</TABLE> tags. The <TR> tag inserts a row in a table. The <TD> tag
inserts a cell in the row. TR stands for Table Row. TD stands for Table Data.
The steps to create a simple table are as follows:
Step 1: Open the <TABLE> tag.
Step 2: Create a row using <TR> tag.
Step 3: Create cells using <TD> tag.
Step 4: End the row using </TR> tag.
Step 5: Follow the steps from 2 to 4 to create as many rows as you want.
Step 6: Finally, end the table using </TABLE> tag.

Hands-On!

The following example creates a Web page with a simple table:
Open the HTML file Table1.html in Internet Explorer.

Tables 2.9-4


The code in Table1.html file is given below:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
<TD> Malaysia
<TD> India
<TD> China
</TR>
<TR>
<TD> Continent
<TD> Asia
<TD> Asia
<TD> Asia
</TR>
<TR>
<TD> Capital
<TD> Kuala Lumpur
<TD> New Delhi
<TD> Beijing
</TR>
<TR>
<TD> Flag
</TR>

</TABLE>
</BODY>
</HTML>
Code Sample 2.9.2


Tables 2.9-5


Figure 2.9.2: A Web Page Containing a Simple Table

Lab Exercise

Lab Exercise 1: Open D9_1.html in Internet Explorer. The following code will be present in
D9_1.html.
<HTML>
<HEAD>
<TITLE> TEMPERATURE ANALYSIS</TITLE>
</HEAD>
<BODY>
<CENTER>

<TABLE BORDER=1>
CAPTION> TEMPERATURE ANALYSIS </CAPTION>
<TR>
<TH>CITY</TH>
<TH> MAX.TEMP</TH>
<TH>MIN.TEMP</TH>
</TR>

<TR>
<TD>JOHOR </TD>
<TD> 32</TD>
<TD> 27</TD>
</TR>

<TR>
<TD>KEDAH</TD>

Tables 2.9-6


<TD> 32</TD>
<TD>24 </TD>
</TR>

<TR>
<TD>KELANTAN</TD>
<TD> 33</TD>
<TD>17 </TD>

</TR>

<TR>
<TD>MELAKA</TD>
<TD> 32</TD>
<TD>24 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

1. Name the tag which is used to create the table in source code D9_1.html.
2. Identify the tag which is used to display the comment with a table.
3. Name the tag which is used to add a row into the table.
4. Identify the tag which is used to add a data into the table.
5. Locate the attribute which is used to set border for the table.
6. Name the tag which is used to add a cell header.

Lab Exercise 2: Open D9_1.html in Internet Explorer.
1. View the source code in the Notepad.
2. Change the border size to 5.
3. Add one more row into the table.
4. Add a data into the new row.

Lab Exercise 3: Open States.html that you have created under the folder in your name in C:
Modify the program and display the output as shown in the following figure using <TABLE> tag.

Tables 2.9-7


Self-Check Exercise 2.9.1

Arrange the tags given below in the order they should appear for creating a simple table:
1. </TR>
2. </TABLE>
3. <TD>
4. <TABLE>
5. <TR>
6. </TD>

2.9.2 Heading, Caption and Border
Each column in a table should be given a heading. The <TH> tag is used to
display the headings in a table. In Figure 2.9.1, the first row and first column
of the table are created using <TH> tag. TH stands for Table Heading. The
content in the cells created using <TH> tag will be slightly bigger and bold
than the content in the cells created using <TD> tag.
A caption can be given for a table. It is used to identify the table. The
<CAPTION> tag is used to add a caption to a table. The Align attribute of the
<CAPTION> tag specifies the position, where the caption will be displayed.
You can display the caption either above the table or below the table.
Align=”Top” will display the caption above the table and Align=”Bottom” will
display the caption below the table. In Figure 2.9.1, the caption Basic
Information About Some Countries is given using the <CAPTION> tag.

Tables 2.9-8


Note

The default value of the Align attribute of the <CAPTION> tag is Top.

Borders can be given to a table to make it more attractive and readable. The
Border attribute of <TABLE> tag is used to add borders to a table. The value
given to the Border attribute specifies the width of the border. The border of
the table shown in Figure 2.9.1 is added using the following code:
<TABLE Border=”10”>

Hands-On!

The following example modifies the Web page shown in Figure 2.9.2 by
adding heading, caption and border to the table:
The modified code in Table2.html file is given below :
<HTML>
<HEAD>
</HEAD>
<BODY> Border added
to the Table
<TABLE Border="10">
<CAPTION> Basic Information About Some Countries
</CAPTION>
Caption added to
<TR> the Table
<TH>
<TH> Malaysia Heading given to
the Table using
<TH> India <TH> tag

<TH> China
</TR>
<TR>
<TH> Continent
<TD> Asia Heading given to
the Table using
<TD> Asia <TH> tag
<TD> Asia
</TR>

Tables 2.9-9


<TR>
<TH> Capital
Heading given to
<TD> Kuala Lumpur the Table using
<TH> tag
<TD> New Delhi
<TD> Beijing
</TR>
<TR>
<TH> Flag
</TR> Heading given to
the Table using
</TABLE> <TH> tag

</BODY>
</HTML>
Code Sample 2.9.3

Figure 2.9.3: A Table with Heading, Caption and Border

Lab Exercise

D9_2.html.

<HTML>

Tables 2.9-10


<HEAD>
</HEAD>
<BODY>
<CENTER>
<TABLE Border=5 Width =75% Bgcolor="SILVER"
Border Bordercolor="BLUE" >
<CAPTION Align=TOP> TEMPERATURE ANALYSIS </CAPTION>
<TR>
<TH Width=25%>CITY</TH>
<TH Width=25%> MAX.TEMP</TH>
<TH Width=25%>MIN.TEMP</TH>
</TR>
<TR>
<TD>JOHOR </TD>
<TD> 32</TD>
<TD> 27</TD>
</TR>
<TR>
<TD>KEDAH</TD>
<TD> 32</TD>
<TD>24 </TD>
</TR>
<TR>
<TD>KELANTAN</TD>
<TD> 33</TD>
<TD>17 </TD>
</TR>
<TR>
<TD>MELAKA</TD>
<TD> 32</TD>
<TD>24 </TD>
</TR>
<TR>
<TD>PENANG </TD>

Tables 2.9-11


<TD> 32</TD>
<TD>21 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

1. List out the attributes are in <TABLE> tag.
2. Name the attribute which is used to set the width of the table.
3. Locate the attribute which is used to display the text after the table.
4. Identify the attribute which is used to change the background colour of the table in
source code D9_2.html.
5. Name the attribute which is used to change the border colour of the table in source
code D9_2.html.

2. Set the caption attribute alignment to top.
3. Change the background colour of the table to yellow.
4. Change the border colour of the table to maroon.

Activity 2.9.1

1. Create a Web page that explains how to add tables as shown in Figure
2.9.4.
2. Save the HTML file as Activity1.html.
3. The hyperlink at the bottom of the page should be linked to More.html.

Tables 2.9-12


Figure 2.9.4: A Web page explaining the Table

2.9.3 Rows and Columns
Two or more cells can be joined together using Rowspan and Colspan
attributes of the <TH> and <TD> tags. Rowspan joins two or more cells in a
column into a single cell. Colspan joins two or more cells in a row into a single
cell. In Figure 2.9.1, the first row the cells in the first row of the table are joined
to a single cell using the following code:
<TH Colspan=”7”> COUNTRIES </TH>
The height of the cells in a row can be set using the Height attribute of the
<TH> or <TD> tag. The width of the cells in a column can be set using the
Width attribute of the <TH> or <TD> tag. In Figure 2.9.1, the height of the
cells in a row and width of the cells in a column are set using the following
code:
<TH Width="12%" Height="75"> Malaysia

Note

The value for Height and Width attribute can be given in pixels or in percentage of total height
or width of the table.

Tables 2.9-13


Hands-On!

adding the heading COUNTRIES that spans from second column to fourth
column. The Height and Width of the rows and columns are also modified.
The modified code in Table3.html file is given below :
Columns merged
using Colspan
<TR> <TH> <TH Colspan="3"> COUNTRIES </TR> attribute

</CAPTION>
<TR>
Width and Height
<TH> of a cell are
modified
<TH Width="12%"> India
Width of the cells
<TH Width="12%"> China is modified
</TR>
<TR>
<TH Width="12%" Height="68"> Continent
Width and Height
<TD> Asia of a cell are
modified
<TD> Asia
<TD> Asia
</TR>
<TR>
<TH Height="68"> Capital
<TD> Kuala Lumpur
Height of the
<TD> New Delhi cells is modified

<TD> Beijing
</TR>
<TR> Height of the
<TH Height="68"> Flag cells is modified

</TR>
Code Sample 2.9.4


Tables 2.9-14


Figure 2.9.4: A Table with merged columns

Mark the tags and attributes hidden in the table with red boxes and green boxes respectively:

T H T R A G T

H T W I D T H

K D T A B L E

R O W S P A N

2.9.4 Cell Spacing and Cell Padding
The Cellspacing attribute of the <TABLE> tag specifies the space between the
cells in a table in pixels. The cellpadding attribute <TABLE> tag specifies the
space between the edge of a cell and the text contained in it. In Figure 2.9.1,
the space between two consecutive cells is set to 3 pixels and the space
between the cell and the text is set to 10 pixels using the following code:
<TABLE Cellpadding=”10” Cellspacing=”3”>

Tables 2.9-15


Hands-On!

adding the Cellspacing and Cellpadding attributes to the <TABLE> tag.
The modified segment of the code in Table4.html file is given below:
<BODY>
<TABLE Border="10" Cellspacing="3" Cellpadding="10">
<TR> <TH> <TH Colspan="7"> COUNTRIES </TR> Cell spacing and cell
padding are modified
</CAPTION>
<TR>
<TH>
<TH> Malaysia
<TH> India
<TH> China
</TR>
Code Sample 2.9.5

Figure 2.9.4: A Table with proper spacing

Tables 2.9-16


2.9.5 Cell Background
An image can be set as a background of a cell in a table. The Background
attribute of the <TH> tag or <TD> tag can be used to set an image as a
background for a cell in a table. The filename of a picture file is assigned to
the Background attribute to display that picture as background of a cell. In
Figure 2.9.1, the Malaysian flag is displayed as the background of a cell using
the following code:
<TD Background=”Mal_Flag.gif”>
An image can be set as a background of a table. The Background property of
the <TABLE> tag can be used to set an image as a background of a table.
The filename of a picture file is assigned to the Background attribute to display
that picture as background of a table. In Figure 2.9.1, the Globe is displayed
as the background of the table using the following code:
<TABLE Background=”Globe.gif”>
Colours can be given to the background of a cell or to the table using the
Bgcolor attribute. For example, <TD Bgcolor=”Green”> will make the
background of a cell to appear green and <TABLE Bgcolor=”Green”> will
make the background of the table to appear green.

Hands-On!

adding background images to the cells and the table.
<TABLE Border="10" Cellspacing="3" Cellpadding="10"
Width="480" Background="Picture1.jpg">
Background picture
<TR> <TH> <TH Colspan="3"> COUNTRIES </TR> added to the table

</CAPTION>
<TR>
<TH>
<TH Width="12%"> India
<TH Width="12%"> China
</TR>

Tables 2.9-17


<TR>
<TH Width="12%" Height="68"> Continent
<TD> Asia
<TD> Asia
<TD> Asia
</TR>
<TR>
<TH Height="68"> Capital
<TD> Kuala Lumpur
<TD> New Delhi
<TD> Beijing
</TR>
<TR>
Background picture
<TH Height="68"> Flag added to cells
<TD Background="Mal_Flag.gif">
<TD Background="Ind_Flag.gif">
<TD Background="Chi_Flag.gif">
</TR>
</TABLE>
Code Sample 2.9.6


Tables 2.9-18


Figure 2.9.6: A Table with Background Image

Some More Attributes
Align Attribute
The table can be aligned to the left, centre or right in the browser window
using the Align attribute of the <TABLE> tag. In Figure 2.9.1, the table is
aligned to the centre of the browser window using the following code:
<TABLE Align=”Center”>
Align attribute can also be used with <TH> and <TD> tags to change the
alignment of text in a cell. For example, the tag <TD Align=“Right”> will
align the text inside the cell to the right.

Style Attribute
The Font size, colour etc. can be set using the Style attribute. In Figure 2.9.1,
the Font colour and size of the text are set using the following code:
<TABLE Style="Color:Yellow;Font-size=20">
Hands-On!

changing the alignment and style of the text.

Tables 2.9-19


<TABLE Border="10" Cellspacing="3" Cellpadding="10"
Width="480" Background="Picture1.jpg" Align=”Center”
Style="Color:Yellow;Font-size=20">


Figure 2.9.7: A Web page containing a Table

Lab Exercise

D9_3.html.

<HTML>
<HEAD>
</HEAD>

Tables 2.9-20


<BODY>
<CENTER>
<TABLE Width=75% Border=5 Bgcolor="YELLOW"
Border Bordercolor="BLACK" Background =
C:CLIMATE.BMP STYLE="COLOR:BLACK">

<CAPTION> TEMPERATURE ANALYSIS </CAPTION>
<TR >
<TH Width=25%>CITY</TH>
<TH Width=25%> MAX.TEMP</TH>
<TH Width=25%>MIN.TEMP</TH>
</TR>

<TR>
<TD>JOHOR </TD>
<TD Align=RIGHT > 32</TD>
<TD Align=RIGHT> 27</TD>
</TR>

<TR>
<TD>KEDAH</TD>
<TD Align=RIGHT>24 </TD>
</TR>

<TR>
<TD>KELANTAN</TD>
</TR>

<TR>
<TD>MELAKA</TD>
</TR>

<TR>
<TD>PENANG </TD>
</TR>
</CENTER>
</TABLE>
</BODY>
</HTML>

1. Name the attribute which is used to set the background image of the table.
2. Identify the attribute which is used to change the text colour of the table element.
3. Locate the attribute which is used to make text to centre alignment.

Tables 2.9-21


2. Change the background picture.
3. Change the text colour to blue.
4. Change the text alignment of MAX TEMP and MIN TEMP to right.

Lab Exercise 8: Open States.html that you have created under the folder in your name in C:
Set the table width to 50%. Change the background colour to yellow, border to lavender and
text to green and display the output as shown in the following figure.

Figure 2.9.8: States of Malaysia

Lab Exercise 9: Write a program to display the output in the following figure.

Tables 2.9-22


Figure 2.9.9: A Web page containing a Time-Table

D9_4.html.

<HTML>
<HEAD>
<TITLE> Student Mark List </TITLE>
<H1 Align = CENTER> Student Marks </H1>
</HEAD>

<BODY>
<CENTER>
<TABLE Border>
<TR Style="BACKGROUND-COLOR:LIME">
<TH>Student Name</TH>
<TH>Malay </TH>
<TH>English</TH>
<TH>Maths</TH>
<TH>Science</TH>
<TH>Rank</TH>
</TR>

<TR Style = "TEXT-ALIGN:CENTER;FONT-WEIGHT:BOLD;">
<TD Style="BACKGROUND-COLOR:FUCHSIA">Zai</TH>
<TD Style="BACKGROUND-COLOR:GOLDENROD">86

Tables 2.9-23


</TD>
<TD Style="BACKGROUND-COLOR:GREEN">75</TD>
<TD Style="BACKGROUND-COLOR:AQUA">80</TD>
<TD Style="BACKGROUND-COLOR:RED">88</TD>
<TD Style="BACKGROUND-COLOR:PINK">II</TD>
</TR>

<TH Style="BACKGROUND-COLOR:FUCHSIA">
Saha
</TH>
<TD Style="BACKGROUND-COLOR:GOLDENROD">
87
</TD>

<TD Style="BACKGROUND-COLOR:GREEN"> 85</TD>



<TD Style="BACKGROUND-COLOR:PINK">I</TD>
</TR>

Susan
</TH>

68
</TD>


<TD Style="BACKGROUND-COLOR:PINK">III</TD>
</TR>

Rafic
</TH>

33
</TD>


Tables 2.9-24


<TD Style="BACKGROUND-COLOR:AQUA">
40
</TD>

<TD Style="BACKGROUND-COLOR:PINK"
Valign = TOP Rowspan="2">
N/A
</TD>
</TR>
Shyar
</TH>

<TD Colspan="4" Style="BACKGROUND-
COLOR:YELLOW">
ABSENT
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

1. Name the attribute which is used to merge the adjacent column cell in the source code
D9_4.html.
2. Identify the attribute which is used to merge the adjacent row cell in the source code
D9_4.html.
3. Locate the attribute which is used to set vertical alignment of the cell Average in the
source code D9_+4.html.
4. Name the attribute which is used to change the background colour of the cell in the
source code D9_4.html.

2. Change the vertical alignment top to N/A cell.
3. Change the background colour of the ABSENT cell to Yellow.

Lab Exercise 12:
Open States.html that you have created under the folder in your name in C: Change the table
heading font size to 35 and apply the font-weight to bold. Increase the font size to 18 and apply
the text style to bold. Change the background colour for state column to green, main city
column to orange and display the output as shown in the following figure.

Tables 2.9-25


Figure 2.9.10: A Web page containing a Table

Match the attributes of the <TABLE> tag with its function:
1. Align - Specifies the space between the edge of a cell and
the text contained in it.
2. Cellpadding - Aligns the table in the browser window.
3. Cellspacing - Specifies an image to the background of the table.
4. Background - Specifies the space between the consecutive cells.

Activity 2.9.2

1. Create a Web page that explains the attributes involved in formatting a
table.
2. Save the HTML file as Activity2.html.

Tables 2.9-26


Figure 2.9.11: A Web page explaining the Table

Technical Terminologies
Table - Information displayed in the form of rows and columns is known
as Table.

Summary
In this unit, you learnt that
A simple table can be created using three tags namely <TABLE>,
<TR> and <TD>.
The <TH> tag is used to display the headings in a table.
The <CAPTION> tag is used to add a caption to a table.
Two or more cells can be joined together using Rowspan and
Colspan attributes of the <TH> and <TD> tags.
The height of the cells in a row can be set using the Height attribute
of the <TH> or <TD> tag.
The Cellspacing attribute of the <TABLE> tag specifies the space
between the cells in a table in pixels.
The Background attribute of the <TH> tag or <TD> tag can be used
to set an image as a background for a cell in a table.
The table can be aligned to the left, centre or right in the browser
window using the Align attribute of the <TABLE> tag.

Tables 2.9-27


Assignment

I. Answer the following questions:
1. Name the tags used to create a simple table.
2. Write how will you add a caption to a table.
3. Give the use of Cellpadding and Cellspacing attributes.
4. Name the tag and attribute used to set an image as the background of a
cell.
5. Write how will you set an image as the background of a cell.

Tables 2.9-28


Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Images

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Tables
C1 C2 C3 C4 C5

Comment

Competency codes:

C1 = Add a table to a Web page.
C2 = Add a heading, caption and border to a table.
C3 = Merge the cells of a row and a column of a table.
C4 = Apply Cellspacing and cellpadding to your table.
C5 = Add an image as a background of a cell in a table.
C6 = Add an image as a background of a Web page.
C7 = Align the table to the centre of the Web page.

Tables 2.9-29

Unit 2.9 Tables

More Related Content

What's hot (8)

Viewers also liked (20)

Similar to Unit 2.9 Tables (20)

More from Intan Jameel (20)

Recently uploaded (20)

Unit 2.9 Tables