• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
M02 un09 p02
 

M02 un09 p02

on

  • 472 views

 

Statistics

Views

Total Views
472
Views on SlideShare
472
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    M02 un09 p02 M02 un09 p02 Presentation Transcript

    • 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.
        • Name the attribute which is used to set the background image of the table.
        • Identify the attribute which is used to change the text colour of the table element.
        • Locate the attribute which is used to make text to centre alignment.
    • Lab Exercise
      • Open D9_3.html in Internet.
        • View the source code in the Notepad.
        • Change the background picture as Climate1.jpg.
        • Change the text colour to blue.
        • 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
      • Write a program to display the output in the following figure.
    • Lab Exercise
      • 10. Open D9_4.html in Internet.
        • Name the attribute which is used to merge the adjacent column cell in the source code D9_4.html?
        • Identify the attribute which is used to merge the adjacent row cell in the source code D9_4.html?
        • Locate the attribute which is used to set vertical alignment of the cell Average in the source code D9_4.html?
        • 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.
          • View the source code in the Notepad.
          • Change the vertical alignment top to N/A cell.
          • Change the background colour of the ABSENT cell to Yellow.
    • Lab Exercise
      • 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:HTMLUnit9Activity 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
      • What is the use of Cellpadding and Cellspacing attributes?
      • How will you set an image as the background of a cell?