Download, print and study this document offline |
Page 1 39 Tables Chapter 3 Tables Learning Objectives By the end of this chapter, learner will be able to: • Describes the v arious uses of the T ABLE t ag and its sub elemen ts in HTML. • R ec ogniz e the diff er en t a ttribut es of each t ag f or each of the T ABLE elemen ts. • Use the T ABLE and its sub elemen ts t o cr ea t e w eb la y out. • Giv en a design use appr opria t e t ab s fr om the T ABLE gr oup. • Use Fr ames in the HTML pag e t o divide the br o w ser in t o diff er en t sections. • Displa y da t a in a t abular f orm using t able t ag. IntroduCtIon The data on the webpage can be represented in tabular form. In HTML the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns. The basic syntax of table tag along with the attributes is given as under: The TABLE Element (<TABLE >) represents data in two or more dimensions. <body> <TABLE border =“number” align= “left/right/center” width= “number%” bgcolor= “NameOfColor” background= “addressOfTheFile” bordercolor= “#hexadecimalNumberOfColour”> <TR> <TD> text 1</TD> <TD> text 2</TD> </TR> </TABLE> </body> Page 2 39 Tables Chapter 3 Tables Learning Objectives By the end of this chapter, learner will be able to: • Describes the v arious uses of the T ABLE t ag and its sub elemen ts in HTML. • R ec ogniz e the diff er en t a ttribut es of each t ag f or each of the T ABLE elemen ts. • Use the T ABLE and its sub elemen ts t o cr ea t e w eb la y out. • Giv en a design use appr opria t e t ab s fr om the T ABLE gr oup. • Use Fr ames in the HTML pag e t o divide the br o w ser in t o diff er en t sections. • Displa y da t a in a t abular f orm using t able t ag. IntroduCtIon The data on the webpage can be represented in tabular form. In HTML the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns. The basic syntax of table tag along with the attributes is given as under: The TABLE Element (<TABLE >) represents data in two or more dimensions. <body> <TABLE border =“number” align= “left/right/center” width= “number%” bgcolor= “NameOfColor” background= “addressOfTheFile” bordercolor= “#hexadecimalNumberOfColour”> <TR> <TD> text 1</TD> <TD> text 2</TD> </TR> </TABLE> </body> 40 Information and Computer Technology 1. StruCture of <t aBle> taG The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag. 1.1. the attributes of table tag are discussed below one by one 1.1.1. Border This attribute is used to insert the lines on four sides of the table. The inside lines shows the rows and columns of the table and the outside lines displays the dimensions of the table. This attribute takes the value as a number starting from 1 to any number. The value one displays one pixel line on inside and outside of the table. However, the value larger than one only thickens the outer lines (giving a 3D effect) leaving the inside lines to one pixel point. When this attribute is omitted, neither inside nor outside lines are visible. Let us take the 3 cases one by one: Case 1.1: The border attribute takes the value one, results in both inside and outside border. In the above code, the attribute “border” takes the value as one. This displays both the inside and outside border of one point. The table row is formed using <TR> tag and the <TD> tag helps in inserting the text – “thin bordered cell” in the cells of the rows and columns of the table. The code produces the output in figure 1. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 1> <TR> <TD> thin bordered cell 1</TD> <TD> thin bordered cell 2</TD> </TR> <TR> Page 3 39 Tables Chapter 3 Tables Learning Objectives By the end of this chapter, learner will be able to: • Describes the v arious uses of the T ABLE t ag and its sub elemen ts in HTML. • R ec ogniz e the diff er en t a ttribut es of each t ag f or each of the T ABLE elemen ts. • Use the T ABLE and its sub elemen ts t o cr ea t e w eb la y out. • Giv en a design use appr opria t e t ab s fr om the T ABLE gr oup. • Use Fr ames in the HTML pag e t o divide the br o w ser in t o diff er en t sections. • Displa y da t a in a t abular f orm using t able t ag. IntroduCtIon The data on the webpage can be represented in tabular form. In HTML the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns. The basic syntax of table tag along with the attributes is given as under: The TABLE Element (<TABLE >) represents data in two or more dimensions. <body> <TABLE border =“number” align= “left/right/center” width= “number%” bgcolor= “NameOfColor” background= “addressOfTheFile” bordercolor= “#hexadecimalNumberOfColour”> <TR> <TD> text 1</TD> <TD> text 2</TD> </TR> </TABLE> </body> 40 Information and Computer Technology 1. StruCture of <t aBle> taG The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag. 1.1. the attributes of table tag are discussed below one by one 1.1.1. Border This attribute is used to insert the lines on four sides of the table. The inside lines shows the rows and columns of the table and the outside lines displays the dimensions of the table. This attribute takes the value as a number starting from 1 to any number. The value one displays one pixel line on inside and outside of the table. However, the value larger than one only thickens the outer lines (giving a 3D effect) leaving the inside lines to one pixel point. When this attribute is omitted, neither inside nor outside lines are visible. Let us take the 3 cases one by one: Case 1.1: The border attribute takes the value one, results in both inside and outside border. In the above code, the attribute “border” takes the value as one. This displays both the inside and outside border of one point. The table row is formed using <TR> tag and the <TD> tag helps in inserting the text – “thin bordered cell” in the cells of the rows and columns of the table. The code produces the output in figure 1. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 1> <TR> <TD> thin bordered cell 1</TD> <TD> thin bordered cell 2</TD> </TR> <TR> 41 Tables <TD> thin bordered cell 3</TD> <TD> thin bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> Output produced by the above HTML code: Figure 1 File Edit View Favorites Tools Help C:\Users\HP\Music thin bordered cell 1 thin bordered cell 3 thin bordered cell 2 thin bordered cell 4 Case 1.2: If the value is taken to be as high as 40, the outer border width changes. The table tag uses the border attribute with the value 40. This increases the length and the height of the entire table. The outside border thickens, giving the table a 3D effect. The <TR> tag defines the rows of the table and the <TD> tag is used to insert “thick bordered cell” in each of the cells of the two rows as shown in the output figure 2. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 40> <TR> <TD> thick bordered cell 1</TD> <TD> thick bordered cell 2</TD> </TR> <TR> <TD> thick bordered cell 3</TD> <TD> thick bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> Page 4 39 Tables Chapter 3 Tables Learning Objectives By the end of this chapter, learner will be able to: • Describes the v arious uses of the T ABLE t ag and its sub elemen ts in HTML. • R ec ogniz e the diff er en t a ttribut es of each t ag f or each of the T ABLE elemen ts. • Use the T ABLE and its sub elemen ts t o cr ea t e w eb la y out. • Giv en a design use appr opria t e t ab s fr om the T ABLE gr oup. • Use Fr ames in the HTML pag e t o divide the br o w ser in t o diff er en t sections. • Displa y da t a in a t abular f orm using t able t ag. IntroduCtIon The data on the webpage can be represented in tabular form. In HTML the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns. The basic syntax of table tag along with the attributes is given as under: The TABLE Element (<TABLE >) represents data in two or more dimensions. <body> <TABLE border =“number” align= “left/right/center” width= “number%” bgcolor= “NameOfColor” background= “addressOfTheFile” bordercolor= “#hexadecimalNumberOfColour”> <TR> <TD> text 1</TD> <TD> text 2</TD> </TR> </TABLE> </body> 40 Information and Computer Technology 1. StruCture of <t aBle> taG The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag. 1.1. the attributes of table tag are discussed below one by one 1.1.1. Border This attribute is used to insert the lines on four sides of the table. The inside lines shows the rows and columns of the table and the outside lines displays the dimensions of the table. This attribute takes the value as a number starting from 1 to any number. The value one displays one pixel line on inside and outside of the table. However, the value larger than one only thickens the outer lines (giving a 3D effect) leaving the inside lines to one pixel point. When this attribute is omitted, neither inside nor outside lines are visible. Let us take the 3 cases one by one: Case 1.1: The border attribute takes the value one, results in both inside and outside border. In the above code, the attribute “border” takes the value as one. This displays both the inside and outside border of one point. The table row is formed using <TR> tag and the <TD> tag helps in inserting the text – “thin bordered cell” in the cells of the rows and columns of the table. The code produces the output in figure 1. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 1> <TR> <TD> thin bordered cell 1</TD> <TD> thin bordered cell 2</TD> </TR> <TR> 41 Tables <TD> thin bordered cell 3</TD> <TD> thin bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> Output produced by the above HTML code: Figure 1 File Edit View Favorites Tools Help C:\Users\HP\Music thin bordered cell 1 thin bordered cell 3 thin bordered cell 2 thin bordered cell 4 Case 1.2: If the value is taken to be as high as 40, the outer border width changes. The table tag uses the border attribute with the value 40. This increases the length and the height of the entire table. The outside border thickens, giving the table a 3D effect. The <TR> tag defines the rows of the table and the <TD> tag is used to insert “thick bordered cell” in each of the cells of the two rows as shown in the output figure 2. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 40> <TR> <TD> thick bordered cell 1</TD> <TD> thick bordered cell 2</TD> </TR> <TR> <TD> thick bordered cell 3</TD> <TD> thick bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> 42 Information and Computer Technology Output produced by the above HTML code: Figure 2 File Edit View Favorites Tools Help C:\Users\HP\Music C:\Users\HP\Music\D thick bordered cell 1 thick bordered cell 3 thick bordered cell 2 thick bordered cell 4 Case 1.3: If the border attribute is omitted: The output from the above code is shown in figure 3. The table is shown without the inside and outside border. Also, note in the output that the data in the first row is bolder than that in the second row. This is due to the use of <TH> element in the first row and <TD> in the second row. The <TH> tag is meant to prepare the header of the table. Since the text of header is bolder than the rest of the text, it makes the text bold but keeps the font size similar to the rest of the text. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE > <TR> <TH> no border cell 1</TH> <TH> no border cell 2</TH> </TR> <TR> <TD> no border cell 3</TD> <TD> no border cell 4</TD> </TR> </TABLE> </BODY> </HTML> The output from the above code is shown in figure 3. The table is shown without the inside and outside border. Also, note in the output that the data in the first row is bolder Page 5 39 Tables Chapter 3 Tables Learning Objectives By the end of this chapter, learner will be able to: • Describes the v arious uses of the T ABLE t ag and its sub elemen ts in HTML. • R ec ogniz e the diff er en t a ttribut es of each t ag f or each of the T ABLE elemen ts. • Use the T ABLE and its sub elemen ts t o cr ea t e w eb la y out. • Giv en a design use appr opria t e t ab s fr om the T ABLE gr oup. • Use Fr ames in the HTML pag e t o divide the br o w ser in t o diff er en t sections. • Displa y da t a in a t abular f orm using t able t ag. IntroduCtIon The data on the webpage can be represented in tabular form. In HTML the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns. The basic syntax of table tag along with the attributes is given as under: The TABLE Element (<TABLE >) represents data in two or more dimensions. <body> <TABLE border =“number” align= “left/right/center” width= “number%” bgcolor= “NameOfColor” background= “addressOfTheFile” bordercolor= “#hexadecimalNumberOfColour”> <TR> <TD> text 1</TD> <TD> text 2</TD> </TR> </TABLE> </body> 40 Information and Computer Technology 1. StruCture of <t aBle> taG The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag. 1.1. the attributes of table tag are discussed below one by one 1.1.1. Border This attribute is used to insert the lines on four sides of the table. The inside lines shows the rows and columns of the table and the outside lines displays the dimensions of the table. This attribute takes the value as a number starting from 1 to any number. The value one displays one pixel line on inside and outside of the table. However, the value larger than one only thickens the outer lines (giving a 3D effect) leaving the inside lines to one pixel point. When this attribute is omitted, neither inside nor outside lines are visible. Let us take the 3 cases one by one: Case 1.1: The border attribute takes the value one, results in both inside and outside border. In the above code, the attribute “border” takes the value as one. This displays both the inside and outside border of one point. The table row is formed using <TR> tag and the <TD> tag helps in inserting the text – “thin bordered cell” in the cells of the rows and columns of the table. The code produces the output in figure 1. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 1> <TR> <TD> thin bordered cell 1</TD> <TD> thin bordered cell 2</TD> </TR> <TR> 41 Tables <TD> thin bordered cell 3</TD> <TD> thin bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> Output produced by the above HTML code: Figure 1 File Edit View Favorites Tools Help C:\Users\HP\Music thin bordered cell 1 thin bordered cell 3 thin bordered cell 2 thin bordered cell 4 Case 1.2: If the value is taken to be as high as 40, the outer border width changes. The table tag uses the border attribute with the value 40. This increases the length and the height of the entire table. The outside border thickens, giving the table a 3D effect. The <TR> tag defines the rows of the table and the <TD> tag is used to insert “thick bordered cell” in each of the cells of the two rows as shown in the output figure 2. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE border = 40> <TR> <TD> thick bordered cell 1</TD> <TD> thick bordered cell 2</TD> </TR> <TR> <TD> thick bordered cell 3</TD> <TD> thick bordered cell 4</TD> </TR> </TABLE> </BODY> </HTML> 42 Information and Computer Technology Output produced by the above HTML code: Figure 2 File Edit View Favorites Tools Help C:\Users\HP\Music C:\Users\HP\Music\D thick bordered cell 1 thick bordered cell 3 thick bordered cell 2 thick bordered cell 4 Case 1.3: If the border attribute is omitted: The output from the above code is shown in figure 3. The table is shown without the inside and outside border. Also, note in the output that the data in the first row is bolder than that in the second row. This is due to the use of <TH> element in the first row and <TD> in the second row. The <TH> tag is meant to prepare the header of the table. Since the text of header is bolder than the rest of the text, it makes the text bold but keeps the font size similar to the rest of the text. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE > <TR> <TH> no border cell 1</TH> <TH> no border cell 2</TH> </TR> <TR> <TD> no border cell 3</TD> <TD> no border cell 4</TD> </TR> </TABLE> </BODY> </HTML> The output from the above code is shown in figure 3. The table is shown without the inside and outside border. Also, note in the output that the data in the first row is bolder 43 Tables than that in the second row. This is due to the use of <TH> element in the first row and <TD> in the second row. The <TH> tag is meant to prepare the header of the table. Since the text of header is bolder than the rest of the text, it makes the text bold but keeps the font size similar to the rest of the text. Output produced by the above HTML code: Figure 3 File Edit View Favorites Tools Help C:\Users\HP\Music no border cell 1 no border cell 2 no border cell 3 no border cell 4 1.1.2. align The align attribute helps in placing the table on the webpage. If you want to place it in the center of the webpage, use the “center” value, for right side use “right” and for the left side of the web page, the value “left” . If you omit this attribute in the <TABLE > tag, the table will be placed at its default position which is usually “left” . Case 2.1: The following code assigns the value “center” to the align attribute. <HMTL> <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE Border = 1 Align=”Center”> <TR> <TD> center aligned1</TD> <TD> center aligned2</TD> </TR> <TR> <TD> center aligned3</TD> <TD> center aligned4</TD> </TR> </TABLE> </BODY> </HTML>Read More
6 videos|20 docs|6 tests
|
1. What is the importance of tables in Information & Computer Technology? |
2. How are tables created in Information & Computer Technology? |
3. What are the different types of tables used in Information & Computer Technology? |
4. How can tables be used to analyze and interpret data in Information & Computer Technology? |
5. What are some common challenges faced while working with tables in Information & Computer Technology? |
6 videos|20 docs|6 tests
|
|
Explore Courses for Class 10 exam
|