Lecture 7 - Images and Tables

HTML Images and Tables
Dr. Fareed Ahmed Jokhio

HTML Images
• Images are very important to beautify as well
as to depict many complex concepts in simple
way on your web page.
Insert Image
• You can insert any image in your web page by
using <img> tag.
• Following is the simple syntax to use this tag.
• <img src="Image URL" ... attributes-list/>
• The <img> tag is an empty tag, which means
that it can contain only list of attributes and it
has no closing tag.
Insert Image
• <html>
• <head>
• <title>Using Image in Webpage</title>
• </head>
• <body>
• <p>Simple Image Insert</p>
• <img src="rabbit.png" alt="Test Image" />
• </body>
• </html>
Insert Image
• This will produce following result:
Simple Image Insert

Insert Image
• You can use PNG, JPEG or GIF image file based
on your comfort but make sure you specify
correct image file name in src attribute.
• Image name is always case sensitive.
• The alt attribute is a mandatory attribute
which specifies an alternate text for an image,
if the image cannot be displayed.
Set Image Location
• Usually we keep our all the images in a
separate directory.
• So let's keep HTML file test.htm in our home
directory and create a subdirectory images
inside the home directory where we will keep
our image rabbit.png.
Set Image Location
• <html>
• <head>
• <title>Using Image in Webpage</title>
• </head>
• <body>
• <p>Simple Image Insert</p>
• <img src="images/rabbit.png" alt="Test Image" />
• </body>
• </html>
Set Image Width/Height
• You can set image width and height based on
your requirement using width and height
attributes.
• You can specify width and height of the image
in terms of either pixels or percentage of its
actual size.
Set Image Width/Height
• <html>
• <head>
• <title>Set Image Width and Height</title>
• </head>
• <body>
• <p>Setting image width and height</p>
• <img src=“rabbit.png" alt="Test Image" width="150"
height="100"/>
• </body>
• </html>
Set Image Border
• By default image will have a border around it,
you can specify border thickness in terms of
pixels using border attribute.
• A thickness of 0 means, no border around the
picture.
Set Image Border
• <html>
• <head>
• <title>Set Image Border</title>
• </head>
• <body>
• <p>Setting image Border</p>
• <img src=“rabbit.png" alt="Test Image" border="3"/>
• </body>
• </html>
Set Image Alignment
• By default image will align at the left side of
the page, but you can use align attribute to set
it in the center or right.
Set Image Alignment
• <html>
• <head>
• <title>Set Image Alignment</title>
• </head>
• <body>
• <p>Setting image Alignment</p>
• <img src=“rabbit.png" alt="Test Image" border="3"
align="right"/>
• </body>
• </html>
HTML Tables
• The HTML tables allow web authors to arrange
data like text, images, links, other tables, etc.
into rows and columns of cells.
• The HTML tables are created using the <table>
tag in which the <tr> tag is used to create
table rows and the <td> tag is used to create
data cells.
HTML Tables
• <html> • <tr>
• <head> • <td>Ramesh Raman</td>
• <title>HTML Table • <td>5000</td>
Header</title> • </tr>
• </head> • <tr>
• <body> • <td>Shabbir Hussein</td>
• <table border="1"> • <td>7000</td>
• <tr> • </tr>
• <th>Name</th> • </table>
• <th>Salary</th> • </body>
• </tr> • </html>
HTML Tables
Cellpadding and Cellspacing Attributes
• There are two attribiutes called cellpadding

and cellspacing which you will use to adjust
the white space in your table cells.
• The cellspacing attribute defines the width of
the border, while cellpadding represents the
distance between cell borders and the content
within a cell.
• <html>
• <head>
• <title>HTML Table Cellpadding</title>
• </head>
• <body>
• <table border="1" cellpadding="5" cellspacing="5">
• <tr>
• <th>Name</th>
• <th>Salary</th>
• </tr>
• <tr>
• <td>Ramesh Raman</td>
• <td>5000</td>
• </tr>
• <tr>
• <td>Shabbir Hussein</td>
• <td>7000</td>
• </tr>
• </table>
• </body>
• </html>
Colspan and Rowspan Attributes
• You will use colspan attribute if you want to
merge two or more columns into a single
column.
• Similar way you will use rowspan if you want
to merge two or more rows.
• <html>
• <head>
• <title>HTML Table Colspan/Rowspan</title>
• </head>
• <body>
• <table border="1">
• <tr>
• <th>Column 1</th>
• </tr>
• <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
• <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
• <tr><td colspan="3">Row 3 Cell 1</td></tr>
• </table>
• </body>
• </html>
Tables Backgrounds
• You can set table background using one of the
following two ways:
• bgcolor attribute - You can set background color
for whole table or just for one cell.
• background attribute - You can set background
image for whole table or just for one cell.
• You can also set border color also using
bordercolor attribute.
Tables Backgrounds
• <html>
• <head>
• <title>HTML Table Background</title>
• </head>
• <body>
• <table border="1" bordercolor="green" bgcolor="yellow">
• <tr>
• </tr>
• </table>
• </body>
• </html>
Tables Backgrounds
Tables Backgrounds
• Here is an example of using background
attribute.
• Here we will use an image available in /images
directory.
Tables Backgrounds
• <html>
• <head>
• <title>HTML Table Background</title>
• </head>
• <body>
• <table border="1" bordercolor="green" background=“rabbit.png">
• <tr>
• </tr>
• </table>
• </body>
• </html>
Table Height and Width
• You can set a table width and height using
width and height attributes.
• You can specify table width or height in terms
of pixels or in terms of percentage of available
screen area.
• <html>
• <head>
• <title>HTML Table Width/Height</title>
• </head>
• <body>
• <table border="1" width="400" height="150">
• <tr>
• <td>Row 1, Column 1</td>
• </tr>
• <tr>
• </tr>
• </table>
• </body>
• </html>
Table Caption
• The caption tag will serve as a title or
explanation for the table and it shows up at
the top of the table.
Table Caption
• <html>
• <head>
• <title>HTML Table Caption</title>
• </head>
• <body>
• <table border="1" width="100%">
• <caption>This is the caption</caption>
• <tr>
• <td>row 1, column 1</td><td>row 1, columnn 2</td>
• </tr>
• <tr>
• <td>row 2, column 1</td><td>row 2, columnn 2</td>
• </tr>
• </table>
• </body>
• </html>
Table Caption
Table Header, Body, and Footer
• Tables can be divided into three portions: a
header, a body, and a footer.
• The head and foot are rather similar to
headers and footers in a word-processed
document that remain the same for every
page, while the body is the main content
holder of the table.
• The three elements for separating the head,
body, and foot of a table are:
• <thead> - to create a separate table header.
• <tbody> - to indicate the main body of the
table.
• <tfoot> - to create a separate table footer.
• A table may contain several <tbody> elements
to indicate different pages or groups of data.
• But it is notable that <thead> and <tfoot> tags
should appear before <tbody>
• <html> table</td>
• <head> • </tr>
• <title>HTML Table</title> • </tfoot>
• </head> • <tbody>
• <body> • <tr>
• <table border="1" width="100%"> • <td>Cell 1</td>
• <thead> • <td>Cell 2</td>
• <tr> • <td>Cell 3</td>
• <td colspan="4">This is the head of the • <td>Cell 4</td>
table</td> • </tr>
• </tr> • </tbody>
• </thead> • </table>
• <tfoot> • </body>
• <tr> • </html>
• <td colspan="4">This is the foot of the
Nested Tables
• You can use one table inside another table.
Not only tables you can use almost all the tags
inside table data tag <td>.
Nested Tables
• <html>
• <head>
• <title>HTML Table</title>
• </head>
• <body>
• <tr>
• <td>
• <tr>
• <th>Name</th>
• <th>Salary</th>
• </tr>
• <tr>
• <td>Ramesh Raman</td>
• <td>5000</td>
• </tr>
• <tr>
• <td>Shabbir Hussein</td>
• <td>7000</td>
• </tr>
• </table>
• </td>
• </tr>
• </table>
• </body>
• </html>
Nested Tables

Lecture 7 - Images and Tables

Uploaded by

Copyright:

Available Formats

Lecture 7 - Images and Tables

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 7 - Images and Tables

Uploaded by

Copyright:

Available Formats

HTML Images and Tables

Dr. Fareed Ahmed Jokhio

Simple Image Insert

• There are two attribiutes called cellpadding

You might also like