Lesson 5 :- Using Frames and Tables
(427 reads)
Using Frames
Each HTML document is called a frame, and each frame is independent of the others,
this allows you to display more than one HTML document in the same browser window.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
Using 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
Using Frame Tag
The <frame> 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>
Using 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)
Using Tables
Tables
In HTML 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
In HTML if you do not specify a border attribute the table will be displayed
without any borders.
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>
Table Headings
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 |
Table Empty Cells
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 |
|
Observe that the borders found around the empty table cell are missing.
To prevent this, add a non-breaking space ( ) to empty data cells,
thus enabling the borders to be 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 |
|
| 
