HTML - Frames, Tables

Frames
Tables

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.
<frameset>	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.
<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:

Examples:

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.

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:

If you want to create the three vertical frames of ratio 20%, 50%, 30% of the page.
then the <frameset> tag will be:

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:

Example:

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:

Example:

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:

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:

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:

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:

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 »

SHARE THIS PAGE

HTML - Frames, Tables

0 Comments:

Post a Comment