Courses

# NCERT Textbook - Tables, Information & Computer Technology Class 10 Notes | Study Information & Computer Technology (Class 10) - Notes & Video - Class 10

## Class 10: NCERT Textbook - Tables, Information & Computer Technology Class 10 Notes | Study Information & Computer Technology (Class 10) - Notes & Video - Class 10

The document NCERT Textbook - Tables, Information & Computer Technology Class 10 Notes | Study Information & Computer Technology (Class 10) - Notes & Video - Class 10 is a part of the Class 10 Course Information & Computer Technology (Class 10) - Notes & Video.
All you need of Class 10 at this link: Class 10
``` 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”
<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”
<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>
<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”
<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>
<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>
<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”
<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>
<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>
<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>
<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”
<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>
<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>
<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>
<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>
<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>
```
 Use Code STAYHOME200 and get INR 200 additional OFF Use Coupon Code

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

1 videos|20 docs|6 tests

### Top Courses for Class 10

Track your progress, build streaks, highlight & save important lessons and more!

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

;