HTML - Frames, Tables
Frames
Introduction
Different Types of Frame
Frame Tags
Examples of Different Frames
Tables
Introduction
Table Tags
Attributes
How to Create Table
Example on the colspan and rowspan
Frames
Introduction
Frames Will not it be better, if you are able to display the more then one HTML document in the same browser. Yes of course it will be better. So get ready to learn this fascinating idea. It can be done very easily using "Frames" in the HTML.
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
With the frames you will be able to create the pages like this:
In this way the browser can be divided into the Horizontal & Vertical Frames and each frame contains a page in it. Hence by using frames you can display more then one page in one Browser.
Different Types of Frame
Horizontal Frame
The horizontal frames are created in the horizontal pattern on the browser. Horizontal frames divides the browser in the horizontal parts as you see in the figures. And all the frames displaying a different html files in them.
Vertical Frame
The vertical frames are created in the vertical pattern on the browser. Vertical frames divides the browser in the vertical parts as you see in the figures. And all the frames displaying a different html files in them.
Mixed Frame
The mixed frames are created using both vertical frames and horizontal frames. Mixed frames divides the browser in the vertical parts as well as in the horizontal parts as you see in the figure of Mixed frames. And all the frames displaying a different html files in them. Before starting the creation of the frames you will need to read some Simple Tags about frames.
Frame Tags
Tags
Description
<frameset>
Defines a set of frames
<frame>
Defines a sub window (a frame)
<iframe>
Defines an inline sub window (frame)
Tags and its Attributes:
Tags
Attribute
Value
Description
<frameset>
rows
pixels, % part of page
Defines the proportion of division of page in horizontal frame.
cols
pixels, % part of page
Defines the proportion of division of page in vertical frames.
<frame>
src
path of the file
path of the file which in to displayed in frame.
noresize
noresize
Defines weather the frames resizable or not.
name
name of frame
Provides the name of frame.
<iframe>
src
path of the file
path of the file which in to displayed in iframe.
name
name of iframe
Provides the name of iframe.
<frameset> Tag
The <frameset> defines the set of frames or you may say, it defines no. of frames we will have on the a page. The frameset is a set of frames.
Format:
<frameset rows="pixels or % of page, pixels or % of page,....,pixels or % of page">
Examples:
<frameset rows="30%,40%,30%">
This example will create the three horizontal frames with area of 30%, 40%, 30%. As 100% area is divided in three parts of 30%,40% and 30% for three frames.
<frameset rows="30%,*">
Star character '*' here represents the remaining part of the screen.
This example will create the two horizontal frames with area of 30% and whatever is remaing part of the screen will the height of second frame. As 100% area is divided in two parts of 30% and then the remaining screen area will be second frame.
Note: This * is commonly used for creating frames.
Its Attributes:
rows: it is used when user wants to create the horizontal frames.
cols: it is used when user wants to create the vertical frames.
If you want to create the three horizontal frames of ratio 20%, 50%, 30% of the page.
Then the <frameset> tag will be:
<frameset rows="20%,50%,30%">
If you want to create the three vertical frames of ratio 20%, 50%, 30% of the page.
then the <frameset> tag will be:
<frameset cols="20%,50%,30%">
In both the examples the first frame is of 20%, second is of 50%, third of 30%.
But <frameset> alone will not display the frames it only defines the set of number of frames it will have. To display those frames make the use of <frame> tag.
<frame> Tag
The frame tag displays the empty frames. <frame> tag is used between the start & end tag.
If you want to display the other pages in the frames then use src attribute of <frame> tag.
Format:
<frame src="path of file" noresize="noresize" name="any_name">
Example:
<frame src="d:\html\frames.php" noresize="noresize" name="frame1">
Its Attributes:
src: defines the path of file which is to be displayed in the frame.
noresize: defines the resize property of the frame, if we defines the its value as "noresize" then the you can not change the size of frames. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.
And if you need resizable frames then do not use "noresize" attribute in <frame> tag.
name: defines the name of the frame. You can provide the name of your choice.
<iframe> Tag
It is the tag for the inline frames. The inline frame is the small frame which can be inserted on any web page. It is defined inside the body of the html file. It is not resizable.
Format:
<iframe src="path of file" name="name_of_this_frame">
Example:
<iframe src="c:\html\lists.php" name="iframe">
Its Attributes:
src: defines the path of file which is to be displayed in the frame.
name: defines the name of the frame. You can provide the name of your choice.
How To create Horizontal Frames
Example:
if you want to create three horizontal frames of area 20%, 50%, 30% then first use the <frameset> Tag.
so now lets do some Practical.
Examples of Different Frames
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
Example:
This example will display empty frames.
<html>
<frameset rows="20%,50%,30%">
<frame>
<frame>
<frame>
</frameset>
<head>
<title> Frames</title>
</head>
</html>
so now lets do some Practical.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
Example:
This example will display three frames with different pages.
<html>
<frameset rows="20%,50%,30%">
<frame src="c:\html\list_tags.html" name="frame1" noresize="noresize">
<frame src="c:\html\basic.html" name="frame2" >
<frame src="c:\html\link_media.html" name="frame3" >
</frameset>
<head>
<title> Frames</title>
</head>
</html>
Page in browser will look like:
Note:
You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.
How To Create Vertical Frames
To create such type of vertical frames you do not have to do much more just write "cols" in place of "rows" in the <frameset> tag.
Example:
<frameset cols="20%,50%,30%">
also test them in the browser.
Example:
This example will display three frames with different pages.
<frameset cols="20%,50%,30%">
<frame src="c:\html\list_tags.html" name="frame1" noresize="noresize">
<frame src="c:\html\basic.html" name="frame2" >
<frame src="c:\html\link_media.html" name="frame3">
</frameset>
<head>
<title> Frames</title>
</head>
</html>
Page in browser will look like:
How To Create Mixed Frames
To create the mixed frames, concept of nesting is used, in mixed frames we use the nesting of <frameset>. See how nesting of <frameset> is done
Example:
<html>
<frameset cols="20%,80%">
<frame src="c:\html\list_tags.html" name="frame1">
<frameset rows="20%,80%">
<frame src="c:\html\link_media.html" name="frame2">
<frame src="c:\html\basic.html" name="frame3">
</frameset>
</frameset>
</html>
Page in browser will Look Like:
In this example you see how first <frameset> tag divides the browser into two frames i.e. of 20% and 80%. then first frame1 is defined but the second frame is again divided into the two new horizontal frames using the second <frameset> tag of inside the first <frameset> tag.
so now lets do some Practical.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
Note:
You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.
How to Create Inline Frame
Inline frames are created using the <iframe> tag. This tag is used inside the body of the HTML file.
So lets have an example:
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks:
Example:
<html>
<body>
<iframe src="c:\html\list_tags.html"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Page in browser will Look Like:
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
Tables
Introduction
If you want to display information of some type, like displaying your time table of class, Report Card or want to display information in the form of the tables. Then the Table elements of the HTML is used to display the information in the table form. Now you can do this easily or how easily you can display your information using tables. Information in the table can be displayed in the form of like.
S.No.
Name
Class
Age
Address
1
Arun Kumar
12th
20
xyz
2
Neeraj Kumar
10th
18
abc
Tables are the simplest form of displaying the data/ information. Using tables we can display the information very easily to the user. Due to its Simplicity in almost all the projects data is displayed using the tables. Project may be made using any application. But most of them uses only tables to display the information.
In all most all of the database driven websites we uses the tables to display the information. So tables are very important part of the HTML. And you must learn them nicely.
Table Tags
Tag
Description
<table>
Defines a table
<th>
Defines a table header
<tr>
Defines a table row
<td>
Defines a table cell
<caption>
Defines a table caption
<thead>
Defines a table head
<tbody>
Defines a table body
The <table> tags
The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells and other tables
Format:
<table> <tr><td>..............</td></tr></table>
Attributes
Tags
Attribute
Value
Description
<table>
align
left,center,right
Aligns the table. Deprecated. Use styles instead.
bgcolor
rgb(x,x,x),#xxxxxx, colorname
Specifies the background color of the table. Deprecated. Use styles instead.
border
pixels (0-n)
Specifies the border width. Tip: Set border="0" to display tables with no borders!
cellpadding
pixels, %
Specifies the space between the cell walls and contents
cellspacing
pixels, %
Specifies the space between cells
width
pixels, %
Specifies the width of the table
Align
This attribute can have the value center, left, right. By using this table can be aligned on the page.
bgcolor
bgcolor is used to give the background color to the table. It can have the values in the three type, rgb (x,x,x) combination, #xxxxxx (color code), or color name.
border
border attribute of the table is used to provide the border style to the table. Its value is given in pixels (0-n). Above table has border="5".
if you want your table should not have border then define border="0".
width
It specifies the width of the table. Its value is also given in pixels (0-n) or %.
cellpadding
It specifies the space between the cell walls and contents. Its value is also given in pixels (0-n) or %.
cellspacing
It specifies the space between the cells. Its value is also given in pixels (0-n) or %.
<th> <tr> and <td>Tag
<th> tag
Defines a table header cell in a table. The text within the th element usually renders in bold.
Format:
<th> this is the header </th>
<tr> tag
<tr> tag defines a row in a table.
Format:
<tr> <td>table data </td> </tr>
<td> tag
<td> tag defines the table data. This tag is used inside the <tr> tag.
Format:
<td> table data </td>
The next table defines the different attributes that can be used by <th>,<tr> and <td> tags.
Tags
Attribute
Value
Description
<th>,<td>,<tr>
align
left,center,right
Specifies the horizontal alignment.
<th>,<td>,<tr>
bgcolor
rgb(x,x,x),#xxxxxx,
colorname
Specifies the background color of the table. Deprecated. Use styles instead.
<th>,<td>
colspan
number
Indicates the number of columns this cell should span
<th>,<td>
rowspan
number
Indicates the number of rows this cell should span
<th>,<td>,<tr>
height
pixels
Specifies the height of the table cell. Deprecated. Use styles instead.
<th>,<td>,<tr>
Valign
top,middle,bottom,
baseline
Specifies the vertical alignment of cell content
<th>,<td>
width
pixels %
Specifies the width of the table cell. Deprecated. Use styles instead.
<caption> Tag
<caption> tag defines a table caption.
Format:
<caption>This is a caption</caption>
<thead>,<tbody> and <tfoot> tag
The thead, tfoot and tbody elements enables you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.
Example for <thead>,<tbody>and <tfoot>
Example
Output
<table border = "1">
<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> This text is in the TBODY</td>
</tr>
</tbody>
</table>
This text is in the THEAD
This text is in the TFOOT
This text is in the TBODY
Attributes of <thead>,<tbody> and <tfoot>
Attribute
Value
Description>
align
right,left,center,justify
char
Defines the text alignment in cells.
Valign
top,middle,bottom,baseline
Specifies the vertical text alignment in cells.
so now lets do some Practical.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
How to Create Table
Example:
<html>
<head>
<title>tables</title>
</head>
<body>
<b>Table with border=1 cellspacing=1 cellpading=1 with one empty cell.
</b><table border="1" cellspacing="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
<br>
<b>Table with border=1 cellspacing=1 cellpading=10 bgcolor=lightyellow</b>
<table border="1" cellspacing="1" cellpadding="10" bgcolor="lightyellow">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table><br><b>
Table with border=8 cellspacing=8 cellpading=1 bgcolor=lightblue
bgcolor=lightgreen</b>
<table border="8" cellspacing="8">
<tr>
<th bgcolor="lightblue">Heading</th>
<th bgcolor="lightgreen">Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<p> </p>
</body>
<html>
Your above web page in the web browser looks like:
Example on the colspan and rowspan
Here you can see what the colspan and rowspan do.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
Example:
<html>
<body>
This table has a caption,and a thick border,<h4>Cell that spans two columns:</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>XYZ</td>
<td>011 273 994</td>
<td>011 274 465</td>
</tr>
</table> <h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>XYZ</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>011 273 994</td>
</tr>
<tr>
<td>011 274 465</td>
</tr>
</table>
</body>
</html>
Your above web page in the web browser looks like:
« Previous Next Chapter »