Transcript
Unit 9 – Tables
Presentation 1
Web Programming
Revision
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.
Objectives
At the end of this presentation, 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
Tables
• Tables can be added to Web page.• HTML provides tags to add tables into a Web
page easily.
Hands-On!
• Open the HTML file Table.HTML in IE.• This HTML document illustrates how to insert
table in a Webpage.
Creating Table
• Table can be created using three tags.• <TABLE> tag is used to create table.• <TR> tag is used to insert a row in a table.• <TD> tag is used to insert a cell in the row.
Hands-On!
• Open the HTML file Table1.HTML in IE.• This HTML document illustrates how to
creates a Web page with simple table.
Lab Exercise
1. Open D9_1.html in Internet Explorer. a. Name the tag which is used to create the
table in source code D9_1.html.b. Identify the tag which is used to display
the comment with a table.c. Name the tag which is used to add a row
into the table.d. Identify the tag which is used to add a
data into the table.
Lab Exercise Contd.
e. Locate the attribute which is used to set border for the table.
f. Name the tag which is used to add a cell header.
Lab Exercise
2. Open D9_1.html in Internet Explorer.
a. View the source code in the Notepad.
b. Change the border size to 5.
c. Add one more row into the table.
d. 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.
Lab Exercise Contd.
Heading Tag
• <TH> tag is used to display the heading.• <TH> stands for Table Heading.
Caption and Border
• <CAPTION> tag is used to add a caption to a table.
• Border attribute of <TABLE> tag is used to add borders
Hands-On!
• Open the HTML file Table2.HTML in IE.• This HTML document illustrates how to add
heading, caption and border to the table.
Lab Exercise
4. Open D9_2.html in Internet Explorer.
a. List out the attributes are in <TABLE> tag.
b. Name the attribute which is used to set the width of the table.
c. Locate the attribute which is used to display the text after the table.
Lab Exercise
d. Identify the attribute which is used to change the background colour of the table in source code D9_2.html.
e. 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.
a. View the source code in the Notepad.
b. Set the caption attribute alignment to top.
c. Change the background colour of the table
to yellow.
d. Change the border colour of the table to
maroon.
Activity 2.9.1
• Create a Web page that explains how to add multimedia objects in a Web page as shown in Figure.
• Save the HTML file as Activity1.html in C:\HTML\Unit9\Activity folder.
Activity 2.9.1 Contd.
Rows and Columns
• Rowspan and Colspan attribute.• 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.
Hands-On!
• Open the HTML file Table3.HTML in IE.• This HTML document illustrates how to
adding the heading COUNTRIES that span from second column of fourth column.
Summary
In this presentation, you learnt the following:• 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.
Summary
• 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.
Assignment
1. Name that tags that are used to create a simple table?
2. How will you add a caption to a table?
top related