NCERT Textbook - Tables, Information & Computer Technology Class 10 Class 10 Notes | EduRev

Information & Computer Technology (Class 10) - Notes & Video

Class 10 : NCERT Textbook - Tables, Information & Computer Technology Class 10 Class 10 Notes | EduRev

 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
Offer running on EduRev: Apply code STAYHOME200 to get INR 200 off on our premium plan EduRev Infinity!

Related Searches

Objective type Questions

,

Sample Paper

,

study material

,

shortcuts and tricks

,

Information & Computer Technology Class 10 Class 10 Notes | EduRev

,

MCQs

,

pdf

,

NCERT Textbook - Tables

,

Exam

,

Information & Computer Technology Class 10 Class 10 Notes | EduRev

,

mock tests for examination

,

Summary

,

Important questions

,

Previous Year Questions with Solutions

,

Viva Questions

,

ppt

,

Semester Notes

,

Free

,

practice quizzes

,

video lectures

,

Extra Questions

,

Information & Computer Technology Class 10 Class 10 Notes | EduRev

,

NCERT Textbook - Tables

,

past year papers

,

NCERT Textbook - Tables

;