HTML
IMAGES AND TABLES
IMAGES
• HTML allows to place static images in an HTML
file.
• It accepts file formats like .gif and .jpg.
• Image can be ...
Attributes in Image tag:
Align Specifies position of the image
Top/Middle/Bottom/Left/Center/Right.
Border Specifies size ...
Tables
• Tables are used to insert data in rows an columns
format in web pages.
• All table related tags are included betw...
Attributes related to table tag:
Align Horizontal alignment can be controlled.
Left/Center/Right
Valign Vertical alignment...
Attributes to be used with TH or TD tag:
Colspan This attribute take up more than one
column
Rowspan This attribute take u...
Caption to table
• Caption tag is used to give heading to the tables.
• Caption can be provided by using <Caption></Captio...
Table Code with Border & Header
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No...
Table Code with Colspan & Rowspan
<html><body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>...
Upcoming SlideShare
Loading in …5
×

Images and Tables in HTML

304 views
233 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
304
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Images and Tables in HTML

  1. 1. HTML IMAGES AND TABLES
  2. 2. IMAGES • HTML allows to place static images in an HTML file. • It accepts file formats like .gif and .jpg. • Image can be inserted in web page using <IMG> tag. • This tag will take name of image file as a value to the attribute SRC. • It also allows you to control height, width, border. <IMG SRC ="url"> <IMG SRC="picture.gif“> <IMG SRC="picture.gif“ HEIGHT="30“ WIDTH="50">
  3. 3. Attributes in Image tag: Align Specifies position of the image Top/Middle/Bottom/Left/Center/Right. Border Specifies size of the border Width Specifies width of image in pixels Height Specifies height of image in pixels Hspace Amount of space to the left and right of image Vspace Amount of space to the top and bottom of image Alt Indicates text to be displayed in case the browser is unable to display image.
  4. 4. Tables • Tables are used to insert data in rows an columns format in web pages. • All table related tags are included between <Table></Table> tags. • Each row of a table is described between the <TR></TR> tags. • Header rows is defined using <TH></TH> tags. • Each column of a table is described between the <TD></TD> tags.
  5. 5. Attributes related to table tag: Align Horizontal alignment can be controlled. Left/Center/Right Valign Vertical alignment can be controlled. Top/Middle/Bottom Width Sets width to specific number of pixels or to a percentage of the available screen width. Border Controls border to be placed around the table. Cellpadding Controls distance between the data in the cell and the boundaries of the cell. Cellspacing Control spacing between adjacent cells.
  6. 6. Attributes to be used with TH or TD tag: Colspan This attribute take up more than one column Rowspan This attribute take up more than one row
  7. 7. Caption to table • Caption tag is used to give heading to the tables. • Caption can be provided by using <Caption></Caption> tags. • It has align attribute having values either bottom or top. • Top will place caption immediately above the table. • Bottom will place caption immediately after the table.
  8. 8. Table Code with Border & Header <html><body> <h4>Horizontal Header:</h4> <table border="1"> <tr> <th>Name</th> <th>Loan No</th> <th>Amount</th> </tr> <tr> <td>Jones</td> <td>L-1</td> <td>5000</td></tr> </table><br><br> <h4>Vertical Header:</h4> <table border="5"> <tr> <th>Name</th> <td>Jones</td> </tr> <tr> <th>Loan No</th> <td>L-1</td> </tr> <tr> <th>Amount</th> <td>5000</td></tr> </table> </body></html>
  9. 9. Table Code with Colspan & Rowspan <html><body> <h4>Cell that spans two columns:</h4> <table border="4"> <tr> <th>Name</th> <th colspan="2">Loan No</th> </tr> <tr> <td>Jones</td> <td>L-1</td> <td>L-2</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="8"> <tr> <th>Name</th> <td>Jones</td></tr> <tr><th rowspan="2">Loan No</th> <td>L-1</td></tr> <tr><td>L-2</td></tr></table> </body></html>

×