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>