HTML Frames
With frames, you can display more than one Web page in the same browser window.
_____________________________________________________________________________________
Frames
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.
The disadvantages of using frames are:
* The web developer must keep track of more HTML documents
* It is difficult to print the entire page
_____________________________________________________________________________________
The Frameset Tag
* The <frameset> tag defines how to divide the window into frames
* Each frameset defines a set of rows or columns
* The values of the rows/columns indicate the amount of screen area each row/column will occupy
_____________________________________________________________________________________
The Frame Tag
* The tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> |
Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
_____________________________________________________________________________________
Basic Notes - Useful Tips
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add nore to the tag.
Add the <noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.
_____________________________________________________________________________________
Frame Tags
| Tag | Description |
|---|---|
| <frameset> | Defines a set of frames |
| <frame> | Defines a sub window (a frame) |
| <noframes> | Defines a noframe section for browsers that do not handle frames |
| <iframe> | Defines an inline sub window (frame) |
_____________________________________________________________________________________
HTML Tables
With HTML you can create tables.
_____________________________________________________________________________________
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1"> <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> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
_____________________________________________________________________________________
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
_____________________________________________________________________________________
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="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>row 2, cell 2</td> </tr> </table> |
How it looks in a browser:
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
_____________________________________________________________________________________
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border="1"> <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> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
<table border="1"> <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> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
_____________________________________________________________________________________
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 |
| <colgroup> | Defines groups of table columns |
| <col> | Defines the attribute values for one or more columns in a table |
| <thead> | Defines a table head |
| <tbody> | Defines a table body |
| <tfoot> | Defines a table footer |
Regards:-
Manan Saini.
