HTML IMAGES AND TABLES
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 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">
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 pixelsHeight Specifies height of image in pixelsHspace 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.
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.
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.
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
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.
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>
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>
Related Documents
