Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

M02 un09 p01

438 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

M02 un09 p01

  1. 1. Unit 9 – Tables Presentation 1 Web Programming
  2. 2. Revision <ul><li>Write how to add music to a Web page. </li></ul><ul><li>Name the attributes of the <EMBED> tag. </li></ul><ul><li>Write how to add movie to a Web page. </li></ul><ul><li>Write how to add animation to a Web page. </li></ul>
  3. 3. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Insert tables into your Web page </li></ul><ul><li>Add caption, heading and border to your table </li></ul><ul><li>Modify the rows and columns as per the need </li></ul>
  4. 4. Tables <ul><li>Tables can be added to Web page. </li></ul><ul><li>HTML provides tags to add tables into a Web page easily. </li></ul>
  5. 5. Hands-On! <ul><li>Open the HTML file Table.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to insert table in a Webpage. </li></ul>
  6. 6. Creating Table <ul><li>Table can be created using three tags. </li></ul><ul><li><TABLE> tag is used to create table. </li></ul><ul><li><TR> tag is used to insert a row in a table. </li></ul><ul><li><TD> tag is used to insert a cell in the row. </li></ul>
  7. 7. Hands-On! <ul><li>Open the HTML file Table1.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to creates a Web page with simple table. </li></ul>
  8. 8. Lab Exercise <ul><li>1. Open D9_1.html in Internet Explorer. </li></ul><ul><ul><li>Name the tag which is used to create the table in source code D9_1.html. </li></ul></ul><ul><ul><li>Identify the tag which is used to display the comment with a table. </li></ul></ul><ul><ul><li>Name the tag which is used to add a row into the table. </li></ul></ul><ul><ul><li>Identify the tag which is used to add a data into the table. </li></ul></ul>
  9. 9. Lab Exercise Contd. <ul><ul><li>e. Locate the attribute which is used to set border for the table. </li></ul></ul><ul><ul><li>f. Name the tag which is used to add a cell header. </li></ul></ul>
  10. 10. Lab Exercise <ul><li>2. Open D9_1.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in the Notepad. </li></ul></ul><ul><ul><li>Change the border size to 5. </li></ul></ul><ul><ul><li>Add one more row into the table. </li></ul></ul><ul><ul><li>Add a data into the new row. </li></ul></ul>
  11. 11. Lab Exercise <ul><li>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. </li></ul>
  12. 12. Lab Exercise Contd.
  13. 13. Heading Tag <ul><li><TH> tag is used to display the heading. </li></ul><ul><li><TH> stands for Table Heading. </li></ul>
  14. 14. Caption and Border <ul><li><CAPTION> tag is used to add a caption to a table. </li></ul><ul><li>Border attribute of <TABLE> tag is used to add borders </li></ul>
  15. 15. Hands-On! <ul><li>Open the HTML file Table2.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to add heading, caption and border to the table. </li></ul>
  16. 16. Lab Exercise <ul><li>4. Open D9_2.html in Internet Explorer. </li></ul><ul><ul><ul><li>List out the attributes are in <TABLE> tag. </li></ul></ul></ul><ul><ul><ul><li>Name the attribute which is used to set the width of the table. </li></ul></ul></ul><ul><ul><ul><li>Locate the attribute which is used to display the text after the table. </li></ul></ul></ul>
  17. 17. Lab Exercise <ul><ul><li>d. Identify the attribute which is used to change the background colour of the table in source code D9_2.html. </li></ul></ul><ul><ul><li>e. Name the attribute which is used to change the border colour of the table in source code D9_2.html. </li></ul></ul>
  18. 18. Lab Exercise <ul><li>5. Open D9_2.html in Internet Explorer. </li></ul><ul><ul><ul><li>View the source code in the Notepad. </li></ul></ul></ul><ul><ul><ul><li>Set the caption attribute alignment to top. </li></ul></ul></ul><ul><ul><ul><li>Change the background colour of the table </li></ul></ul></ul><ul><ul><ul><li>to yellow. </li></ul></ul></ul><ul><ul><ul><li>d. Change the border colour of the table to </li></ul></ul></ul><ul><ul><ul><li>maroon. </li></ul></ul></ul>
  19. 19. Activity 2.9.1 <ul><ul><li>Create a Web page that explains how to add multimedia objects in a Web page as shown in Figure. </li></ul></ul><ul><ul><li>Save the HTML file as Activity1.html in C:HTMLUnit9Activity folder. </li></ul></ul>
  20. 20. Activity 2.9.1 Contd.
  21. 21. Rows and Columns <ul><ul><li>Rowspan and Colspan attribute. </li></ul></ul><ul><ul><li>Rowspan joins two or more cells in a column into a single cell. </li></ul></ul><ul><ul><li>Colspan joins two or more cells in a row into a single cell . </li></ul></ul>
  22. 22. Hands-On! <ul><li>Open the HTML file Table3.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to adding the heading COUNTRIES that span from second column of fourth column. </li></ul>
  23. 23. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>A simple table can be created using three tags namely <TABLE> , <TR> and <TD> . </li></ul><ul><li>The <TH> tag is used to display the headings in a table. </li></ul><ul><li>The <CAPTION> tag is used to add a caption to a table. </li></ul>
  24. 24. Summary <ul><li>Two or more cells can be joined together using Rowspan and Colspan attributes of the <TH> and <TD> tags. </li></ul><ul><li>The height of the cells in a row can be set using the Height attribute of the <TH> or <TD> tag. </li></ul>
  25. 25. Assignment <ul><li>Name that tags that are used to create a simple table? </li></ul><ul><li>How will you add a caption to a table? </li></ul>

×