M02 un09 p02

Unit 9 – Tables

Presentation 2

Web Programming

Objectives

At the end of this presentation, you will be able to• 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

Cellspacing and Cellpadding

• Cellspacing and Cellpadding are attribute of the <TABLE>.

• Cellspacing specifies the space between the cells in a table in pixels.

• Cellpadding specifies the space between the edge of a cell and text contained in it.

Hands-On!

• Open the HTML file Table4.HTML in IE.• This HTML document illustrates how to add

the Cellspacing and Cellpadding attributes to the <TABLE> tag.

Cell Background

• An image can be set as a background of a cell in a table.

• Background attribute used to set an image as a background for a cell in a table.

Hands-On!

• Open the HTML file Table5.HTML in IE.• This HTML document illustrates how to add

background images to the cell.

Some More Attributes

• Align attribute Used to align the table

• Style attribute Used to set the font colour and font size

Hands-On!

• Open the HTML file Table6.HTML in IE.• This HTML document illustrates how to

modify the alignment and style of the text.

Lab Exercise

6. Open D9_3.html in Internet Explorer.

a. Name the attribute which is used to set the background image of the table.

b. Identify the attribute which is used to change the text colour of the table element.

c. Locate the attribute which is used to make text to centre alignment.

Lab Exercise

7. Open D9_3.html in Internet. a. View the source code in the Notepad. b. Change the background picture as Climate1.jpg. c. Change the text colour to blue.d. Change the text alignment of MAX TEMP and MIN

TEMP to right.

Lab Exercise

8. Open States.html in Notepad. 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.

Lab Exercise

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

Lab Exercise

10. Open D9_4.html in Internet.

a. Name the attribute which is used to merge the adjacent column cell in the source code D9_4.html?

b. Identify the attribute which is used to merge the adjacent row cell in the source code D9_4.html?

c. Locate the attribute which is used to set vertical alignment of the cell Average in the source code D9_4.html?

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

a. View the source code in the Notepad.

b. Change the vertical alignment top to N/A cell.

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

Lab Exercise Contd.

Activity 2.9.2

• Create a Web page that explains the attributes involved in formatting a table.

• Save the HTML file as Activity2.html in C:\HTML\Unit9\Activity folder.

Summary

In this presentation, you learnt the following:• 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.

Assignment

1. What is the use of Cellpadding and Cellspacing attributes?

2. How will you set an image as the background of a cell?