Chapter 3 of 6
NCERT Solutions
Tables
CBSE · Class 10 · Information and Computer Technology
NCERT Solutions for Tables — CBSE Class 10 Information and Computer Technology.
Interactive on Super Tutor
Studying Tables? Get the full interactive chapter.
Quizzes, flashcards, AI doubt-solver and a step-by-step study plan — built for ncert solutions and more.
1,000+ Class 10 students started this chapter today
25 Questions Solved · 3 Sections
A. Multiple Choice Questions
2______ tag is used to add columns to a table.
(a) definition list
(b) definition list term
(c) definition list description
(d) none of the aboveShow solution
Correct Answer: (d) none of the above
The `<TD>` (Table Data) tag is used to add columns (cells) to a table row. None of the options listed — definition list, definition list term, or definition list description — are related to adding columns to a table. These belong to HTML list tags (`<dl>`, `<dt>`, `<dd>`).
The `<TD>` (Table Data) tag is used to add columns (cells) to a table row. None of the options listed — definition list, definition list term, or definition list description — are related to adding columns to a table. These belong to HTML list tags (`<dl>`, `<dt>`, `<dd>`).
3Which attribute is used to define cell contents to left?
(a) VAlign
(b) Align
(c) GAlign
(d) HAlignShow solution
Correct Answer: (b) Align
The `align` attribute is used to horizontally align the contents of a table cell. To align content to the left, we write: `<td align="left">`. `VAlign` is used for vertical alignment, while `GAlign` and `HAlign` are not valid HTML attributes.
The `align` attribute is used to horizontally align the contents of a table cell. To align content to the left, we write: `<td align="left">`. `VAlign` is used for vertical alignment, while `GAlign` and `HAlign` are not valid HTML attributes.
4Tag to add a row to a table.
(a) TR
(b) TD
(c) TH
(d) TCShow solution
Correct Answer: (a) TR
The `<TR>` (Table Row) tag is used to add a row to a table. `<TD>` adds a data cell, `<TH>` adds a header cell, and `<TC>` is not a valid HTML tag.
The `<TR>` (Table Row) tag is used to add a row to a table. `<TD>` adds a data cell, `<TH>` adds a header cell, and `<TC>` is not a valid HTML tag.
5Which of the following is used to specify the beginning of a table's row?
(a) TROW
(b) TABLER
(c) TR
(d) ROWShow solution
Correct Answer: (c) TR
The `<TR>` tag stands for Table Row and is used to specify the beginning of a row in an HTML table. `TROW`, `TABLER`, and `ROW` are not valid HTML tags.
The `<TR>` tag stands for Table Row and is used to specify the beginning of a row in an HTML table. `TROW`, `TABLER`, and `ROW` are not valid HTML tags.
6In order to add border to a table, BORDER tag is specified in which tag?
(a) THEAD
(b) TBORDER
(c) TABLE
(d) TRShow solution
Correct Answer: (c) TABLE
The `border` attribute is specified inside the `<TABLE>` tag to add a border to the entire table. For example: `<TABLE border="1">`. `THEAD` is used for the table header section, `TBORDER` is not a valid tag, and `TR` defines a row.
The `border` attribute is specified inside the `<TABLE>` tag to add a border to the entire table. For example: `<TABLE border="1">`. `THEAD` is used for the table header section, `TBORDER` is not a valid tag, and `TR` defines a row.
7Which of these tags are called table tags?
(a) <thead><body><tr>
(b) <table><tr><td>Show solution
Correct Answer: (b) `<table>`, `<tr>`, `<td>`
The standard HTML table tags are:
- `<table>` — defines the table
- `<tr>` — defines a table row
- `<td>` — defines a table data cell
Option (a) includes `<body>` which is a structural HTML tag, not a table-specific tag.
The standard HTML table tags are:
- `<table>` — defines the table
- `<tr>` — defines a table row
- `<td>` — defines a table data cell
Option (a) includes `<body>` which is a structural HTML tag, not a table-specific tag.
8____________ tag is used to define the heading of a table.
(a) TABLE
(b) COLUMN
(c) HEADING
(d) TITLEShow solution
Correct Answer: (d) TITLE *(Note: In the context of table cell headings, the correct tag is `<TH>` — Table Header. However, among the given options, none perfectly matches. The `<CAPTION>` tag is used for the table description/heading. If the question refers to a column heading cell, the answer would be `<TH>`.)*
The `<TH>` (Table Header) tag is used to define the heading cells of a table. Text inside `<TH>` is bold and centered by default. `<TABLE>` defines the table, `<COLUMN>` and `<HEADING>` are not standard HTML tags.
The `<TH>` (Table Header) tag is used to define the heading cells of a table. Text inside `<TH>` is bold and centered by default. `<TABLE>` defines the table, `<COLUMN>` and `<HEADING>` are not standard HTML tags.
9Which HTML command is used to align the contents of the cell to right?
(a) <tr align=right->
(b) <td align="right">
(c) <td> align = right
(d) All of the aboveShow solution
Correct Answer: (b) `<td align="right">`
The correct syntax to align the contents of a table cell to the right is `<td align="right">`. Option (a) has incorrect syntax (`right->` is invalid), and option (c) places the attribute outside the tag which is incorrect HTML syntax.
The correct syntax to align the contents of a table cell to the right is `<td align="right">`. Option (a) has incorrect syntax (`right->` is invalid), and option (c) places the attribute outside the tag which is incorrect HTML syntax.
10Which of the following statements is incorrect?
(a) <frame rows="20%, 80%">
(b) <frame cols="40%, 60%">
(c) <frame rows="60%, 60%">
(d) <frame rows="60%, 40%">Show solution
Correct Answer: (c) `<frame rows="60%, 60%">`
The percentages specified in the `rows` or `cols` attribute of a `<frameset>` tag must add up to 100%. In option (c), , which exceeds 100%, making it an incorrect statement. All other options have percentages that correctly sum to 100%.
The percentages specified in the `rows` or `cols` attribute of a `<frameset>` tag must add up to 100%. In option (c), , which exceeds 100%, making it an incorrect statement. All other options have percentages that correctly sum to 100%.
B. Answer the Following Questions
1What attribute will be used on the CAPTION tag to put the table description at the bottom of the table?Show solution
Answer:
The `align` attribute is used with the `<CAPTION>` tag to position the table description.
To place the caption at the bottom of the table, use:
```html
<CAPTION align="bottom">Table Description</CAPTION>
```
By default, the caption appears at the top. Using `align="bottom"` moves it below the table.
The `align` attribute is used with the `<CAPTION>` tag to position the table description.
To place the caption at the bottom of the table, use:
```html
<CAPTION align="bottom">Table Description</CAPTION>
```
By default, the caption appears at the top. Using `align="bottom"` moves it below the table.
2Write the code to display a 'ghost cell'.Show solution
Answer:
A ghost cell (also called an empty cell) is a table cell that appears to have no content but still displays its border. It is created using the non-breaking space character ` `.
Code:
```html
<TABLE border="1">
<TR>
<TD> </TD>
</TR>
</TABLE>
```
Without ` `, some browsers collapse the empty cell and do not show its border. Using ` ` ensures the cell is visible with its border intact.
A ghost cell (also called an empty cell) is a table cell that appears to have no content but still displays its border. It is created using the non-breaking space character ` `.
Code:
```html
<TABLE border="1">
<TR>
<TD> </TD>
</TR>
</TABLE>
```
Without ` `, some browsers collapse the empty cell and do not show its border. Using ` ` ensures the cell is visible with its border intact.
3Name the tag that defines how to divide the window into frames.Show solution
Answer:
The `<FRAMESET>` tag is used to define how the browser window is divided into frames.
It replaces the `<BODY>` tag and uses the `rows` or `cols` attributes to specify the division.
Example:
```html
<FRAMESET cols="30%, 70%">
...
</FRAMESET>
```
The `<FRAMESET>` tag is used to define how the browser window is divided into frames.
It replaces the `<BODY>` tag and uses the `rows` or `cols` attributes to specify the division.
Example:
```html
<FRAMESET cols="30%, 70%">
...
</FRAMESET>
```
4Name the tag that is used to put HTML document into frames.Show solution
Answer:
The `<FRAME>` tag is used to specify an individual HTML document to be loaded into a frame.
It is used inside the `<FRAMESET>` tag with the `src` attribute to specify the file.
Example:
```html
<FRAMESET cols="30%, 70%">
<FRAME src="nav.html">
<FRAME src="content.html">
</FRAMESET>
```
*Note: `<FRAMESET>` and `<FRAME>` are not supported in HTML5.*
The `<FRAME>` tag is used to specify an individual HTML document to be loaded into a frame.
It is used inside the `<FRAMESET>` tag with the `src` attribute to specify the file.
Example:
```html
<FRAMESET cols="30%, 70%">
<FRAME src="nav.html">
<FRAME src="content.html">
</FRAMESET>
```
*Note: `<FRAMESET>` and `<FRAME>` are not supported in HTML5.*
5Where the text is displayed which is specified in the <caption> tag?Show solution
Answer:
The text specified in the `<CAPTION>` tag is displayed above the table by default (at the top, centered).
However, its position can be changed using the `align` attribute:
- `align="top"` — displays caption above the table (default)
- `align="bottom"` — displays caption below the table
- `align="left"` — displays caption to the left
- `align="right"` — displays caption to the right
The text specified in the `<CAPTION>` tag is displayed above the table by default (at the top, centered).
However, its position can be changed using the `align` attribute:
- `align="top"` — displays caption above the table (default)
- `align="bottom"` — displays caption below the table
- `align="left"` — displays caption to the left
- `align="right"` — displays caption to the right
6Which attribute will you use if you do not want frame windows to be resizable?Show solution
Answer:
The `noresize` attribute is used in the `<FRAME>` tag to prevent users from resizing the frame window.
Example:
```html
<FRAME src="nav.html" noresize>
```
By default, users can drag the frame borders to resize them. Adding `noresize` disables this functionality and locks the frame size.
The `noresize` attribute is used in the `<FRAME>` tag to prevent users from resizing the frame window.
Example:
```html
<FRAME src="nav.html" noresize>
```
By default, users can drag the frame borders to resize them. Adding `noresize` disables this functionality and locks the frame size.
7Differentiate between <th> and <caption> tags.Show solution
Answer:
| Feature | `<TH>` Tag | `<CAPTION>` Tag |
|---|---|---|
| Purpose | Defines a header cell within a table row | Defines a title/description for the entire table |
| Position | Inside a `<TR>` row | Immediately after the `<TABLE>` tag, outside rows |
| Display | Text is bold and centered by default | Displayed above the table by default |
| Scope | Applies to a single cell | Applies to the whole table |
| Example | `<TH>Name</TH>` | `<CAPTION>Student List</CAPTION>` |
Example:
```html
<TABLE border="1">
<CAPTION>Student Marks</CAPTION>
<TR>
<TH>Name</TH>
<TH>Marks</TH>
</TR>
</TABLE>
```
| Feature | `<TH>` Tag | `<CAPTION>` Tag |
|---|---|---|
| Purpose | Defines a header cell within a table row | Defines a title/description for the entire table |
| Position | Inside a `<TR>` row | Immediately after the `<TABLE>` tag, outside rows |
| Display | Text is bold and centered by default | Displayed above the table by default |
| Scope | Applies to a single cell | Applies to the whole table |
| Example | `<TH>Name</TH>` | `<CAPTION>Student List</CAPTION>` |
Example:
```html
<TABLE border="1">
<CAPTION>Student Marks</CAPTION>
<TR>
<TH>Name</TH>
<TH>Marks</TH>
</TR>
</TABLE>
```
8How <td> and <tr> are different from each other?Show solution
Answer:
| Feature | `<TR>` Tag | `<TD>` Tag |
|---|---|---|
| Full Form | Table Row | Table Data |
| Purpose | Defines a horizontal row in a table | Defines an individual data cell within a row |
| Contains | One or more `<TD>` or `<TH>` tags | Actual data/content of the cell |
| Nesting | Placed inside `<TABLE>` | Placed inside `<TR>` |
| Example | `<TR>...</TR>` | `<TD>Hello</TD>` |
Example:
```html
<TABLE border="1">
<TR> <!-- defines a row -->
<TD>Cell 1</TD> <!-- defines a cell -->
<TD>Cell 2</TD> <!-- defines another cell -->
</TR>
</TABLE>
```
| Feature | `<TR>` Tag | `<TD>` Tag |
|---|---|---|
| Full Form | Table Row | Table Data |
| Purpose | Defines a horizontal row in a table | Defines an individual data cell within a row |
| Contains | One or more `<TD>` or `<TH>` tags | Actual data/content of the cell |
| Nesting | Placed inside `<TABLE>` | Placed inside `<TR>` |
| Example | `<TR>...</TR>` | `<TD>Hello</TD>` |
Example:
```html
<TABLE border="1">
<TR> <!-- defines a row -->
<TD>Cell 1</TD> <!-- defines a cell -->
<TD>Cell 2</TD> <!-- defines another cell -->
</TR>
</TABLE>
```
9What is the purpose of using Frames in HTML pages?Show solution
Answer:
Frames in HTML are used to divide the browser window into multiple independent sections, each of which can display a different HTML document simultaneously.
Purposes of using Frames:
1. Navigation: A common use is to keep a navigation bar in one frame while the content changes in another frame.
2. Consistent Layout: Parts of the page (like header or menu) remain fixed while other parts scroll.
3. Multiple Documents: Multiple HTML files can be displayed at the same time in a single browser window.
4. Independent Scrolling: Each frame can be scrolled independently.
Example:
```html
<FRAMESET cols="25%, 75%">
<FRAME src="menu.html"> <!-- navigation -->
<FRAME src="main.html"> <!-- content -->
</FRAMESET>
```
*Note: Frames (`<FRAMESET>`, `<FRAME>`) are deprecated and not supported in HTML5.*
Frames in HTML are used to divide the browser window into multiple independent sections, each of which can display a different HTML document simultaneously.
Purposes of using Frames:
1. Navigation: A common use is to keep a navigation bar in one frame while the content changes in another frame.
2. Consistent Layout: Parts of the page (like header or menu) remain fixed while other parts scroll.
3. Multiple Documents: Multiple HTML files can be displayed at the same time in a single browser window.
4. Independent Scrolling: Each frame can be scrolled independently.
Example:
```html
<FRAMESET cols="25%, 75%">
<FRAME src="menu.html"> <!-- navigation -->
<FRAME src="main.html"> <!-- content -->
</FRAMESET>
```
*Note: Frames (`<FRAMESET>`, `<FRAME>`) are deprecated and not supported in HTML5.*
10Discuss all the tags with their attributes to create a frame.Show solution
Answer:
The following tags and attributes are used to create frames in HTML:
---
1. `<FRAMESET>` Tag
Replaces the `<BODY>` tag. Divides the browser window into frames.
| Attribute | Description | Example |
|---|---|---|
| `rows` | Divides window into horizontal frames | `rows="20%,80%"` |
| `cols` | Divides window into vertical frames | `cols="30%,70%"` |
| `border` | Sets border width between frames | `border="5"` |
| `frameborder` | Shows/hides frame border (0 or 1) | `frameborder="0"` |
| `framespacing` | Sets space between frames | `framespacing="10"` |
---
2. `<FRAME>` Tag
Defines an individual frame and the document it displays. It is a self-closing tag.
| Attribute | Description | Example |
|---|---|---|
| `src` | Specifies the URL of the HTML file | `src="page.html"` |
| `name` | Names the frame for targeting links | `name="content"` |
| `scrolling` | Controls scrollbar (yes/no/auto) | `scrolling="no"` |
| `noresize` | Prevents user from resizing the frame | `noresize` |
| `marginwidth` | Sets left/right margin in pixels | `marginwidth="10"` |
| `marginheight` | Sets top/bottom margin in pixels | `marginheight="10"` |
| `frameborder` | Shows/hides border for this frame | `frameborder="1"` |
---
3. `<NOFRAMES>` Tag
Provides alternative content for browsers that do not support frames.
---
Complete Example:
```html
<HTML>
<HEAD><TITLE>Frames Example</TITLE></HEAD>
<FRAMESET cols="30%, 70%" border="2">
<FRAME src="nav.html" name="navframe" scrolling="no" noresize>
<FRAME src="content.html" name="mainframe" scrolling="auto">
<NOFRAMES>
<BODY>Your browser does not support frames.</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
```
*Note: Frames are not supported in HTML5.*
The following tags and attributes are used to create frames in HTML:
---
1. `<FRAMESET>` Tag
Replaces the `<BODY>` tag. Divides the browser window into frames.
| Attribute | Description | Example |
|---|---|---|
| `rows` | Divides window into horizontal frames | `rows="20%,80%"` |
| `cols` | Divides window into vertical frames | `cols="30%,70%"` |
| `border` | Sets border width between frames | `border="5"` |
| `frameborder` | Shows/hides frame border (0 or 1) | `frameborder="0"` |
| `framespacing` | Sets space between frames | `framespacing="10"` |
---
2. `<FRAME>` Tag
Defines an individual frame and the document it displays. It is a self-closing tag.
| Attribute | Description | Example |
|---|---|---|
| `src` | Specifies the URL of the HTML file | `src="page.html"` |
| `name` | Names the frame for targeting links | `name="content"` |
| `scrolling` | Controls scrollbar (yes/no/auto) | `scrolling="no"` |
| `noresize` | Prevents user from resizing the frame | `noresize` |
| `marginwidth` | Sets left/right margin in pixels | `marginwidth="10"` |
| `marginheight` | Sets top/bottom margin in pixels | `marginheight="10"` |
| `frameborder` | Shows/hides border for this frame | `frameborder="1"` |
---
3. `<NOFRAMES>` Tag
Provides alternative content for browsers that do not support frames.
---
Complete Example:
```html
<HTML>
<HEAD><TITLE>Frames Example</TITLE></HEAD>
<FRAMESET cols="30%, 70%" border="2">
<FRAME src="nav.html" name="navframe" scrolling="no" noresize>
<FRAME src="content.html" name="mainframe" scrolling="auto">
<NOFRAMES>
<BODY>Your browser does not support frames.</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
```
*Note: Frames are not supported in HTML5.*
11What does 'n' stand for in the following tags?
(a) <H n>
(b) <FRAMESET rows="n">
(c) <FRAMESET cols="n">
(d) <TD colspan="n">
(e) <TD rowspan="n">Show solution
Answer:
(a) `<H n>`
Here, `n` stands for the heading level number, ranging from 1 to 6.
- `<H1>` is the largest heading and `<H6>` is the smallest.
- Example: `<H1>Main Heading</H1>`, `<H3>Sub Heading</H3>`
---
(b) `<FRAMESET rows="n">`
Here, `n` stands for the height values (in pixels or percentages) that define how the browser window is divided into horizontal rows.
- Example: `<FRAMESET rows="20%, 80%">` divides the window into two horizontal frames.
---
(c) `<FRAMESET cols="n">`
Here, `n` stands for the width values (in pixels or percentages) that define how the browser window is divided into vertical columns.
- Example: `<FRAMESET cols="30%, 70%">` divides the window into two vertical frames.
---
(d) `<TD colspan="n">`
Here, `n` stands for the number of columns the cell should span (merge across).
- Example: `<TD colspan="3">` means the cell will stretch across 3 columns.
---
(e) `<TD rowspan="n">`
Here, `n` stands for the number of rows the cell should span (merge across).
- Example: `<TD rowspan="2">` means the cell will stretch across 2 rows.
(a) `<H n>`
Here, `n` stands for the heading level number, ranging from 1 to 6.
- `<H1>` is the largest heading and `<H6>` is the smallest.
- Example: `<H1>Main Heading</H1>`, `<H3>Sub Heading</H3>`
---
(b) `<FRAMESET rows="n">`
Here, `n` stands for the height values (in pixels or percentages) that define how the browser window is divided into horizontal rows.
- Example: `<FRAMESET rows="20%, 80%">` divides the window into two horizontal frames.
---
(c) `<FRAMESET cols="n">`
Here, `n` stands for the width values (in pixels or percentages) that define how the browser window is divided into vertical columns.
- Example: `<FRAMESET cols="30%, 70%">` divides the window into two vertical frames.
---
(d) `<TD colspan="n">`
Here, `n` stands for the number of columns the cell should span (merge across).
- Example: `<TD colspan="3">` means the cell will stretch across 3 columns.
---
(e) `<TD rowspan="n">`
Here, `n` stands for the number of rows the cell should span (merge across).
- Example: `<TD rowspan="2">` means the cell will stretch across 2 rows.
12Which code snippet will display the following table? Explain why.
Table shows: MERGEDROW spanning top, then R2, R3, R4 in first column and 1, 2, 3 in second column.
Option A and Option B are given.Show solution
Answer:
Option B will display the required table correctly.
Option B Code:
```html
<TABLE border=2>
<TR>
<TH>MERGEDROW</TH>
<TH> </TH>
</TR>
<TR>
<TD>R2</TD>
<TD>1</TD>
</TR>
<TR>
<TD>R3</TD>
<TD>2</TD>
</TR>
<TR>
<TD>R4</TD>
<TD>3</TD>
</TR>
</TABLE>
```
Explanation:
The table to be displayed has:
- A top row with "MERGEDROW" as a header and an empty second header cell
- Three data rows: R2/1, R3/2, R4/3
Why Option B is correct:
- In Option B, the second `<TH>` cell uses ` ` (non-breaking space), which creates a ghost cell — the cell appears empty but its border is still visible, giving the appearance of a merged or blank header cell next to "MERGEDROW".
- This correctly renders the visual layout shown.
Why Option A is incorrect:
- In Option A, the second `<TH>` tag is `<TH></TH>` — completely empty with no content. Some browsers may collapse this cell or not render its border properly, so the display may not match the required output.
- ` ` ensures the cell has content (a non-breaking space) so it renders with a visible border.
Key Concept: Using ` ` inside an empty cell (`<TD> </TD>` or `<TH> </TH>`) ensures the cell is displayed as a proper ghost cell with its border intact.
Option B will display the required table correctly.
Option B Code:
```html
<TABLE border=2>
<TR>
<TH>MERGEDROW</TH>
<TH> </TH>
</TR>
<TR>
<TD>R2</TD>
<TD>1</TD>
</TR>
<TR>
<TD>R3</TD>
<TD>2</TD>
</TR>
<TR>
<TD>R4</TD>
<TD>3</TD>
</TR>
</TABLE>
```
Explanation:
The table to be displayed has:
- A top row with "MERGEDROW" as a header and an empty second header cell
- Three data rows: R2/1, R3/2, R4/3
Why Option B is correct:
- In Option B, the second `<TH>` cell uses ` ` (non-breaking space), which creates a ghost cell — the cell appears empty but its border is still visible, giving the appearance of a merged or blank header cell next to "MERGEDROW".
- This correctly renders the visual layout shown.
Why Option A is incorrect:
- In Option A, the second `<TH>` tag is `<TH></TH>` — completely empty with no content. Some browsers may collapse this cell or not render its border properly, so the display may not match the required output.
- ` ` ensures the cell has content (a non-breaking space) so it renders with a visible border.
Key Concept: Using ` ` inside an empty cell (`<TD> </TD>` or `<TH> </TH>`) ensures the cell is displayed as a proper ghost cell with its border intact.
C. Lab Session
Task 1Create a website with a header area and two columns below to contain the navigation bar on the left and the content bar to the right. The layout uses colour #00FFFF for the header (full width), 30% width with colour #00CCCC for the left column, and 70% width with colour #00EEEE for the right column.Show solution
Answer:
Concept Used: HTML Tables with `bgcolor`, `width`, and `colspan` attributes.
```html
<HTML>
<HEAD>
<TITLE>Task 1 - Website Layout</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<!-- Header Row -->
<TR>
<TD colspan="2" bgcolor="#00FFFF" align="center">
<H2>Website Header</H2>
</TD>
</TR>
<!-- Two Column Row -->
<TR>
<!-- Left Navigation Column: 30% -->
<TD width="30%" bgcolor="#00CCCC" valign="top">
<H3>Navigation Bar</H3>
<P>Link 1</P>
<P>Link 2</P>
<P>Link 3</P>
</TD>
<!-- Right Content Column: 70% -->
<TD width="70%" bgcolor="#00EEEE" valign="top">
<H3>Content Area</H3>
<P>Main content goes here.</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Explanation:
- `colspan="2"` makes the header span both columns.
- `width="30%"` and `width="70%"` set the column widths.
- `bgcolor` sets the background colour of each cell.
- Save this file as `task1.html` inside your project folder.
Concept Used: HTML Tables with `bgcolor`, `width`, and `colspan` attributes.
```html
<HTML>
<HEAD>
<TITLE>Task 1 - Website Layout</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<!-- Header Row -->
<TR>
<TD colspan="2" bgcolor="#00FFFF" align="center">
<H2>Website Header</H2>
</TD>
</TR>
<!-- Two Column Row -->
<TR>
<!-- Left Navigation Column: 30% -->
<TD width="30%" bgcolor="#00CCCC" valign="top">
<H3>Navigation Bar</H3>
<P>Link 1</P>
<P>Link 2</P>
<P>Link 3</P>
</TD>
<!-- Right Content Column: 70% -->
<TD width="70%" bgcolor="#00EEEE" valign="top">
<H3>Content Area</H3>
<P>Main content goes here.</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Explanation:
- `colspan="2"` makes the header span both columns.
- `width="30%"` and `width="70%"` set the column widths.
- `bgcolor` sets the background colour of each cell.
- Save this file as `task1.html` inside your project folder.
Task 2Make the required changes to the original file to create a display with 'My First Web Page' as header, and a left navigation column (30%) with links: Main page, Photographs, History — and a right content column (70%). Save it as task2.html.Show solution
Answer:
```html
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<!-- Header Row -->
<TR>
<TD colspan="2" bgcolor="#00FFFF" align="center">
<H2>My First Web Page</H2>
</TD>
</TR>
<!-- Navigation and Content Row -->
<TR>
<!-- Left Navigation: 30% -->
<TD width="30%" bgcolor="#00CCCC" valign="top">
<P><A href="main.html">Main page</A></P>
<P><A href="photos.html">Photographs</A></P>
<P><A href="history.html">History</A></P>
</TD>
<!-- Right Content: 70% -->
<TD width="70%" bgcolor="#00EEEE" valign="top">
<P>Welcome to my first web page. Content goes here.</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Save as: `task2.html`
Key Changes from Task 1:
- Title and header changed to "My First Web Page"
- Navigation links (Main page, Photographs, History) added using `<A href>` tags in the left column.
```html
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<!-- Header Row -->
<TR>
<TD colspan="2" bgcolor="#00FFFF" align="center">
<H2>My First Web Page</H2>
</TD>
</TR>
<!-- Navigation and Content Row -->
<TR>
<!-- Left Navigation: 30% -->
<TD width="30%" bgcolor="#00CCCC" valign="top">
<P><A href="main.html">Main page</A></P>
<P><A href="photos.html">Photographs</A></P>
<P><A href="history.html">History</A></P>
</TD>
<!-- Right Content: 70% -->
<TD width="70%" bgcolor="#00EEEE" valign="top">
<P>Welcome to my first web page. Content goes here.</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Save as: `task2.html`
Key Changes from Task 1:
- Title and header changed to "My First Web Page"
- Navigation links (Main page, Photographs, History) added using `<A href>` tags in the left column.
Task 3Create the same visual effect as Task 2 but use frames instead. Save the document as task3.html. Note: Frameset and Frame are not supported in HTML5.Show solution
Answer:
To recreate the same layout using frames, we need multiple HTML files.
---
File 1: task3.html (Main frameset file)
```html
<HTML>
<HEAD>
<TITLE>My First Web Page - Frames</TITLE>
</HEAD>
<FRAMESET rows="20%, 80%">
<!-- Header Frame -->
<FRAME src="header.html" name="headerframe" scrolling="no" noresize>
<!-- Bottom two columns -->
<FRAMESET cols="30%, 70%">
<FRAME src="nav.html" name="navframe" scrolling="auto">
<FRAME src="content.html" name="mainframe" scrolling="auto">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Your browser does not support frames. Please upgrade your browser.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
```
---
File 2: header.html
```html
<HTML>
<BODY bgcolor="#00FFFF">
<H2 align="center">My First Web Page</H2>
</BODY>
</HTML>
```
---
File 3: nav.html
```html
<HTML>
<BODY bgcolor="#00CCCC">
<P><A href="main.html" target="mainframe">Main page</A></P>
<P><A href="photos.html" target="mainframe">Photographs</A></P>
<P><A href="history.html" target="mainframe">History</A></P>
</BODY>
</HTML>
```
---
File 4: content.html
```html
<HTML>
<BODY bgcolor="#00EEEE">
<H3>Welcome!</H3>
<P>Main content is displayed here.</P>
</BODY>
</HTML>
```
---
Explanation:
- Nested `<FRAMESET>` tags are used: outer splits into rows (header + body), inner splits body into two columns.
- `target="mainframe"` in navigation links ensures clicked links open in the right content frame.
- `<NOFRAMES>` provides fallback content for unsupported browsers.
- *Note: Frames are deprecated and not supported in HTML5.*
To recreate the same layout using frames, we need multiple HTML files.
---
File 1: task3.html (Main frameset file)
```html
<HTML>
<HEAD>
<TITLE>My First Web Page - Frames</TITLE>
</HEAD>
<FRAMESET rows="20%, 80%">
<!-- Header Frame -->
<FRAME src="header.html" name="headerframe" scrolling="no" noresize>
<!-- Bottom two columns -->
<FRAMESET cols="30%, 70%">
<FRAME src="nav.html" name="navframe" scrolling="auto">
<FRAME src="content.html" name="mainframe" scrolling="auto">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Your browser does not support frames. Please upgrade your browser.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
```
---
File 2: header.html
```html
<HTML>
<BODY bgcolor="#00FFFF">
<H2 align="center">My First Web Page</H2>
</BODY>
</HTML>
```
---
File 3: nav.html
```html
<HTML>
<BODY bgcolor="#00CCCC">
<P><A href="main.html" target="mainframe">Main page</A></P>
<P><A href="photos.html" target="mainframe">Photographs</A></P>
<P><A href="history.html" target="mainframe">History</A></P>
</BODY>
</HTML>
```
---
File 4: content.html
```html
<HTML>
<BODY bgcolor="#00EEEE">
<H3>Welcome!</H3>
<P>Main content is displayed here.</P>
</BODY>
</HTML>
```
---
Explanation:
- Nested `<FRAMESET>` tags are used: outer splits into rows (header + body), inner splits body into two columns.
- `target="mainframe"` in navigation links ensures clicked links open in the right content frame.
- `<NOFRAMES>` provides fallback content for unsupported browsers.
- *Note: Frames are deprecated and not supported in HTML5.*
Task 4Write the coding in HTML to create a Student Marksheet table as shown:
- Title: STUDENT MARKSHEET
- Columns: Roll no., Name, Marks (First Term, Second Term, Third Term)
- Data rows: 1-Arpit Kumar (140,160,175), 2-Nilima Kapoor (190,180,116), 3-Prerna Sharma (130,115,178)
- Hyperlink names: Arpit Kumar→Arpit.ppt, Nilima Kapoor→Nilima.ppt, Prerna Sharma→Prerna.pptShow solution
Answer:
Concept Used: HTML Tables with `rowspan`, `colspan`, `<TH>`, `<TD>`, `<CAPTION>`, and `<A href>` for hyperlinks.
```html
<HTML>
<HEAD>
<TITLE>Student Marksheet</TITLE>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="5" cellspacing="0" align="center">
<!-- Table Caption / Title -->
<CAPTION><B>STUDENT MARKSHEET</B></CAPTION>
<!-- Header Row 1: Roll no., Name, Marks (spanning 3 columns) -->
<TR>
<TH rowspan="2">Roll no.</TH>
<TH rowspan="2">Name</TH>
<TH colspan="3">Marks</TH>
</TR>
<!-- Header Row 2: Term headings under Marks -->
<TR>
<TH>First Term</TH>
<TH>Second Term</TH>
<TH>Third Term</TH>
</TR>
<!-- Data Row 1 -->
<TR>
<TD align="center">1</TD>
<TD><A href="Arpit.ppt">Arpit Kumar</A></TD>
<TD align="center">140</TD>
<TD align="center">160</TD>
<TD align="center">175</TD>
</TR>
<!-- Data Row 2 -->
<TR>
<TD align="center">2</TD>
<TD><A href="Nilima.ppt">Nilima Kapoor</A></TD>
<TD align="center">190</TD>
<TD align="center">180</TD>
<TD align="center">116</TD>
</TR>
<!-- Data Row 3 -->
<TR>
<TD align="center">3</TD>
<TD><A href="Prerna.ppt">Prerna Sharma</A></TD>
<TD align="center">130</TD>
<TD align="center">115</TD>
<TD align="center">178</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Explanation of Key Attributes Used:
| Attribute | Purpose |
|---|---|
| `border="1"` | Adds border to the table and cells |
| `<CAPTION>` | Displays "STUDENT MARKSHEET" as the table title |
| `rowspan="2"` | Makes "Roll no." and "Name" headers span 2 rows |
| `colspan="3"` | Makes "Marks" header span 3 columns (First, Second, Third Term) |
| `<A href="Arpit.ppt">` | Hyperlinks the student name to the respective `.ppt` file |
| `cellpadding="5"` | Adds padding inside each cell for better readability |
Output Structure:
| Roll no. | Name | First Term | Second Term | Third Term |
|---|---|---|---|---|
| 1 | Arpit Kumar | 140 | 160 | 175 |
| 2 | Nilima Kapoor | 190 | 180 | 116 |
| 3 | Prerna Sharma | 130 | 115 | 178 |
Concept Used: HTML Tables with `rowspan`, `colspan`, `<TH>`, `<TD>`, `<CAPTION>`, and `<A href>` for hyperlinks.
```html
<HTML>
<HEAD>
<TITLE>Student Marksheet</TITLE>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="5" cellspacing="0" align="center">
<!-- Table Caption / Title -->
<CAPTION><B>STUDENT MARKSHEET</B></CAPTION>
<!-- Header Row 1: Roll no., Name, Marks (spanning 3 columns) -->
<TR>
<TH rowspan="2">Roll no.</TH>
<TH rowspan="2">Name</TH>
<TH colspan="3">Marks</TH>
</TR>
<!-- Header Row 2: Term headings under Marks -->
<TR>
<TH>First Term</TH>
<TH>Second Term</TH>
<TH>Third Term</TH>
</TR>
<!-- Data Row 1 -->
<TR>
<TD align="center">1</TD>
<TD><A href="Arpit.ppt">Arpit Kumar</A></TD>
<TD align="center">140</TD>
<TD align="center">160</TD>
<TD align="center">175</TD>
</TR>
<!-- Data Row 2 -->
<TR>
<TD align="center">2</TD>
<TD><A href="Nilima.ppt">Nilima Kapoor</A></TD>
<TD align="center">190</TD>
<TD align="center">180</TD>
<TD align="center">116</TD>
</TR>
<!-- Data Row 3 -->
<TR>
<TD align="center">3</TD>
<TD><A href="Prerna.ppt">Prerna Sharma</A></TD>
<TD align="center">130</TD>
<TD align="center">115</TD>
<TD align="center">178</TD>
</TR>
</TABLE>
</BODY>
</HTML>
```
Explanation of Key Attributes Used:
| Attribute | Purpose |
|---|---|
| `border="1"` | Adds border to the table and cells |
| `<CAPTION>` | Displays "STUDENT MARKSHEET" as the table title |
| `rowspan="2"` | Makes "Roll no." and "Name" headers span 2 rows |
| `colspan="3"` | Makes "Marks" header span 3 columns (First, Second, Third Term) |
| `<A href="Arpit.ppt">` | Hyperlinks the student name to the respective `.ppt` file |
| `cellpadding="5"` | Adds padding inside each cell for better readability |
Output Structure:
| Roll no. | Name | First Term | Second Term | Third Term |
|---|---|---|---|---|
| 1 | Arpit Kumar | 140 | 160 | 175 |
| 2 | Nilima Kapoor | 190 | 180 | 116 |
| 3 | Prerna Sharma | 130 | 115 | 178 |
Stuck on a step?
Ask Super Tutor AI to explain any solution on this page in a simpler way — free, 24x7.
Ask a Doubt FreeFrequently Asked Questions
What are the important topics in Tables for CBSE Class 10 Information and Computer Technology?
Tables covers several key topics that are frequently asked in CBSE Class 10 board exams. Focus on the core concepts listed on this page and practise related questions to build confidence.
How to score full marks in Tables — CBSE Class 10 Information and Computer Technology?
Start by understanding all key concepts. Practise previous year questions from this chapter. Revise formulas and definitions regularly. Use flashcards for quick revision before the exam.
Where can I get free NCERT Solutions for Tables Class 10 Information and Computer Technology?
This page has free step-by-step NCERT Solutions for every exercise question in Tables (CBSE Class 10 Information and Computer Technology) — written the way examiners award marks: given, formula, working, answer.
Sources & Official References
- NCERT Official — ncert.nic.in
- CBSE Academic — cbseacademic.nic.in
- CBSE Official — cbse.gov.in
- National Education Policy 2020 — education.gov.in
Content is aligned to the official syllabus. Refer to the board website for the latest curriculum.
More resources for Tables
Important Questions
Practice with board exam-style questions
Syllabus
What topics to cover
Revision Notes
Key points for last-minute revision
Study Plan
Step-by-step plan to ace this chapter
Flashcards
Quick-fire cards for active recall
Formula Sheet
All formulas in one place
Chapter Summary
Understand the chapter at a glance
Practice Quiz
Test yourself with a quick quiz
Concept Maps
See how topics connect visually
For serious students
Get the full Tables chapter — for free.
Quizzes, flashcards, AI doubt-solver and a step-by-step study plan for CBSE Class 10 Information and Computer Technology.