Class 10 Exam  >  Class 10 Notes  >  Information & Computer Technology (Class 10) - Notes & Video  >  NCERT Textbook - Tables, Information & Computer Technology Class 10

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

Download, print and study this document offline
Please wait while the PDF view is loading
 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

Top Courses for Class 10

FAQs on NCERT Textbook - Tables, Information & Computer Technology Class 10 - Information & Computer Technology (Class 10) - Notes & Video

1. What is the importance of tables in Information & Computer Technology?
Ans. Tables play a crucial role in organizing and presenting data in a systematic manner. In Information & Computer Technology, tables help in representing complex data sets, making it easier to analyze and understand the information. They provide a structured format for storing data and allow for efficient data retrieval and manipulation.
2. How are tables created in Information & Computer Technology?
Ans. In Information & Computer Technology, tables can be created using various applications or programming languages. Popular methods include using spreadsheet software like Microsoft Excel or Google Sheets, HTML coding for web development, or using database management systems like MySQL or Microsoft Access. These tools provide different functionalities to create, customize, and work with tables based on specific requirements.
3. What are the different types of tables used in Information & Computer Technology?
Ans. In Information & Computer Technology, there are different types of tables used for specific purposes. Some common types include relational tables, which are used in database management systems to store structured data; pivot tables, which are used for data analysis and summarization; and HTML tables, which are used in web development to structure and display data on webpages. Each type of table serves a unique purpose and has its own set of features and functionalities.
4. How can tables be used to analyze and interpret data in Information & Computer Technology?
Ans. Tables are powerful tools for analyzing and interpreting data in Information & Computer Technology. They allow for the comparison of different data points, identification of trends and patterns, and calculation of summary statistics. By organizing data into rows and columns, tables make it easier to filter, sort, and group data based on specific criteria. Additionally, tables can be used in conjunction with formulas, functions, and data visualization techniques to extract meaningful insights from large datasets.
5. What are some common challenges faced while working with tables in Information & Computer Technology?
Ans. While working with tables in Information & Computer Technology, some common challenges include data inconsistency, data redundancy, and data integrity issues. It is important to ensure that the data entered into tables is accurate, complete, and up-to-date. Moreover, managing large datasets and maintaining table relationships can be challenging, requiring efficient data management techniques and appropriate database design principles. Regular data validation and quality checks are essential to overcome these challenges and ensure reliable and accurate data analysis.
6 videos|20 docs|6 tests
Download as PDF
Explore Courses for Class 10 exam

Top Courses for Class 10

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

video lectures

,

Semester Notes

,

Objective type Questions

,

Summary

,

Sample Paper

,

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

,

MCQs

,

mock tests for examination

,

Viva Questions

,

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

,

Extra Questions

,

Important questions

,

Free

,

Exam

,

NCERT Textbook - Tables

,

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

,

NCERT Textbook - Tables

,

practice quizzes

,

shortcuts and tricks

,

study material

,

Previous Year Questions with Solutions

,

ppt

,

pdf

,

NCERT Textbook - Tables

,

past year papers

;