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 Sin 0 ½ 1/√2 √3/2 1

Cos 1 √3/2 1/√2 ½ 0

Tan 0 1/√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

The Web page shown in Figure 2.9.2 is displayed in the browser window.

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> LE> </TAB

</CENTER> </BOD</HTML>

Y>

1. Name the tag which is used to creat e the table in source code D9_1.html.

. e.

Lab Exercise 2: Open D9_1.html in Internet Explorer.

le.

Lab Exercise 3: Open States.html that you have created under the folder in your name in C: .

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 table5. Locate the attribute which is used to set border for the tabl6. Name the tag which is used to add a cell header.

1. View the source code in the Notepad. 2. Change the border size to 5. 3. Add one more row into the tab4. Add a data into the new row.

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


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”>

The following example modifies the Web page shown in Figure 2.9.2 by adding heading, caption and border to the table: Open the HTML file Table2.html in Internet Explorer. The modified code in Table2.html file is given below : <HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE Border="10">

Hands-On!

Note

Border added to the Table

<CAPTION> Basic Information About Some Countries </CAPTION>

<TR> Caption added to the Table

<TH>

<TH> Malaysia

<TH> India

<TH> China

</TR>

<TR>

<TH> Continent

<TD> Asia

<TD> Asia

Heading given to the Table using <TH> tag


<TD> Asia

</TR>

Tables 2.9-9


<TR>

<TH> Capital

<TD> Kuala Lumpur

<TD> New Delhi

<TD> Beijing

</TR>

<TR>

<TH> Flag

</TR>

</TABLE>

</BODY>

</HTML>


Figure 2.9.3: A Table with Heading, Caption and Border

Lab Exercise



Lab Exercise 4: Open D9_2.html in Internet Explorer. The following code will be present in D9_2.html.

<HTML>

Tables 2.9-10


<HEAD>

<TITLE> TEMPERATURE ANALYSIS</TITLE>

</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.

Lab Exercise 5: Open D9_2.html in Internet Explorer. 1. View the source code in the Notepad. 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


The following example modifies the Web page shown in Figure 2.9.3 by adding the heading COUNTRIES that spans from second column to fourth column. The Height and Width of the rows and columns are also modified. Open the HTML file Table3.html in Internet Explorer. The modified code in Table3.html file is given below : <TR> <TH> <TH Colspan="3"> COUNTRIES </TR>


Hands-On!

Columns merged using Colspan attribute

<TR>

<TH>


Width and Height of a cell are modified

<TH Width="12%"> India

<TH Width="12%"> China

</TR>

<TR>

<TH Width="12%" Height="68"> Continent

<TD> Asia

Width of the cells is modified

Width and Height of a cell are modified

<TD> Asia

<TD> Asia

</TR>

<TR>

<TH Height="68"> Capital

<TD> Kuala Lumpur Height of the cells is modified<TD> New Delhi

<TD> Beijing

</TR>

<TR>

<TH Height="68"> Flag Height of the 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


The following example modifies the Web page shown in Figure 2.9.4 by adding the Cellspacing and Cellpadding attributes to the <TABLE> tag. Open the HTML file Table4.html in Internet Explorer. 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>


Hands-On!

Cell spacing and cell padding are modified

<TR>

<TH>

<TH> Malaysia

<TH> India

<TH> China

</TR>


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.

The following example modifies the Web page shown in Figure 2.9.5 by adding background images to the cells and the table. Open the HTML file Table5.html in Internet Explorer. The modified segment of the code in Table5.html file is given below: <TABLE Border="10" Cellspacing="3" Cellpadding="10" Width="480" Background="Picture1.jpg">

<TR> <TH> <TH Colspan="3"> COUNTRIES </TR>


Hands-On!

Background picture added to the table

<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>

<TH Height="68"> Flag

<TD Background="Mal_Flag.gif">

Background picture added to cells

<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!

The following example modifies the Web page shown in Figure 2.9.6 by changing the alignment and style of the text.

Tables 2.9-19


Open the HTML file Table6.html in Internet Explorer. The modified segment of the code in Table6.html file is given below: <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 Lab Exercise 6: Open D9_3.html in Internet Explorer. The following code will be present in D9_3.html. <HTML> <HEAD>

<TITLE> TEMPERATURE ANALYSIS</TITLE> </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> 32</TD> <TD Align=RIGHT>24 </TD>

</TR> <TR>

<TD>KELANTAN</TD> <TD Align=RIGHT> 33</TD> <TD Align=RIGHT>17 </TD>

</TR> <TR>

<TD>MELAKA</TD> <TD Align=RIGHT> 32</TD> <TD Align=RIGHT>24 </TD>

</TR> <TR>

<TD>PENANG </TD> <TD Align=RIGHT> 32</TD> <TD Align=RIGHT>21 </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


Lab Exercise 7: Open D9_3.html in Internet Explorer. 1. View the source code in the Notepad. 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

Lab Exercise 10: Open D9_4.html in Internet Explorer. The following code will be present in 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> <TR Style = "TEXT-ALIGN:CENTER;FONT-WEIGHT:BOLD;"> <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:AQUA">79</TD> <TD Style="BACKGROUND-COLOR:RED">90</TD> <TD Style="BACKGROUND-COLOR:PINK">I</TD> </TR> <TR Style = "TEXT-ALIGN:CENTER;FONT-WEIGHT:BOLD;"> <TH Style="BACKGROUND-COLOR:FUCHSIA">

Susan </TH>

<TD Style="BACKGROUND-COLOR:GOLDENROD"> 68

</TD>

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

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

<TD Style="BACKGROUND-COLOR:RED">69</TD> <TD Style="BACKGROUND-COLOR:PINK">III</TD> </TR> <TR Style = "TEXT-ALIGN:CENTER;FONT-WEIGHT:BOLD;"> <TH Style="BACKGROUND-COLOR:FUCHSIA">

Rafic </TH>

<TD Style="BACKGROUND-COLOR:GOLDENROD">

33 </TD>

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

Tables 2.9-24


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

40 </TD>

<TD Style="BACKGROUND-COLOR:RED">45</TD>

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

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

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.

Lab Exercise 11: Open D9_4.html in Internet Explorer.

1. View the source code in the Notepad. 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

Technology

Unit 2.9 Tables