Chapter 3: Tables

Class: X | Subject: Information and Computer Technology

Key Concepts

HTML Tables, The `<TABLE>` tag arranges data on a web page in rows and columns., A table represents data in two or more dimensions., Rows are defined with `<TR>`, header cells with `<TH>`, and data cells with `<TD>`.

<TH> makes text bold and centre-aligned by default.
<TD> keeps text in regular font and left-aligned by default.
<TH> and <TD> are nested inside <TR>, which is nested inside <TABLE>.

Table Attributes

Attribute	Description	Values
`border`	Adds lines around and inside the table	Number (pixels). Value 1 = thin border on inside and outside. Larger values thicken outer border only (3D effect). Omitted = no border.
`align`	Positions the table on the webpage	`left`, `right`, `center`. Default is `left`.
`width`	Sets the breadth of the table	Number (pixels) or percentage of the webpage width. Omitted = width matches content.
`bordercolor`	Changes the colour of table border lines	Colour name or hex value (e.g., `red`, `#FF0000`). Default is grey.
`bgcolor`	Sets the background colour of the table	Colour name or hex value. Can also be used on `<TH>` or `<TD>` for individual cells.
`background`	Places an image at the background of the table	File path/address of the image. Can also be used on `<TH>` or `<TD>` for individual cells.

TH and TD Attributes

Attribute	Description
`align`	Aligns text inside the cell (left, right, center)
`valign`	Vertically aligns text inside the cell (top, middle, bottom)
`nowrap`	Prevents text from flowing to the next line in the cell
`colspan`	Merges multiple columns into one cell
`rowspan`	Merges multiple rows into one cell
`width`	Sets cell width (pixels or percentage)
`bgcolor`	Sets cell background colour

COLSPAN, Merges columns within a row., Used with `<TH>` or `<TD>`, not with `<TABLE>`., Without colspan, unmatched cells create ghost cells (empty cells that break the layout).

ROWSPAN, Merges rows within a column, creating a sidebar effect., Used with `<TH>` or `<TD>`., Without rowspan, unmatched cells create ghost cells.

CAPTION Tag

<CAPTION> provides a descriptive text for the table., Generally bold and centred relative to the table., Position controlled by align attribute: top (default) or bottom.

HTML Frames, A frame divides the browser screen into separate sub-windows with scroll bars., Used when you want menus on one side and content on the other., Frames use the `<FRAMESET>` element instead of `<BODY>`.

<FRAMESET> is the parent element defining the frame layout.

Note: Frameset and Frame are not supported in HTML5.

FRAMESET Attributes:

Attribute	Description	Values
`rows`	Divides window horizontally	Percentages or `*` (rest of window)
`cols`	Divides window vertically	Percentages or `*` (rest of window)
`border`	Width of outer border	Number
`frameborder`	Border around sub-windows	0 = no border
`framespacing`	Space between frames	Number. 0 = removes grey lines between frames.

FRAME Tag Attributes:

Attribute	Description	Values
`src` (mandatory)	Loads an HTML document into the frame	URL/address of HTML file
`scrolling`	Controls scroll bars	`yes` (always), `auto` (when needed), `no` (never)
`noresize`	Prevents user from resizing the frame	`noresize`
`name`	Assigns a name to the frame	Any name
`target`	Specifies the frame where a linked document should open	Name of the target frame

Navigational Frames, A frame layout where clicking a link in one frame loads content in another frame., Uses the `target` attribute in anchor (`<a>`) tags to specify which frame displays the content., The target value must match the `name` attribute of the destination frame.

Jumping to Sections in Frames, Use anchor names: `<a name="S12"></a>` to define a section., In the frame `src`, use a hash: `src="jump.html#S12"` to jump to that section.

Important Definitions

Term	Definition
TABLE	HTML element that arranges data in rows and columns
TR	Table Row; defines a row within a table
TH	Table Header; makes content bold and centre-aligned
TD	Table Data; keeps content in regular font, left-aligned
COLSPAN	Attribute that merges multiple columns into a single cell
ROWSPAN	Attribute that merges multiple rows into a single cell
Ghost Cell	An empty, unmatched cell that appears when colspan/rowspan is not used properly
CAPTION	Tag that provides a descriptive title for a table
FRAMESET	Parent element that defines how to divide a window into frames
FRAME	Element that loads an HTML document into a frame
Navigational Frame	Frame layout where links in one frame control content in another

Code/Syntax Examples

Basic Table Structure

<TABLE border="1" align="center" width="80%" bgcolor="pink" bordercolor="red">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
</TABLE>

COLSPAN Example

<TABLE border="2">
  <TR>
    <TH colspan="2">MERGED ROW</TH>
  </TR>
  <TR>
    <TD>R2</TD>
    <TD>1</TD>
  </TR>
</TABLE>

ROWSPAN Example

<TABLE border="1">
  <TR>
    <TD rowspan="2">MERGED COLUMN</TD>
    <TD>Col2Row1</TD>
  </TR>
  <TR>
    <TD>Col2Row2</TD>
  </TR>
</TABLE>

CAPTION Example

<TABLE border="1">
  <CAPTION align="bottom">Table with caption</CAPTION>
  <TR>
    <TH>coordinates 1, 1</TH>
    <TH>1, 2</TH>
  </TR>
  <TR>
    <TD>2, 1</TD>
    <TD>coordinates 2, 2</TD>
  </TR>
</TABLE>

Background Image in Table

<TABLE border="1" background="c:\yelloww.jpg">
  <TR>
    <TH>lily</TH>
    <TH>rose</TH>
    <TH>lotus</TH>
  </TR>
  <TR>
    <TD>white, yellow</TD>
    <TD>white, yellow</TD>
    <TD>white, pink</TD>
  </TR>
</TABLE>

Basic Frameset (Two Columns)

<html>
<head></head>
<FRAMESET cols="120,*">
  <frame src="menu.html" name="menu">
  <frame src="main.html" name="main">
</FRAMESET>
</html>

T-shaped Frame Layout

<FRAMESET rows="20%,*">
  <frame src="a.html">
  <FRAMESET cols="30%,*">
    <frame src="b.html">
    <frame src="c.html">
  </FRAMESET>
</FRAMESET>

Navigational Frame

<!-- Main frameset file (b.html) -->
<FRAMESET cols="30%,*">
  <frame src="a.html" name="menu">
  <frame src="b.html" name="content">
</FRAMESET>

<!-- Menu file (a.html) -->
<body>
  <a href="http://www.example.com/" target="content">
    <h4>Link Text</h4>
  </a>
</body>

Frame with No Border and No Resize

<FRAMESET cols="120,*" frameborder="0" framespacing="0">
  <frame src="a.html" scrolling="no" noresize>
  <frame src="b.html" scrolling="auto" noresize>
</FRAMESET>

Summary of Tags, Attributes, and Values

#	Description	Tags/Attributes	Notes
1	Define Table	`<TABLE></TABLE>`
2	Table Border	`<TABLE BORDER=?>`	In pixels
3	Desired Width	`<TABLE WIDTH=?>`	In pixels
4	Width Percent	`<TABLE WIDTH="%">`	Percentage of page
5	Table Row	`<TR></TR>`
6	Alignment	`<TR ALIGN=LEFT\|RIGHT\|CENTER>`
7	Table Cell	`<TD></TD>`	Must appear within TR
8	Table Header	`<TH></TH>`	Bold and centred
9	No Linebreaks	`<TH or TD NOWRAP>`
10	Cell Colour	`<TH or TD BGCOLOR="#$$$$$$">`
11	Columns to Span	`<TH or TD COLSPAN=?>`
12	Rows to Span	`<TH or TD ROWSPAN=?>`
13	Table Caption	`<CAPTION></CAPTION>`
14	Caption Alignment	`<CAPTION ALIGN=TOP\|BOTTOM>`	Above or below table

Key Points

The TABLE tag structures data into rows and columns on a webpage.
TH creates bold, centred header cells; TD creates regular, left-aligned data cells.
Border attribute value 1 gives thin borders; larger values create a 3D effect on the outer border only.
COLSPAN merges columns; ROWSPAN merges rows. Both prevent ghost cells.
The   special character creates a non-breaking space (must be lowercase).
CAPTION provides a title for the table, placed at top or bottom.
Frames divide the browser into sub-windows using FRAMESET (replaces BODY).
FRAMESET and FRAME tags are not supported in HTML5.
Navigational frames allow links in one frame to control content in another using the target attribute.
The * symbol in frameset sizing means "the rest of the available space."

Practice Questions

Multiple Choice (selected):

<TR> belongs to which tag?, (a) <Table>
Tag to add a row to a table?, (a) TR
Beginning of a table row?, (c) TR
Border is specified in which tag?, (c) TABLE
Table tags include?, (b) <Table><tr><td>
Align cell contents to right?, (b) <TD align=right>

Short Answer:

What attribute puts caption at the bottom of the table?
Write the code to display a ghost cell.
Name the tag that divides a window into frames.
Differentiate between <TH> and <CAPTION>.
How are <TD> and <TR> different?
What is the purpose of Frames in HTML?
Discuss all frame-related tags and their attributes.

Lab Tasks:

Create a website with a header area and two-column layout using tables.
Create a navigation bar with tables.
Recreate the table layout using frames instead.
Create a student marksheet table with hyperlinked names using colspan/rowspan.

Chapter 3: Tables

Key Concepts

HTML Tables, The `<TABLE>` tag arranges data on a web page in rows and columns., A table represents data in two or more dimensions., Rows are defined with `<TR>`, header cells with `<TH>`, and data cells with `<TD>`.

Table Attributes

TH and TD Attributes

COLSPAN, Merges columns within a row., Used with `<TH>` or `<TD>`, not with `<TABLE>`., Without colspan, unmatched cells create ghost cells (empty cells that break the layout).

ROWSPAN, Merges rows within a column, creating a sidebar effect., Used with `<TH>` or `<TD>`., Without rowspan, unmatched cells create ghost cells.

CAPTION Tag

HTML Frames, A frame divides the browser screen into separate sub-windows with scroll bars., Used when you want menus on one side and content on the other., Frames use the `<FRAMESET>` element instead of `<BODY>`.

Navigational Frames, A frame layout where clicking a link in one frame loads content in another frame., Uses the `target` attribute in anchor (`<a>`) tags to specify which frame displays the content., The target value must match the `name` attribute of the destination frame.

Jumping to Sections in Frames, Use anchor names: `<a name="S12"></a>` to define a section., In the frame `src`, use a hash: `src="jump.html#S12"` to jump to that section.

Important Definitions

Code/Syntax Examples

Basic Table Structure

COLSPAN Example

ROWSPAN Example

CAPTION Example

Background Image in Table

Basic Frameset (Two Columns)

T-shaped Frame Layout

Navigational Frame

Frame with No Border and No Resize

Summary of Tags, Attributes, and Values

Key Points

Practice Questions

Test Your Knowledge

Prefer watching over reading?

Chapter 3: Tables

Key Concepts

HTML Tables, The <TABLE> tag arranges data on a web page in rows and columns., A table represents data in two or more dimensions., Rows are defined with <TR>, header cells with <TH>, and data cells with <TD>.

Table Attributes

TH and TD Attributes

COLSPAN, Merges columns within a row., Used with <TH> or <TD>, not with <TABLE>., Without colspan, unmatched cells create ghost cells (empty cells that break the layout).

ROWSPAN, Merges rows within a column, creating a sidebar effect., Used with <TH> or <TD>., Without rowspan, unmatched cells create ghost cells.

CAPTION Tag

HTML Frames, A frame divides the browser screen into separate sub-windows with scroll bars., Used when you want menus on one side and content on the other., Frames use the <FRAMESET> element instead of <BODY>.

Navigational Frames, A frame layout where clicking a link in one frame loads content in another frame., Uses the target attribute in anchor (<a>) tags to specify which frame displays the content., The target value must match the name attribute of the destination frame.

Jumping to Sections in Frames, Use anchor names: <a name="S12"></a> to define a section., In the frame src, use a hash: src="jump.html#S12" to jump to that section.

Important Definitions

Code/Syntax Examples

Basic Table Structure

COLSPAN Example

ROWSPAN Example

CAPTION Example

Background Image in Table

Basic Frameset (Two Columns)

T-shaped Frame Layout

Navigational Frame

Frame with No Border and No Resize

Summary of Tags, Attributes, and Values

Key Points

Practice Questions

Test Your Knowledge

Prefer watching over reading?

HTML Tables, The `<TABLE>` tag arranges data on a web page in rows and columns., A table represents data in two or more dimensions., Rows are defined with `<TR>`, header cells with `<TH>`, and data cells with `<TD>`.

COLSPAN, Merges columns within a row., Used with `<TH>` or `<TD>`, not with `<TABLE>`., Without colspan, unmatched cells create ghost cells (empty cells that break the layout).

ROWSPAN, Merges rows within a column, creating a sidebar effect., Used with `<TH>` or `<TD>`., Without rowspan, unmatched cells create ghost cells.

HTML Frames, A frame divides the browser screen into separate sub-windows with scroll bars., Used when you want menus on one side and content on the other., Frames use the `<FRAMESET>` element instead of `<BODY>`.

Navigational Frames, A frame layout where clicking a link in one frame loads content in another frame., Uses the `target` attribute in anchor (`<a>`) tags to specify which frame displays the content., The target value must match the `name` attribute of the destination frame.

Jumping to Sections in Frames, Use anchor names: `<a name="S12"></a>` to define a section., In the frame `src`, use a hash: `src="jump.html#S12"` to jump to that section.