Unit 2.9 Tables

483 views

Published on

Tables

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
483
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 2.9 Tables

  1. 1. Programming and Development Tools Web Programming UNIT 2.9Web ProgrammingTables 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 tableBenchmark standard Create Web pages with tables of various formatsTables 2.9-1
  2. 2. Programming and Development Tools Web ProgrammingLet 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 1 √3 Sin 0 ½ /√2 /2 1 √3 1 Cos 1 /2 /√2 ½ 0 1 Tan 0 /√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
  3. 3. Programming and Development Tools Web Programming<TH><TH Width="12%" Height="75"> Malaysia <TH Width="12%"Height="75"> India <TH Width="12%" Height="75"> China <THWidth="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"><TDBackground="Chi_Flag.gif"><TDBackground="Jap_Flag.gif"><TDBackground="Aus_Flag.gif"><TDBackground="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.1The Web page shown in Figure 2.9.1 is displayed in the browser window.Tables 2.9-3
  4. 4. Programming and Development Tools Web Programming Figure 2.9.1: A Web Page containing a Table2.9.1 Creating Basic TableA 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> taginserts 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
  5. 5. Programming and Development Tools Web ProgrammingThe code in Table1.html file is given below:<HTML><HEAD><TITLE> Table </TITLE></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.2The Web page shown in Figure 2.9.2 is displayed in the browser window.Tables 2.9-5
  6. 6. Programming and Development Tools Web Programming Figure 2.9.2: A Web Page Containing a Simple Table Lab ExerciseLab Exercise 1: Open D9_1.html in Internet Explorer. The following code will be present inD9_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
  7. 7. Programming and Development Tools Web Programming <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> </TABLE> </CENTER></BODY></HTML> 1. Name the tag which is used to create the table in source code D9_1.html. 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 table. 5. Locate the attribute which is used to set border for the table. 6. Name the tag which is used to add a cell header.Lab Exercise 2: Open D9_1.html in Internet Explorer. 1. View the source code in the Notepad. 2. Change the border size to 5. 3. Add one more row into the table. 4. 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.Tables 2.9-7
  8. 8. Programming and Development Tools Web Programming Self-Check Exercise 2.9.1Arrange 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 BorderEach column in a table should be given a heading. The <TH> tag is used todisplay the headings in a table. In Figure 2.9.1, the first row and first columnof the table are created using <TH> tag. TH stands for Table Heading. Thecontent in the cells created using <TH> tag will be slightly bigger and boldthan 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” willdisplay the caption below the table. In Figure 2.9.1, the caption BasicInformation About Some Countries is given using the <CAPTION> tag.Tables 2.9-8
  9. 9. Programming and Development Tools Web Programming NoteThe 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. TheBorder attribute of <TABLE> tag is used to add borders to a table. The valuegiven to the Border attribute specifies the width of the border. The border ofthe table shown in Figure 2.9.1 is added using the following code:<TABLE Border=”10”> Hands-On!The following example modifies the Web page shown in Figure 2.9.2 byadding 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><TITLE> Table </TITLE></HEAD><BODY> Border added to the Table<TABLE Border="10"><CAPTION> Basic Information About Some Countries</CAPTION> Caption added to<TR> the Table<TH><TH> Malaysia Heading given to the Table using<TH> India <TH> tag<TH> China</TR><TR><TH> Continent<TD> Asia Heading given to the Table using<TD> Asia <TH> tag<TD> Asia</TR>Tables 2.9-9
  10. 10. Programming and Development Tools Web Programming<TR><TH> Capital Heading given to<TD> Kuala Lumpur the Table using <TH> tag<TD> New Delhi<TD> Beijing</TR><TR><TH> Flag</TR> Heading given to the Table using</TABLE> <TH> tag</BODY></HTML> Code Sample 2.9.3The Web page shown in Figure 2.9.3 is displayed in the browser window. Figure 2.9.3: A Table with Heading, Caption and Border Lab ExerciseLab Exercise 4: Open D9_2.html in Internet Explorer. The following code will be present in D9_2.html.<HTML>Tables 2.9-10
  11. 11. Programming and Development Tools Web Programming<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
  12. 12. Programming and Development Tools Web Programming <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.11. 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
  13. 13. Programming and Development Tools Web Programming Figure 2.9.4: A Web page explaining the Table2.9.3 Rows and ColumnsTwo or more cells can be joined together using Rowspan and Colspanattributes of the <TH> and <TD> tags. Rowspan joins two or more cells in acolumn into a single cell. Colspan joins two or more cells in a row into a singlecell. In Figure 2.9.1, the first row the cells in the first row of the table are joinedto 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 theWidth attribute of the <TH> or <TD> tag. In Figure 2.9.1, the height of thecells in a row and width of the cells in a column are set using the followingcode:<TH Width="12%" Height="75"> Malaysia NoteThe value for Height and Width attribute can be given in pixels or in percentage of total heightor width of the table.Tables 2.9-13
  14. 14. Programming and Development Tools Web Programming Hands-On!The following example modifies the Web page shown in Figure 2.9.3 byadding the heading COUNTRIES that spans from second column to fourthcolumn. 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 : Columns merged using Colspan<TR> <TH> <TH Colspan="3"> COUNTRIES </TR> attribute<CAPTION> Basic Information About Some Countries</CAPTION><TR> Width and Height<TH> of a cell are modified<TH Width="12%" Height="68"> Malaysia<TH Width="12%"> India Width of the cells<TH Width="12%"> China is modified</TR><TR><TH Width="12%" Height="68"> Continent Width and Height<TD> Asia of a cell are modified<TD> Asia<TD> Asia</TR><TR><TH Height="68"> Capital<TD> Kuala Lumpur Height of the<TD> New Delhi cells is modified<TD> Beijing</TR><TR> Height of the<TH Height="68"> Flag cells is modified</TR> Code Sample 2.9.4The Web page shown in Figure 2.9.3 is displayed in the browser window.Tables 2.9-14
  15. 15. Programming and Development Tools Web Programming Figure 2.9.4: A Table with merged columns Self-Check Exercise 2.9.2Mark 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 N2.9.4 Cell Spacing and Cell PaddingThe Cellspacing attribute of the <TABLE> tag specifies the space between thecells in a table in pixels. The cellpadding attribute <TABLE> tag specifies thespace 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 spacebetween the cell and the text is set to 10 pixels using the following code:<TABLE Cellpadding=”10” Cellspacing=”3”>Tables 2.9-15
  16. 16. Programming and Development Tools Web Programming Hands-On!The following example modifies the Web page shown in Figure 2.9.4 byadding 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> Cell spacing and cell padding are modified<CAPTION> Basic Information About Some Countries</CAPTION><TR><TH><TH> Malaysia<TH> India<TH> China</TR> Code Sample 2.9.5The Web page shown in Figure 2.9.5 is displayed in the browser window. Figure 2.9.4: A Table with proper spacingTables 2.9-16
  17. 17. Programming and Development Tools Web Programming2.9.5 Cell BackgroundAn image can be set as a background of a cell in a table. The Backgroundattribute of the <TH> tag or <TD> tag can be used to set an image as abackground for a cell in a table. The filename of a picture file is assigned tothe Background attribute to display that picture as background of a cell. InFigure 2.9.1, the Malaysian flag is displayed as the background of a cell usingthe following code:<TD Background=”Mal_Flag.gif”>An image can be set as a background of a table. The Background property ofthe <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 displaythat picture as background of a table. In Figure 2.9.1, the Globe is displayedas 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 theBgcolor attribute. For example, <TD Bgcolor=”Green”> will make thebackground of a cell to appear green and <TABLE Bgcolor=”Green”> willmake the background of the table to appear green. Hands-On!The following example modifies the Web page shown in Figure 2.9.5 byadding 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"> Background picture<TR> <TH> <TH Colspan="3"> COUNTRIES </TR> added to the table<CAPTION> Basic Information About Some Countries</CAPTION><TR><TH><TH Width="12%" Height="68"> Malaysia<TH Width="12%"> India<TH Width="12%"> China</TR>Tables 2.9-17
  18. 18. Programming and Development Tools Web Programming<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> Background picture<TH Height="68"> Flag added to cells<TD Background="Mal_Flag.gif"><TD Background="Ind_Flag.gif"><TD Background="Chi_Flag.gif"></TR></TABLE> Code Sample 2.9.6The Web page shown in Figure 2.9.6 is displayed in the browser window.Tables 2.9-18
  19. 19. Programming and Development Tools Web Programming Figure 2.9.6: A Table with Background ImageSome More AttributesAlign AttributeThe table can be aligned to the left, centre or right in the browser windowusing the Align attribute of the <TABLE> tag. In Figure 2.9.1, the table isaligned 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 thealignment of text in a cell. For example, the tag <TD Align=“Right”> willalign the text inside the cell to the right.Style AttributeThe 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 bychanging the alignment and style of the text.Tables 2.9-19
  20. 20. Programming and Development Tools Web ProgrammingOpen 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">The Web page shown in Figure 2.9.7 is displayed in the browser window. Figure 2.9.7: A Web page containing a Table Lab ExerciseLab Exercise 6: Open D9_3.html in Internet Explorer. The following code will be present inD9_3.html.<HTML><HEAD> <TITLE> TEMPERATURE ANALYSIS</TITLE></HEAD>Tables 2.9-20
  21. 21. Programming and Development Tools Web Programming<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
  22. 22. Programming and Development Tools Web ProgrammingLab 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 andtext to green and display the output as shown in the following figure. Figure 2.9.8: States of MalaysiaLab Exercise 9: Write a program to display the output in the following figure.Tables 2.9-22
  23. 23. Programming and Development Tools Web Programming Figure 2.9.9: A Web page containing a Time-TableLab Exercise 10: Open D9_4.html in Internet Explorer. The following code will be present inD9_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">86Tables 2.9-23
  24. 24. Programming and Development Tools Web Programming </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
  25. 25. Programming and Development Tools Web Programming <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 tableheading font size to 35 and apply the font-weight to bold. Increase the font size to 18 and applythe text style to bold. Change the background colour for state column to green, main citycolumn to orange and display the output as shown in the following figure.Tables 2.9-25
  26. 26. Programming and Development Tools Web Programming Figure 2.9.10: A Web page containing a Table Self-Check Exercise 2.9.3Match 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.21. 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
  27. 27. Programming and Development Tools Web Programming Figure 2.9.11: A Web page explaining the Table Technical TerminologiesTable - Information displayed in the form of rows and columns is known as Table.SummaryIn 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
  28. 28. Programming and Development Tools Web ProgrammingAssignment 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
  29. 29. Programming and Development Tools Web ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development ToolsUnit: ImagesPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency. Date Tables C1 C2 C3 C4 C5CommentCompetency 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

×