Linggo, Disyembre 11, 2011

Difference between tables, frames and div tags

HTML 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). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example:
<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>


HTML 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:
  • Frames are not expected to be supported in future versions of HTML
  • Frames are difficult to use. (Printing the entire page is difficult).
  • The web developer must keep track of more HTML documents

The HTML frameset Element

The frameset element holds one or more frame elements. Each frame element can hold a separate document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.
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 document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column:

Frame Example:

<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>

Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="25%,*").


HTML <div> Tag

Definition and Usage

The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with styles.

Example

A section in a document that will be displayed in green:
<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.
Note: Browsers always place a line break before and after the <div> element.