IMAGE MAPPING
AND
HTML TABLES
Image Mapping
• In HTML, it is possible to make one image
link to several pages, depending on where
the image is clicked.
• This technique is called as image mapping.
• Here, we can create clickable areas, means
specify which areas of the image should link
to which destination.
Steps involved in Image Mapping
• Step 1 –
• Select image to use
• Step 2 –
• Define areas of image map
• Step 3 –
• Include map information in HTML
document
• Step 4–
• Connect image with map information
Defining area for image mapping
• <area> tag is used to define area on the
image.
• Three main shapes that can be used for
image mapping are rectangle, circle and
polygon.
• For defining area, we have to specify
coordinates in pixel for the selected shape
Including map information
• <map> tag is used to define an image map.
• Image map is an image with clickable areas.
• So, <map> should be used along with <img>
tag.
• Attribute ‘name’ of <map> tag defines a
unique name for the map tag.
Connecting image with map information
• Attribute ‘usemap’ of <img> tag is used to
create a relationship between the image and
the image map.
• It is used along with <map> and <area> tags.
• The value of usemap attribute starts with # (a
hash tag) followed by the name of the image
map declared using name attribute of a
<map> tag.
Finding Coordinates
Open image to be used in image mapping using
Paint or any other graphics program.
Point to the locations of interest and click to see
X and Y coordinates in the status bar.
The number of coordinates to be used and value
of coordinates totally depends on the shape.
Shape of Clickable Area
The shape of the clickable area must be defined
in the <area> tag.
Possible values are -
rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
Circle
<area shape=“circle” coords=“x, y, r”
href=“url”>
- x : horizontal position of the circle’s
center
- y : vertical position of the circle’s
center
- r : radius of the circle
(x, y and r in pixels)
- url : web address of the target link
Image Mapping for Circle
<html>
<body>
<p>Click on the circle</p>
<img src="Image URL" alt="Shapes"
usemap="#shapemap">
<map name="shapemap">
<area shape="circle" coords="60,50,10"
alt=“Circle” title="Circle"
href=“circle.html">
</map>
</body>
Rectangle
<area shape=“rect” coords=“x1, y1, x2, y2”
href=“url”>
- x1 : horizontal position of one corner of the
rectangle
- y1 : vertical position of one corner of the
rectangle
- x2 : horizontal position of opposite corner of the
rectangle
- y2 : vertical position of opposite corner of the
rectangle
Image Mapping for Rectangle
<html>
<body>
<p>Click on the rectangle</p>
<img src="Image URL" alt="Shapes"
usemap="#shapemap">
<map name="shapemap">
<area shape=“rect" coords=“30,85,60,105"
alt=“Rectangle” title=“Rectangle"
href=“rectangle.html">
</map>
</body>
Polygon
<area shape=“poly” coords=“x1, y1, x2, y2, x3,
y3,…”
href=“url”>
- x1 : horizontal position of a point on edge of
polygon
- y1 : vertical position of a point on edge of
polygon
- x2 : horizontal position of next point on edge
of polygon
- y2 : vertical position of next point on edge of
polygon
Image Mapping for Polygon
<html>
<body>
<p>Click on the polygon</p>
<img src="Image URL" alt="Shapes"
usemap="#shapemap">
<map name="shapemap">
<area shape=“poly"
coords=“60,90,100,90,115,120,100,140,70,140,55,120"
alt=“Polygon” title=“Polygon” href=“polygon.
html">
Image Mapping for Different Shapes
<html>
<body>
<p>Click on the circle or rectangle or polygon</p>
<img src="Image URL" alt="Shapes"
usemap="#shapemap">
<map name="shapemap">
<area shape="circle" coords="60,50,10"
alt=“Circle” title="Circle"
href=“circle.html">
<area shape=“rect" coords=“30,85,60,105"
Image Mapping for Different Shapes
<area shape=“poly"
coords=“60,90,100,90,115,120,100,140,70,140,55,120"
alt=“Polygon” title=“Polygon” href=“polygon.
html">
</map>
</body>
</html>
Tables
• Tables provide a means of organizing the
layout of data.
• A table is divided into rows and columns,
thus forming cells of the table.
• Cells can contain text, images, links or other
tables.
• Tables can also be used for organizing the
layout of webpage itself.
<table> tag
• Tables are defined with the <table> tag.
• Tables are divided into table rows with <tr>
tag.
• Table rows are divided into table data with
<td> tag.
• Table row can also be divided into table
headings with <th> tag.
HTML Structure of a Table
<table> Beginning of Table
<tr>
First <td> … </td>
Row <td> … </td>
</tr>
<tr>
<td> … </td>
Table Cells
<td> … </td>
</tr>
<tr>
<td> … </td>
<td> … </td>
</tr>
End of Table
</table>
General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table> Two columns
Two
Rows
Attributes of a Table
Attribute Value Description
align left Specifies the alignment of a table according to
center the surrounding text.
right
bgcolor colorname Specifies the background color for a table
border number Specifies whether the table cells should have
borders or not
cellpadding pixels Specifies the space between the cell wall and
the cell content
cellspacing pixels Specifies the space between cells
width pixels Specifies the width of a table
Table with ‘border’ attribute
• By default, browsers display the tables
without borders.
• A table border can be added using the border
attribute of the <table>.
• Syntax for adding a table border is -
<table border=“value”>
- value is the width of the border in
pixels
Table with ‘bordercolor’ attribute
• By default, table borders are displayed in two
shades of grey that create a three-
dimensional effect.
• Color of a border can be changed using the
bordercolor attribute of the <table>.
• Syntax for changing default border color is -
<table bordercolor =“color”>
- color is color name
Table with ‘width’ attribute
• The width attribute specifies the width of a
table.
• If the width attribute is not set, a table takes
up the space it needs to display the table data.
• Syntax for setting the width is -
<table width =“value”>
- value can be in pixels or in %
- value in pixels sets the width in pixels
- value in % sets the width in percent of
surrounding element
HTML Table
<table border=“1” bordercolor=“blue” width=“400”>
<tr>
<td> 22030121001 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
<tr>
<td> 22030121002 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
</table>
HTML Table with cellspacing
<table border=“1” cellspacing=“10”>
<tr>
<td> 22030121001 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
<tr>
<td> 22030121002 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
</table>
HTML Table with cellpadding
<table border=“1” cellpadding=“10”>
<tr>
<td> 22030121001 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
<tr>
<td> 22030121002 </td>
<td> BCA</td>
<td> Semester 1</td>
</tr>
</table>
Table Headings
• Table headings are defined with <th> tag.
• This tag will replace <td> tag, which is used
to represent the actual data.
• By default, all major browsers display table
headings as bold and centered.
• Normally, table headings are added as a top
row, otherwise we can use them in any row.
HTML Table with Headings
<table border=“1” width=100%”>
<tr>
<th> PRN </th>
<th> Programme</th>
<th> Batch</th>
</tr>
<tr>
<td> 22030121001 </td>
<td> BCA</td>
<td> 2022-25</td>
</tr>
<tr>
<td> 22030121002 </td>
<td> BCA</td>
<td> 2022-25 </td>
</tr>
</table>
HTML Table with Headings
<table border=“1” width=100%”>
<tr>
<th> PRN </th>
<td> 22030121001 </td>
<td> 22030121002 </td>
</tr>
<tr>
<th> Programme</th>
<td> BCA</td>
<td> BCA</td>
</tr>
<tr>
<th> Batch</th>
<td> 2022-25</td>
<td> 2022-25 </td>
</tr>
</table>
Attributes of <td> and <th>
Attribute Value Description
align left Specifies the alignment of the content in a cell
center
right
justify
bgcolor colorname Specifies the background color of a cell
height pixels Specifies the height of a cell
width pixels Specifies the width of a cell
%
nowrap nowrap Specifies that the contents inside a cell should
not wrap
Attributes of <td> and <th>
Attribute Value Description
valign top Specifies the vertical alignment of the content
middle in a cell
bottom
colspan number Specifies the number of columns a cell should
span
rowspan number Specifies the number of rows a cell should span
<th> colspan attribute
<table border=“1” width=100%”>
<tr>
<th> PRN </th>
<th colspan=“2”> Programme and Batch</th>
</tr>
<tr>
<td> 22030121001</td>
<td> BCA</td>
<td> 2022-25</td>
</tr>
<tr>
<td> 22030121002</td>
<td> BCA</td>
<td> 2022-25 </td>
</tr>
</table>
<th> rowspan attribute
<table border=“1” width=100%”>
<tr>
<th rowspan=“3”> Undergraduate Programme</th>
<th> PRN </th>
<th> Programme</th>
<th> Batch</th>
</tr>
<tr>
<td> 22030121001</td>
<td> BCA</td>
<td> 2022-25</td>
</tr>
<tr>
<td> 22030121002</td>
<td> BCA</td>
<td> 2022-25 </td>
</tr>
<td> colspan attribute
<table border=“1” width=100%”>
<tr>
<th> PRN </th>
<th> Programme</th>
<th> Batch</th>
</tr>
<tr>
<td> 22030121001</td>
<td> BCA</td>
<td> 2022-25</td>
</tr>
<td> colspan attribute
<tr>
<td> 22030121002</td>
<td> BCA</td>
<td> 2022-25 </td>
</tr>
<tr>
<td colspan=“3”>Strength of Division A :
46 </td>
</tr>
</table>
<td> rowspan attribute
<table border=“1” width=100%”>
<tr>
<th> PRN </th>
<th> Programme</th>
<th> Batch</th>
<th> Optional Subject</th>
</tr>
<tr>
<td> 21030121001</td>
<td> BCA</td>
<td> 2021-24</td>
<td rowspan=“2”>Computer Game
Design</td>
<td> rowspan attribute
<tr>
<td> 21030121002</td>
<td> BCA</td>
<td> 2021-24 </td>
</tr>
</table>
Table Caption
• Caption for a table can be added using
<caption> tag.
• The <caption> tag must be inserted
immediately after the <table> tag.
• Syntax for creating caption is -
<caption align=“value”>
Caption Text
</caption>
Attributes of <caption>
Attribute Value Description
align left Defines the alignment of the caption
right
top
bottom
Table with Caption
<html>
<body>
<table border = "1" width = "40%" >
<caption>
<strong>Strength of BCA(All Batches)</strong>
</caption>
<tr>
<th>Batch</th>
<th>Division</th>
<th>Strength</th>
</tr>
<tr>
<td>2021-24</td>
<td>A</td>
<td>52</td>
</tr>
Table with Caption
<tr>
<td>2021-24</td>
<td>B</td>
<td>48</td>
</tr>
<tr>
<td>2022-25</td>
<td>A</td>
<td>55</td>
</tr>
<tr>
<td>2022-25</td>
<td>B</td>
<td>56</td>
</tr>
</table>
</body>
</html>
Table inside a Table
<html>
<body>
<table border=“15” bordercolor = “red”>
<tr>
<td>
<table border=“15” bordercolor = “green”>
<tr>
<td>
<table border=“15” bordercolor =
“yellow”>
<tr>
<td>
<table border=“15” bordercolor =
“blue”>
<tr>
<td>Tables inside a Table
Table inside a Table
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Adding Paragraph, Image, Link and
List inside a Table
<html>
<body>
<table border=“2”>
<tr>
<td>
<p>
This table contain Image , link, List and
Paragraph tags </p>
</td>
<td>
<img src=“Image URL” width=“50”
height=“50”>
</td>
</tr>
Adding Paragraph, Image, Link and
List inside a Table
<tr>
<td>
<ul>
<li>HTML</li>
<li> CSS</li>
<li> PHP</li>
</ul>
</td>
<td>
<a href=“aboutus.html” > AboutUs</a>
</td>
</tr>
</table>
</body>
</html>
