Scribd
Upload
16 views46 pages

ImageMapping and Tables

Uploaded by

shreyaxchauhan
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
16 views46 pages

ImageMapping and Tables

Uploaded by

shreyaxchauhan
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/ 46

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>

You might also like