Tables and Frames
n241.tplt
Tables
Can assist in the layout of your Web page
<TABLE>…</TABLE> - begins/ends the Table
<th>….</th> - begins/ends the Table Header Cell
<tr>….</tr>- begins/ends a row of cells within a table
<td>…</td> - begins/ends the Table Data Cell
Table Attributes
You can:
- align the table left, right, or center
- bgcolor - specifies a background color for the entire table
- border - specifies the width (in pixels) around the table and its cells. 0 turns off the borders completely
<th>…</th> Attributes
The same attributes can be used as the <td>…</td> tag
<tr>….</tr> Attributes
Align - aligns the text or other elements within the cells of the current row (left, right, center)
Bgcolor - specifies a color to be used in the row
<td>…</td> Attributes
Align - aligns the text or other elements within a table row
Bgcolor - specifies a color to be used in the table cell
Colspan = number - specifies the number of columns the current cell should span
Rowspan = number - specifies the number of rows spanned by the current cell
Table Level Controls
At the table level (using attributes), you can control:
- the width of the table
- the color of all of its cells
- the thickness of the border
- the spacing within and between cells
Row Level Controls
For each row (using attributes), you can control:
- the vertical and horizontal alignment of the cells' contents
- background colors for all the cells contained in that row
Row settings override table-level settings.
Cell Level Controls
The table structure and appearance is controlled at the individual cell level.
Using attributes, you can:
- control the vertical/horizontal alignment of the cell contents
- the color of the cell background
- the height/width of the cell
- whether the cell will span over more than one cell space
Example of Colspan
This is an example of Colspan | Cell number 3 | Cell number 4 |
Frames
Frames are a method of dividing the browser window into smaller sub-windows each displaying a different HTML document
Beginning a Frame
You begin by creating a <frameset>….</frameset> defining a collection of frames
The basic frameset structure does not contain a <body>….</body>
Your first document defines the width or height of your frame and the name and source of each frame.
Building the Frameset
The contents of framed documents come from separate HTML files that are displayed within each frame
Example
<HTML>
<HEAD>
<TITLE>Beginning FrameSet</TITLE>
</HEAD><
<FRAMESET COLS = "20%, 80%">
<FRAME SRC = "LeftSide.html">
<FRAME SRC = "RightSide.html">
</FRAMESET>
</HTML>
The Next Step
Now you establish the LeftSide.html document
Next establish the RightSide.html document
Place the information you want to display within the correct document
For Example
- if you want a menu on the left side of your frame, place the menu in LeftSide.html
- if you want your main document on the right side of your frame, place the information in RightSide.html
\
Making Rows in the Frameset
By using:
<FRAMESET ROWS = "*,*">
<FRAME SRC = "top.html">
<FRAME SRC = "bottom.html">
</FRAMESET>
you can make ROWS
Targeting Frames
The challenge to managing framed documents is coordinating where the linked documents will display
You can use a target attribute in the anchor tag (<a>) to specify a target frame by name - make sure your assign a name to the frame using the name attribute
Example
<FRAME SRC = "LeftSide.html" NAME="menu">
Now any link can load the document into that frame by using the name as the target window
Example:
- <a href = "newDocument.html" TARGET = "menu">
<BASE> Tag
You can use the <BASE> tag if you know all the links to a particular document will be loaded into the same frame
This is done once instead of for every link in the document
Example:
<HEAD>
<BASE TARGET = "menu">
</HEAD>