Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
4 views24 pages

Tables HTML

The document provides an overview of HTML tables, detailing their structure, core tags, and attributes for formatting. It explains how to create tables using tags like <table>, <tr>, <th>, and <td>, as well as attributes such as BORDER, BORDERCOLOR, FRAME, and RULES to control appearance. Additionally, it covers cell spacing and alignment options for tables to enhance presentation.

Uploaded by

mixipor287
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views24 pages

Tables HTML

The document provides an overview of HTML tables, detailing their structure, core tags, and attributes for formatting. It explains how to create tables using tags like <table>, <tr>, <th>, and <td>, as well as attributes such as BORDER, BORDERCOLOR, FRAME, and RULES to control appearance. Additionally, it covers cell spacing and alignment options for tables to enhance presentation.

Uploaded by

mixipor287
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

HTML - II: IMAGES, LINKS AND LABLES

155
4.7Tobles
TheHTML table model allows you to
form fields, other tables, etc. arrange data - text, preformatted text,
- into rows and
columns of cells. inages, li1KS, jorns,
Each table may have an
associated caption (given through the
CAPTION element) that provides a short
purpose. A longer description may alsodescription of the table's Tables are useful for the
be provided (via the general display of tabular
summary attribute) for the benefit of people &data.
Braille-based user agents. using speech or

Table rows may be grouped into a head (header), foot


(footer), and body sections, (via the
THEAD, TFOOT and TBODY elements, respectively). Table cells mav either
information (see the TH element) or "data'" (see the TD element). contain "header"
Cells
rows and columns. To understand table rows, columns and cells, refer to may span multiple
Fig. 4.3.

Table Caption
The PACEians
Monica Carol1ne Gauri S.
Table Rows
Kush Ragin1 Shalu (3 rows )
Warun Sunila Rocky

Table Data
in third row

Fiqure 4.3 HTML table and its elements.

4.7.1 Various Table Tags


HTML lets you create wide variety of tables with only fire core tags :
Table core tags <table> tag which wraps up atable and its elements in HTML
<table> document'sbody
define a table () <tr> tag which defines a table row :
<tr (iii)<th> and <td> tags which defines the table's headers and data cells;
define a table row
<th> and <td>
(iv) <caption> tag which defines title or caption for the table.
define a table's
headers and data
Apart from these core tags, you may use <tbody>, <thead>, <tfoot> tags to
cells
define and control whole sections of tables.
<caption>
define a title or Simple Table Commands
caption
Let us first of all talk about the table shown in Fig. 4.3. Following HTML
code was written in order to produce PACEians table.
156 COMPUTER APPLICATIONS-X

<HTML>
<BODY>
4
<TABLE> <TABLE> starts and ends the entire thing,
<CAPTION>The PACEians«/CAPTION>
<TR>
<CAPTION> and </CAPTION> places a caption over
<TD> Monica </TD> centered.
your table. The caption will be bold and
<TD> Caroline </TD>
<TD> Gauri S. </TD>
3 <TD>s <TR> is used when you want a new Table Row to begin
</TR> Notice that you need to end every table row with
an </TR
for 3 cells
in the row <TR> 4
<TD> Kush </TD>
<TD> Ragini </TD> <TD> denotes Table Data. You put this in front of every
cell.
<TD> Shalu </TD> piece of information you want in a
You need to end every one that you open with an </TD>
</TR>
<TR>
<TD> Varun </TD>
<TD> Sunila </TD>
</TABLE> ends the whole table narkup.
<TD> Rocky </TD>
</TR>
</TABLE>
</BODY>
</HTML> Note
Though the program above
Can you make out something from above code ? It looks has each cell (or TD)
rough, but look again. There are really only four commands command on a new line, the
(TABLE, CAPTION, TR and TD) being used again and again. cells keep going to the right
until you tell the computer
What Is Happening ? that a new roW of cells will
What table commands do is create a series of cells. Each start by using the <TR> or
cell's data is denoted by the <TD> command, i.e., Table's Table Row command.
Data.
Use the <TD> Command to make three cells across, use <TR> to jump to the next row, and so
on until you have nine cells in three rows of three. Nothing to it.
Remember that whatever follows the <TD> command willappear in the cell. And the cells, by
column, willbe of equal size using the largest cellas the model for the others. Biggest wins, in
other words... in life, as in HTML. :)
HTML Table Tags
After getting introduced to tables, let us learn about table tags formally. We shall be
discussing these table tags henceforth:
<TABLE>
<TBODY>

’ <THEAD>
<TFOOT>

<TR>
<TD>
<TH>
HTML II : IMAGES, LINKS AND TABLES 15/
Inorder to demonstrate each
of these comnands. we'll
work with this very simple table
<TABLE BORDER="1"> format:
<TR>

<TD>Cell Datas/TD>
<TD>Cell Datas/TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cel1l Data</TD>
</TR>
</TABLE>

4.7.2 The <TABLE> Taa


The TABLE tag begins the process of building a table. It already carries a long list of attributes,
including BORDER, CELLPADDING, CELLSPACING, WIDTH, ALIGN, FRAME and
RULES. Here we'll look at some of the new HTML 4.0 attributes.
Table's border BORDER attribute

A table's border is specified through BORDER attribute. The BORDER attribute tells the table
how largethe border should be. This is all relative in terms of pixels. Three is larger than two and
two is larger than one, etc. You can try different numbers. I happen to like the look of BORDER-3.
BORDER-0 getsrid of the borders altogether. Notice the following example code.

Example 4,8 To display border ofatable.


<HTML>
Thickness of table border
<BODY>
is specified here.
<TABLE BORDER="3" >
<TR>
The output produced is as shown below
<TD>Cell Data</TD>
<TD>Cell Data</TD>
Mozilla Firefox
</TR> Eile Edit yiew Hi_tory Bookmarks Iools Help
<TR> G
<TD>Cell Datas/TD>
Most Visited Getting Started Latest Headlines
<TD>Cell Data</TD>
</TR> Cell DataCell Data
</TABLE> Cell Data|CellData
</BODY>
</HTML> Done

The output produced by above code is as shown here.


Border's Colour - BORDERCOLOR attribute
As you can make out that BORDERCOLOR attribute is used to specify the color of table's
border. You can use any of the standard colors as given in chapter 5. BORDERCOLOK
attribute is specified for TABLE tag. Consider the following example to understand the
working of BORDERCOLOR.
158 COMPUTER APPLICATIONS X

Example 4.9 To display a table with red border.


<HTML > <BODY>
TABLE BORDER-"1" BORDERCOLOR-"red">
shown below
<TR> The output produced is as
<TD>Cell Data</TD>
<TD>CellData</TD> WMozila Firefox
oobmarks [ock te Notice
</TR> Be Edt Yew Hgtory the
border color is
<TR> CXJ Red as desired
<TD>Cell Data</ TD> by us.
Most Wsted Getting Started Latest Headines
<TD>Cell Data</TD>
Display Image Hef attrbu
/TRY

</TABLES Cel Data CellData


</BODY>
Cel DataCellData
</HTML>
Done

D1splaying select border sides FRAME attribute


This is used along with the BORDER attribute. The FRAME attribute allows you to state
which portions ofthe border will render (display). Here are the values that you can specify tor
FRAME attribute:

above displays top edge only


below displays bottom edge only
Frame attribute of
border displays all four sides (default) Table> is always used:
box displays all four sides (like border) iwith Border attribute.
hsides :The Frame attribute;
displays top and bottom edges
Ihs
; defines position of the :
displays lett edge only border.
rhs displays right edge only
void diplays no border
Vsides displays lett and right edges

Now consider the following program to understand the


working of FRAME attribute.

Eample 4.10 To display select border sides of a table.

cHTML
<BODY>
<IABIF BORDE R- "1" FRAME ="hsides",
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</ TD>
</TR> bottom edges
HIML - II: IMAGES, LINKS AND TABLES 159
<TR>

<TD>Ce1l Data</TD>
<TD>Cell Data</TD>
</TR>
</TABLE>
<p>
<TABLE BORDER="1" FRAME="lhs">
<TR>

<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>

<TD>Cell Data</TD>
<TD>Cell Datas/TD> The output produced is as shown below
</TR>
</TABLE> Mozilla Firefox-OX
Ele Edk yow Hgtory Book
<p>
<TABLE BORDER="1" FRAME="above">
<TR> PMost isited

<TD>Cell Data/TD> Cel Data|Cell Data


Result of FRAME = "hsides" attribute.
<TD>Cell Data</TD> Cell Data |Cell Data
</TR>
<TR> Cell Data Cel Data
Result of FRAME="Ihs" attribute.
<TD>Cell Data</TD> Cell Data Cell Data
<TD>Cell Data</TD>
Cell Data Cell Data
</TR> Result of FRAME="above" attribute.
CellDataCell Data
</TABLE>

</BODY> Dons

</HTML>

Display select inside border RULES attribute

The RULES attribute like FRAME, also works with the BORDER attribute, except RULES
deals with the inside border edges.

all displays all borders


cols displays borders between cells
groups displays borders between all cell groups
hides all interior borders
none

rows displays borders between rows only

Here's what it shall work like.

Example 4.11 To display select inside border of a table.


<HTML>
<BODY>
160 COMPUTER APPLICATIONS-X

<TABLE BORDER-"1" RULES="rows">


<TR>
<TD>Cell Data</TD>
<TD>Cell Data</ TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
</TABLE>
<P>
<TABLE BORDER="1" RULES="cols">
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR> The output produced is as shown below
</TABLE>
Mozilla Firefox
<P>
Elle Edit Vlew Hi_tory Bookmarks
<TABLE BORDER="1" RULES="groups">
C
<TR>
Most Visited Getting Started
<TD>Cell Data</TD>
<TD>Cell Data</TD> Cell Data Cell Data Result of RULES= "rows" attribute.
Cell Data Cell Data
</TR>
<TR> Cell Data Cell Data Result of RULES = "cols" attribute.
<TD>Cell Data/TD> Cell Data Cell Data
<TD>Cell Data</TD> Cell Data Cell Data
</TR> Cell Data Cell Data Result of RULES="groups" attribute.
</TABLE>
</BODY> Done

</HTML>

Controlling Cell Spacing - CELLSPACING &CELLPADDING attributes


Tocontrol the spacing in cells, the CELLSPACING and CELLPADDING attributes can be used.
To understand the working of these attributes, carefully read the following example and
observe itsoutput shown after this example. The explanation for these attributes follows the
example below :

Cxample 4.12 To display use of (ELLSPACING and (ElLPADDING attnbutes.


<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">
<TR>
<TD ALIGN = Center"> Monica </TD>
HTML I|. IMAGES, LINKS AND TABLES 161

<TD ALIGN =center"> Caroline </TD>


<TD ALIGN "center"> Gauri S. </TD>
</TR>
<TR>
<TD ALIGN "center"'> Kush </TD>
<TD ALIGN = "center"> Ragini </TD>
<TD ALIGN ="center"> Shalu </TD>
</TR>
<TR>
<TD ALIGN = "center"> Varun </TD>
<TD ALIGN = "center"> Sunila </TD>
<TD ALIGN = "center"> Rocky </TD>
</TR>
</TABLE>

it is. You are using three


If it looks like all the work is done in the <TABLE> command
BORDER):
Commands to do the work for vou (two following commands with
shown here.
> CELLSPACING (all one word) The output produced by above Example 4.12 is as
gives the amount of space Mozilla Firefox
between cells. I'd keep this File Edit Vyew Hgtory Bookmarks Ioois

kind of small. Large spacing


tends to defeat the purpose. PMost Visited Getting Started
> CELLPADDING (all one

word) gives the amount of


Moica Caroline Gauri S
space (or padding) between Kush Ragii Shalu
the cell border and the cell
contents. Note the cell Varun Sunla, Rocky
border walls tend to fill out.
A higher number fills out Done
this gap is because of
more. Try a few different CELLPADDING
settings. Sometimes bigger is uttribute
better.

Align Table contents ALIGN attribute


To align table, ALIGN attribute of <TABLE> tag may be used. This can have values left, right and
center indicating that the table should be placed flush against the left or right margin of the text
flow, with the text flowing around the table, or in the middle with text flow above and below.
Please note that Align attribute used with table's elements' tag <TR>, <TD>, and <TH> is very
much different from <TABLE> tag's alignment. <TABLE> Align attribute aligns complete
table w.r.t. the text in the browser. To understand this, carefully go through the following
example code.

Example 4.13 To aliqn a table w.I.t. text in browser.


<HTML>
<BODY>
162 COMPUTER APPLICATIONS-X

<P> table according to specified


This example is
trying to align a
table according to specified alignment.
alignment.
trying to align a
This example is according to specified

This example is
trying to align a
table
alignment.
"left">
<TABLE BORDER="3" AL IGN =
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>

<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>

</TABLE>
This example is trying to align atable according to specified alignmens
This example is trying to align a table according to specified alignment.
This example is trying to align a table according to specified alignment.
<TABLE BORDER="3" ALIGN = center?>
<TR>
<TD>Cell Data/TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
</TABLE>
This example is trying to align a table
This example is trying to align a table according to specified alignment.
according to specified
table according to specified alignment.
This example is trying to align a
<TABLE BORDER="3" ALIGN = right"> alignment.
<TR>

<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>

<TD>Cell Data/TD>
<TD>Cell Data</TD>
</TR>
</TABLE>
This example is trying to
This example is trying to align a table
This example is trying to align a table according to specified alignment.
align atable according to specified alignment.
</BODY> according to specified alignment.
</HTML >
HTML - II: IMAGES, LINKS AND TABLES 163

The output produced by above code is as shown below


Mozilla Tirefox
Ele Edit yiew Hi_tory Bookmarks Iools Help

file:/|D:JFIT-XJChap_6/Ex6-17.!

Most Visited Getting Started Latest Headines

This example is trying to ahgn atable accor ding to spectfied algrment This exarple is
trying to align a table according to specifhed alignment. Thus exarnple is tryng to aign a
Result of ALIGN = "left table according to specifed alignment This example is trying to align atable accordng
attribute. See table is left Cell Data lCell Data to specitied alignment Ths example is trying to ahgm a table
aligned wrt text in browser. according to specfied akgnment. Thás exarnple is trying to align a
Cell Data Cel Data able according to specified aligment.
Result of ALIGN ="center Cel Data Cell Data
attribute. See table is center Cell Data CellData
aligned wrt text in browser
align a table according to specified ahgnment. This exanple is
tryng to align atable according to specfied alignment This exarnple is trying to align a
table according to spectfied aignment. This example is trying to ahgn a table according
to specied aligment. Thic evamnle ic fring to akan atable Cell DataCell Data
according to speciied| Result of ALIGN = "right" a Cell Data Cel Data
table according to speattribute. See table is right
aligned wrt text in browser

Done

Specify Table Background -BACKGROUND attribute


ATable's background may be specified with BACKGROUND attribute of <TABLE> tag. (This
attribute is available only in MSIE not in Naigator.) With BACKGROUND, you need to
specify URL of the desired image file you want to make background of. The specified image is
tiled to fill the background of the table.

Example 4.14 To add background to a table.


<HTML>
<BODY>
<TABLE BORDER="3" BACKGROUND = D:\BG3.JPG">
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
The output produced is as shown below
<TD>Cell Data</TD>
<TD>Cell Data</TD> O Mozilla Firefox
</TR> Ele Edit yjew H_tory Bookmarks Ioobs
<TR> Notice the

<TD>Cel1 Data</TD> background


AMost Visted Getting Started image.
<TD>Cell Data</TD>
</TR> Cell DatalCell Data
</TABLE> Cell DataCell Data
</BODY> Cel Data Cel Data
</HTML>
Done
164 COMPUTER APPLICATIONS-X

Specify Table Background Colour BGCOLOR attribute


ATable's background colour may be specified with BGCOLOR attribute of <TABLE> tag.
With BGCOLOR, you need to specify the desired background colour. Refer to table 3.2 in
chapter 3 for various colour codes.

Example 4.15 To add background colour to a table.


<HTML>
<BODY>
<TABLE BORDER="3" BGCOLOR = OLIVE">
<TR>
<TD>Cell Data</TD> The output produced is as shown below
<TD>Cell Data</TD>
</TR>
file://..8.html
<TR>
<TD>Cell Data</TD> ¢l code ICT10_Ch4/ex4
<TD>Cell Data</TD>
</TR> Cell Data Cell Data
</TABLE>
Cell Data Cell Data
</BODY>
</HTML>

Specify Table Height and Width - HEIGHT and WIDTH attributes


You can also specify the table's height and width in terms of <TABLE> Tag
pixels or percentage of browser window as we did in horizontal Type
rules. Container Element
Function
Consider the example code below.
Represents tabular
information

Example 4.16 To specify desired height and width of a table. Attributes


Border, Bordercolor,
<HTML> Frame, Rules,
<BODY> Cellspacing, Cell
<TABLE BORDER="3" HEIGHT =100, WIDTH = 70> padding, Align,
<TR> Background, Bgcolor,
<TD>Cell Data</TD> Height, Width, etc.
<TD>Cell Data</TD> |Contains
</TR> Table element tags
<TR> Used Inside
<TD>Cell Data</TD> <BODY>... </B0DY>
<TD>Cell Data</ TD>
</TR>
</TABLE>
<TABLE BORDER="3" HEIGHT = 40%, WIDTH = 6e%>
<TR>
165
HTML I| IMAGES, UNKS AND TABLES

(TD>Cell Data</ TD>


<TD>CelI Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>CellData</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The output produced by above code is as shown below:

OMozilaFiretox - X
Change the
browser window
size and See
Mot Visited the effect on
table with height
Cell Cell Result of HEIGHT=100 and width in
Data Data WIDTH =70 attributes. percentage size
Cell Cell of browser
Data Data window.

Cell Cell
Data Data Result of HEIGHT=40%
Cell Cell WIDTH =60% attributes.
Data Data

Done

Many attributes of TABLE tag are not supported in HTML5.The formatting these attributes
used to do is now done via CSS.

Attribute Description
align Specifies the alignment of a table according to surrounding text
Not supported in HTML5.
bgcolor Specifies the background color for a table
Not supported in HTML5.
border Specifies whether the table cells should have borders or not
Not supported in HTML5.
cellpadding Specifies the space between the cellwall and the cell content
Not supported in HTML5.
cellspacing Specifies the space between cells
Not supported in HTML5.
frame Specifies which parts of the outside borders that should be visible
Nof supported in HTML5.
rules Specifies which parts of the inside borders that should be visible
Not supported in HTML5.
width Specifies the width of a table
Not supported in HTML5.
166 COMPUTER APPUCATIONS X

4.7.3 The <TD> Tag


The TD tag is the workhorse of the table. It denotes Table Data. In the following lines we are
going to explorevarious attributes of <TD> tag. You have seen the way <TD> has been used in
examples above. Hlowever, vou may add many attributes to it to make its functioning more
defined and controlled.

Aligning Table Data ALIGN Attribute


This attribute is used to control the horizontal alignment of the contents of a cell. It can
have values let, right, or center. Default alignment is left. Consider the following example to
understand it.

Cxample 4.17 To display table cells in various alignments.


<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD ALIGN = center">C D</TD>
<TD ALIGN = right">C Dta</TD>
</TR>
<TR> The output produced is as shown below
<TD ALIGN = >C Data</TD>
<TDALIGN = left">C Datas/TD> OMozilla Firefox
</TR> Ele Edit ylew History Bookmarks
<TR>
<TD>Cel1l Data</ TD> AMost Vislted Getting Started
<TD>Cell Data</TD> Center aligned Right aligned
</TR> C D C Dta
[<TDALIGN="center'> | [<TD ALIGN="right'>]
</TABLE> IC Data CData

</BODY> Default alignment : Cell DataCell Data


Left aligned
</HTML> Left aligned Done [<TDALIGN="left'>]

Setting the Cell Width - WIDTH Attribute


The WIDTH attribute of <TD> is used to define the width of a cell either in pixels or in
percentage value of table width. The WIDTHattribute of <TABLE> gives table-width and
WIDTH attribute of <TD> specifies individual cell width. Consider the following example
code.

Example 4.18 To specify individual cell's width.


<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
HTML IMAGES, LINKS AND TABLES 167

<TD WIDTH ="50"> Cell Data</TD>


<TD WIDTH= 25%">Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Ce1l Datas/TD>
</TR>
</TABLE>
</BODY>
</HTML>

Try it yourself on your machines.

Setting the cell's background and background colour -


BACKGROUND and BGCOLOR attributes
The BACKGROUND and BGCOLOR attributes are used in the same way in <TD> as you used
them in <TABLE>. The only difference is that with <TABLE> tag, these attributes affect the
entire table and with <TD> tag these attributes affect asingle cell ie, with <TD> abackground
image (BACKGROUND attribute) or a background colour (BGCOLOR attribute) is applied to
one single cell for which <TD> is using it. Consider the following example and execute it on
your machines to view its output.
Example 4.19 To display background image and backgroud colour for individual cells in table.
<HTML>
<BODY>
<TABLE BORDER="3" >
<TR>
<TD BACKGROUND = D:\BG3.JPG>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cel1Data</TD>
<TD BGCOLOR="pink">Cell Datas/TD>
</TR>
</TABLE>
</BODY>
</HTML>

Theoutput produced by OMozilla Firefox


above code is as File Edit Vew Hi_tory Bookmarks Io
shown here.
Most Visited Getting Started
Cell with background image
<TDBACKGROUND ="D:ABG3.JPG"] Cel Data CellData Cell with background colour
Cel Data Cel Data [<TD BGCOLOR = "pink" > ]

Done
168 COMPUTER APPLICATIONSX

Chonging the Cell Span - ROwSPAN and COLSPAN Atributes


The rowspan and colspan attributes are used to specify the span of a cell.
Consider thefollowing tables :
Table 1 Table 2

Item 1 Item 3 Item 1 Item 2


Item 2
Item 4 Item 5 Item 3 Item 4 Item 5

In this table (Table 1), cell 2 of first row, In this table (Table 2), cell 2 of first row.
has a span of two rOws. has a span of twO columns.

Such type of cells can be created with the help of ROWSPAN and COLSPAN attributes of
<TD> tag.
For Table 1shown above, we shall write the code as :
<TABLE BORDER>
<TR>
<TD>Item 1</TD> <TD ROWSPAN = 2>Item 2</TD> <TD> Item 3 </TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

For Table 2 shown above, we shall write the code as :


<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

Example 4.20 To create a table with cells having different row and column spans.
<HTML>
<BODY>
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2
COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
HTML I|: IMAGES, LINKS AND TABLES 169
<TR>
The output produced is
<TD>3</TD> as shown below
<TD>4</TD>
</TR> Mozilla ...DX
Fde Edt Hew Higtory
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD> Mot Veted
</TR>
12
<TR> B4
</TR> D
</TABLE>
Done
</BODY>
</HTML>
<TD> Tag
Vertical Alignment of Cell Contents VALIGN Attribute
Type
In cells that have span of more than one rows, data can also Container Element
be vertically aligned using VALIGN attribute. The possible Function
values that a VALIGN attribute may take are: top, middle and Defines table data
bottom. Consider the following code:
Attributes
Align, Width,
Cxample 4.21 To vertically align a cell's contents. Background, Bgcolor,
<HTML> Rowspan, Colspan,
<BODY>
Valign etc.
<TABLE BORDER> | Contains
<TR> Table Data
<TD VALIGN=bottom ROWSPAN=2 COLSPAN=2>A</TD> Used Inside
<TD>1</TD> <TABLE>...TABLE>
<TD>2</TD>
</TR>
<TR> The output produced is as shown below
<TD>3</TD> WMozilla Firefox
<TD>4</TD> Ele Edit Vew H_tory Bookmarks Io

</TR>
<TR> AMost Visited Getting Started
</TR> i2
</TABLE>
Notice the bottom alignment
A34 [<TDVALIGN = bottom > ]
</BODY>
</HTML>
Done

All layout attributes of TD tag are removed in HTML5.

Attribute Description
align Aligns the content in a cell Not supported in HTML5
bgcolor Specifies the background color of a cell Not supported in HIML5.
valign Vertical aligns the content in a cell Not suported in ITML5.
width Specifies the width of a cell Not supported in HIML5.
170 COMPUTER APPLICATIONS-X
TH> Tag
4.7.4 The <TH and <TR> Tags
Type
because everything that
we are grouping these two tags together Container Element
is new to them has been covered above.
Function
TH Tag defines table header
header are
It stands for Table Header. The contents declared as Attributes

displayed in a distinctive style e.g.. boldfaced. It will accept the Align, Width,
same attributes as the <TD> command above. Following example Background, Bgcolor,
code uses <TH> to define table headers. Rowspan, Colspan,
Valign etc.
Lxample 4.22 To use table header tag. | Contains
<HTML>
Table Header
<BODY> Used Inside
<TABLE BORDER> <TABLE> <TABLE>
<TR>
<TH>Head1</TH> <TH>Head2</ TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<TR> Tag
And the output produced by above code is as shown below Type
Container Element
Mozilla Firefox
Ele Edit Ylew Migtory Bookmarks Io
Notice the style of table Function
headers here.
Table headers are the Defines table row
contents given in
Most visited Getting Started <TH>...</TH> tags. Attributes
Headl He ad2 Head3 Align, Width,
A Background, Bgcolor,
D F Rowspan, Colspan,
Valign etc.
Done
Contains
Table Row
TR Tag
Used Inside
It stands for Table Row. It also uses similar attributes as
that of TD <TABLE> <TABLE>

except for ROWSPAN and COLSPAN. You have been using it


eince the very first exampleof tables in this chapter. <TR> marks
the beginning of a table row and </TR> marks the end of the table row. In each and every
example shown above <TR>.</TR> have been used. Hence we are not ginB separate
example for <TR> here. However, it is advised to you that you must try variouS attributes ri.
and
ALIGN, VALIGN, BGCOLOR,
BACKGROUND with <TR> to see their impact.
TABLES 171
HTML - il: IMAGES, LINKS AND

A7.5 The <THEAD> Taa


The THEADtag is used to define aset of header rows. This tag is new to HTML 4.0. You can
only have one thead in a table, and the main <THEAD> command must follow the main lable
commarnd. The browser will replicate these heading rows (specified with THEAD tag) when
the table is displayed or printed in multiple sections or pages.
Here's what it looks like.

Example 4.23 To display the usage of THEAD tag.


<HTML>
<BODY>

(TABLE BORDER="1">
<THEAD BGCOLOR="pink">
<TR>
<TD>Cell Data</ TD>
<TD>Cell Data</TD>
</TR> <THEAD> Tag
</THEAD> Type
<TR> Container Element
<TD>Cell Data</ TD> Function
<TD>Cell Data</TD>
defines header
</TR> section of table
</TABLE>
Attributes
</BODY>
</HTML >
Align, Bgcolor.,
Valign etc.
|Contains
If a table is very big and is spanning across pages then the Table Header Rows
rows set by THEAD will be replicated on every page where Used Inside
this table is displayed. Further, you can specify desired <TABLE>... </TABLE>
settings to multiple table header rows through attributes
specified in THEAD tag. In fact, THEAD defines the table
header section that may have multiple rows in it.

Refer to example 4.24 to understand the usage of table sections.

The THEAD tag will handle these attributes just like other tags.
ALIGN
BGCOLOR
VALIGN

4.7.6 The <TFOOT> Tag


The TFOOT tag works like the THEAD command to set aside related cells as table-footer, and,
like the THEAD tag, is only allowed once in a table. TFOOT must follow the THEAD
commands, and must precede the TBODY commands (if any are used). Itbasically acts as a
footer for the Head portion of the Table. As you know that aheader appears in the beginning
172 COMPUTER APPICAIONS X
<TFOOT Tag and a footer appears in the end. Thus the set of rows defined ac
Tvpe
table-tooter by TFOOT will also be replicated on multiple pages and will
Container Element appear at the bottom,
Tuncion
The TFOOTtag supports the following attributes :
defines footer
section of table ALIGN
Artributes BGCOLOR
VALIGN
Align, Bgcolor,
Valign etc.
|COniai ts The TFOT tag defines table footer section that may have multiple rows
Table Footer Rows in it.
U'sed Inside
<TABLE>... TABLE> Refer to example 4.24 to understand the usage of table sections.

4.7.7 The <TBODY> Tag


The tags THEAD, TBODY and TFOOT are used to divide an
HTML Table in sections.
Where THEAD and TFOOT are used to define header and
footer sections, the table
body section is defined using <TBODY>. These sections are
shown and illustrated by different borders. You can Note
use
alignment attributes like ALIGN and VALIGN with All layout attributes of
<TBODY>, You can also specify background image TABLE, TD, TH, TR,
or THEAD, TFOOT tags are
background colour using BACKGROUND and BGCOLOR
attributes that will be applied to all the rows that are part of removed in HTML5. The
table body. formatting and layout
features are now specified
through CSS.
Following example code illustrates the usage of these three
tags.

<TBODY> Tag Example 4.24 To display various table sections using THEAD,
Iype tags.
TBODY& TFOOT
Container Element
Function <HTML )
defines body <BODY>
section of table <TABLE BORDER="1">
Attributes <THEAD BGCOLOR="pink">
<TR>
Align, Width,
Background, Bgolor, <TD>Header rll</TD>
Event handlers etc <TD> Header r12</TD»
Contains </TR>
<TR>
Table data
Used Inside <TD>Header r21</TD>
<TD> Header r22</ TD>
<TABLE>...<TABLE> </TR>
</THEAD>
HTML II: IMAGES, LINKS AND TABLES 173
<TBODY bgcolor="yellow'" >
<TR>
<TD>BODY Cell datal</TD>
<TD> BODY Cell data 2</TD>
</TR>
<TR>
<TD>BODY Cell 3</TD>
<TD> BODY Cell 4</TD>
</TR>
The output produced is as shown below
<TR>
<TD>BODY Cell 5</TD> Mozilla Firefox
File Edt ylew History Bonkmarks Tonk Helo
<TD> BODY Cell 6</TD>
Fle:l/D
</TR>
</TBODY> Most Visited Getting Started Latet Hearines Same settings
applied to table
<TFOOT ALIGN=center bgcolor=cyan> Header rll Header rl2 header rows
<TR> Header r21 Header r22 using
<THEAD> tag.
<TD>Footer Data</TD> BODY Cell datalBODY Cell data 2
<TD>Footer Data</TD> BODY Cell 3 BODY Cel 4

</TR> Same settings BODY Cell 5 BODY Cell 6


applied to table Same settings
</TFOOT>
</TABLE>
body rows
|using
Footer Data Footer Data
} applied to
table footer
<TBODY> tag. rows using
</BODY> <TFOOT>
Done
</HTML> tag.

Images can be inserted in text using <IMG> tag. Its source is specified with sre attribute, alternate Let Us
text with alt attribute, alignment with align attribute and size with height and width attributes. Revise
Internet explorer can display alt text (of an image) as tooltip.
* In browsers other than Internet explorer, titile attribute of image can be used to define tooltip text.
* Documents can be linked i.e., hyperlinks can be created using <A> tag. Linking to another document is
called external linking.
* Hyperlinks can also be created for links within the same document. Linking within the same document is
called internal linking.
* HTML able model allows one to arrange data into rows and columns of cells.
* An HTML table is presented and manipulated with the help of these tags <TABLE>, <TBOY>, <THEAD>,
<TFO0T>, <TR>, <TD>, and <TH>.
* The <TABLE> tag begins the process of building atable. It may use attributes like, BACKGROUND,
BGCOLOR CELLPADDING, HEIGHT, WIDTH, CELLSPACING, WIDTH, ALIGN, FRAME and RULES.
The <TD> tag is workhorse of the table. It denotes table data. It may use attributes like ALIGN, WIDTH,
BACKGROUND, BGCOLOR, ROWSPAN, COLSPAN, and VALIGN.
* The <TH tag is used to specify Table Header. It accepts the same attributes as that of <TD> tag.
* The <TR- tag is used to specify Table row. It also used similar attributes as that of <TD> except for
ROWSPAN and COLSPAN.
* The <THEAD> tag is used to define aset of header roWs, <TBODY» for defining table body rows and <tFO0
1S used for defining set of footer rowS.
* Table's backqround may be specified with background attribute of «Table> tag and table's
background color may be defined through bgeolor attribute of <Table> tag.
* Summary attribute of <Table> tag lets you denote summary of table's data.
174 COMPUTER
APPLICATIONS X

Assisted Practice
SECTION A: Objective TypeQuestions
1. To jump to new
page, we use 10. The default alignment of images, that are inserted
(a) <IMG> tag (b) <A> tag in Web page, is : [CBSE SP 2021-22, Term I]
(c) <JUMP> tag (d) none of the above (a) Left (6) Right
2. Which of the following is not a (c) Inline with text (d) Middle
valid value for
align attribute of <IMG> ? 11. Border, frame, cellspacing, cellpadding, align
(a) top (b) middle are the attributes of
(c) bottom (d) center (a) <BODY> (b) <IMG>
3. If the image you are loading in the web (c) <TABLE> (d) None of these
not available, then you want a text to page is 12. To create a link yousurround the text or image
appear in
the image place holder, which attribute lets with a(n) tag.
you define this text ? (a) link (b) anchor
(a) src (b) align (c) text (d) alt (c) reference (d) target
4. For linking to another web page, its URL 13. The correct HTML code for inserting an image
is
specified with is : [CBSE SP 2021-22, Term I]|
attribute of <A> tag
(a) href (b) title (a) <img href ="image.gif">
(C) name (d) none of the above (b) <img> image.gif</gif>
5. For internal linking, the section names are (c) <image src = image.gif">
provided by attribute of <A> tag ? (d) <img src = "image.gif" >
(a) href (b) title 14. Which will let text wrap down the side of the
(c) name (d) none of the above image?
6
attribute is used to specify the location (a) <img src="mylmage.gif" align="wrap'>
of an image file. [CBSE SP 2021-22, Term I| (b) <img src='mylmage.gif" align="right'>
(a) alt (b) src (c) <img src="mylmage.gif" wrap="on'>
(c) align (d) name 15. Consider the following
7. The code:
attribute of <img> tag specifies an <img src
alternate text for an image, if the image cannot ="Computers.jpg" width =" "height =" ">
be displayed due to any reason. Fill in the blanks to set the image
size to be
(a) alt (b) alternate 250 pixels wide and 400 pixels tall.
(c) tooltip (d) text
(a) 250, 400 (b) 400, 250
(c) <250><400> (d) <400X250>
[CBSE SP 2021-22, Term I|
8. The default alignment of images, that are [CBSE SP 2021-22, Term I)
inserted in the web page, is 16. The correct HTML code
to display (P+Q) is:
(a) left (b) right (a) <sUB> (P+) 2</SUB>
(c) middle (d) inline with text (b) P+Q <SUP> 2 </SUP>
9. While creating a Web document, which unit is (c) (P + Q) <SUP> 2 </SUP>
used to express an image's heightand width ? (d) <sUP> (P+Q) 2</SUP>
(a) Centimetres (b) Pixels [CBSE SP 2021-22, Term I]
17. The <
(c) Dots per inch (d) Inches > tag displays text in subscript
[CBSE SP 2021-22, Term ! form. |CBSE SP 2021-22, Term I]
(a) sub (b) sup (c) sups (d) subs
HTML II: IMAGES, LINKS AND TABLES 175

cell is
18. The tag that starts a table (c) These attributes constrain the image's
(a) <table> (b) <tc> proportions.
(c) <td> (d) <tr> (d) Specifying these dimensions helps a
browser render pages faster.
19. What tag is used to add columns to tables 2
28. Which one of the following HTML tags is
(a) <colspan> (b) <td> (c) <tr> surrounded by <a><la> container tags to create
20. Which has higher priority,cell settings or table an image link ?
settings ? (d) <pic
(a) <img> (b) <ul> (c) <br>
(a) Neither (b) Cell settings 29. What is the general syntax for inline image ?
(c) Table settings (a) <src = img> (b) <src= image>
21. Choose the correct HTML to left-align the (c) <img = file> (d) <img src = file>
content inside a table cell
(e) <image src = file>,
(a) <td valign="left" 30. To create a link to an anchor, you use
(b) <tdleft> (c) <td align="left'> the property in A tag.
(d) <td leftalign> (a) Name (b) Tag (c) Link (d) Href
22. Which of these tags are all <table>tags ? 31. Which of the following is used to specify the
(a) <thead><body><tr> (b) <table>xtrxtd> beginning of a table's row ?
(c) <table><head><tfoot> (d) <table><tr><tt> (a) TROW (b) TABLER
(c) TR (d) ROW
23. Settings for columns(<td> tag) have higher
priority than settings for rows(<tr> tag) 32. In order to add border to a table, BORDER
(a) Sometimes true, sometimes not attribute is specified in which tag ?
(a) THEAD (b) TABLE
(b) True (c) False
(c) TBORDER (d) none of these
24. Which property tells how many rows a cell
should span ? 33. Which of the following is an attribute of
<Table> tag ? [CBSE SP 2011, Term II]
(a) colspan=n (a) SRC (b) LINK
(b) Both rowspan=n and colspan=n (c) CELLPADDING (d) BOLD
(c) rowspan=n 34. What is the correct syntax in HTML for creating
25. What is required to create a reference to a alink on a webpage ? [CBSE SP 11, Term II)
remote site that is different from creating a (a) <LINK SRC = "abc.html">
local link ?
(b) <BODY LINK = "abc.html">
(a) The remote attribute (b) A link title (c) <A SRC = "abc.html">
(c) The Web address of the remote site
(d) <A HREF = "abc.html">
(d) An extra <a> tag 35. Choose the correct HTML code to create an
26. Which one of the following is the list type that email link ?
will create a bulleted list?
(a) <A HREF = "[email protected]"></A>
(a) unordered (b) option (b) <A HREF = "mailto:[email protected]"></A>
(c) decorated (d) ordered (c) <MAIL ="[email protected]"></MAIL>
27. Why is it important to specify an image width (d) <A MAILHREF = "[email protected]">x/A>
and height in an <img> tag ? [CBSE Sample Paper 2011, Term II|
(a) It ensures that a user will not be able to 36. attribute is used with <A> tag to specify
copy the image to their computer. the URL of link. [CBSE SP 2011, Term I|

(6) The image will not render if these ALT attribute of


37. No value is specified with
attributes are left out.
<IMG> tag. (T/F) (CBSE SP 2011, Term |
176 COMPUTER APPLICATIONS-X

38. ROWSPAN attribute with <TABLE> tag is used 40. Align and Valign are the attributes used
to merge more than one cell row wise. (T/E) with <TD> tag to set the alignment of data in a
|CBSE Sample Paper 2011, Term II| table. (T/E) (CBSE Sample Paper 2011, Term I|
39, Target attribute with <A> tag is used to open a 41. BORDER is an attribute of <A> tag. (T/F)
link in a new window. (T/F) (CBSE SP 2011, 1| |CBSE Sample Paper 2011, Term I

SECTION B:Theoretical Questions


1. The following code intends to centralize the image Ans. The above
mypic.gif in browser window : code will ignore UMozilla Firefox
Fle Edt iew Htory Bockmarks Took Heto
<IMG src = "mypic.gif" align = center> frame attribute
GH
lhowever, the desired result is not coming. Can you since it does not
AMost Visted Getting Stayted Latest Heaies
specify a valid
point out the reason for it and a solution for it ?
Ans. The image is getting loaded with the above
value and display Cell DatalCel Data
a table with Cell Data Cell Data
given code but is not centralized because, center 1s
complete border as
not a valid alignment for images. Done
shown in adjacent
To centralize an image, we may give :
Fig.
<CENTER>
4. Whatfor are rowspan and colspan attributes used ?
<IMG src = "mypic.gif">
</CENTER>
Ans. Sometimes, a table cell is bigger than other.
Its span is spread to more rows or columns. Such
2. Your best friend Ananya e-mails you and tells you cells can be created with rowspan and colspan. For
that she has created a web page on an Iiternet site instance, following code will produce the table
having URL : shown below it in which cells have differernt span.
<HTML>
Www.children.com/india/~ananya.html
<BODY>
Now you want to create a link to this web page fronn
<TABLE BORDER>
your web page. How will you do this ? <TR>
Ans. In our web page, we will add the following
code : <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<A href = "http://www.children . com/
<TD>2</TD>
india/~ananya .html">
</TR>
My friend Ananya's web page </A>
<TR>
3. What will haypen if tlhe following code is submitted <TD>3</TD>
to a browser ?
<TD>4</TD>
<HTML> </TR>
<BODY> <TR>
<TABLE BORDER=2 FRAME = ANYSIDE"> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C«/TD>
<TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
<TD>Cel1 Data</TD> </TR>
<TD>Cell Data</TD> <TR>
</TR> </TR>
<TR> </TABLE> A
<TD>Cel1 Data</TD> </BODY> 4
<TD>CellData</TD> </HTML> |cD
</TR> And the result produced will be:
</TABLE>
5. What are table sections ? How can tew be created ?
</BODY>
</HTML>
Ans. In an html table, there may be one or more
rows comprising the header rows, they may be
HTML - II: IMAGES, LINKS AND TABLES 177

manyrows focusing the table body and many rows depicting the table footer. If these are to be rendered
in
different manners, table sections can be created. A
table can be dividedinto these sections :
, table header with <THEAD> tag table body with <TBODY> tag
table footer with <TFOOT> tao
k Consider the following HTML statement:
<body bgcolor = "Blue" alink = "red" vlink = "yellow">
In the above statement, what do you mean by 'alink' and 'olink' ? [CBSE Sample Paper 2019-20|
Ans. Alink is for active link while vlink is for visited link. When ahyperlink becomes active, ie., when the
mOuse cursor moves over it, its colour will become as specified in alink attribute. And when a hyperlink is
dlicked, its colour changes to the colour as specified in vlink attribute.
As per above code, active hyperlink will show in red and once visited, it will be of yellow colour.
7. Consider following code :
<html>
<head>

stitle>HTML Table </title>


</head>
<body>
<table border="1">

<tr
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<trxtdrowspan="2">AAA X</td><td>AAA Y</td><td>AAA
Z</td></tr>
<trxtd> BBB Y</td><td>BBB
Z</td></tr>
<tr><td colspan="3">CCCX</td></tr>
</table>

</body>
</html>

From the following four sample tables, identify which one willbe created by above code:
(a) (c)
Column 1 Column 2 Column 3 Column 1 Column 2 Column 3
AAA X AAA Y AAA Z AAA X AAA Y AAA Z
BBB Y BBB Z BBB Y BBB Z
CCC X BBB Y BBB Z CCC X

(b) (d)
Column 1 Column 2 Column 3 Column 1 Column 2 Column 3
AAA X AAA Y AAAZ AAA X AAA Y AAA Z
BBB Y BBB Z
CCC X BBB Y BBB Z CCC X

Ans. Table (d) will be created by above code.


178 COMPUTER APPUCATIONS

7. Write HTML Code to generate the following table


Beta
Gamma Tilde Lambda

Alpha 1 2 3

Zeta Delta Theta


Omega Kappa

Ans.
<HTML>
<HEAD><TITLE> A Table </TITLE>
</HEAD>
<BODY>
<TABLE border=1>

<TH rowspan=5 valign="center" >Alpha</TH><TH colspan=5»Beta</TH></TR>


<TH rowspan=2 valign="center">Gamma </TH><TH colspan=2> Tilde </TH>
<TH colspan=2>Lambda</TH> </TR>
<TH>1</TH><TH>2</TH> <TH>3</TH> <TH> 4 </TH)</TR>
<TH rowspan=2 valign="center">Zetta</TH><TH colspan=-2> Delta </TH>
<TH colspan=2>Theta</ TH> </TR>
<THcolspan=2>Omega</TH><TH colspan=2> Kappa </ TH></TR>
</TABLE>
</BODY >
</HTML>

You might also like