0 index
1 Tables
2 Table Attributes
3 <th>…</th> Attributes
4 <tr>….</tr> Attributes
5 <td>…</td> Attributes
6 Table Level Controls
7 Row Level Controls
8 Cell Level Controls
9 Example of Colspan
10 Frames
11 Beginning a Frame
12 Building the Frameset
13 Example
14 The Next Step
15 Making Rows in the Frameset
16 Targeting Frames
17 Example
18 <BASE> Tag

outline
created using slideshow.cgi by Andy Harris















CSCI N241 Web Design: Tables and Frames
1. 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



































CSCI N241 Web Design: Tables and Frames
2. 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



































CSCI N241 Web Design: Tables and Frames
3. <th>…</th> Attributes
  • The same attributes can be used as the <td>…</td> tag



































CSCI N241 Web Design: Tables and Frames
4. <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



































CSCI N241 Web Design: Tables and Frames
5. <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



































CSCI N241 Web Design: Tables and Frames
6. 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



































CSCI N241 Web Design: Tables and Frames
7. 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.



































CSCI N241 Web Design: Tables and Frames
8. 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



































CSCI N241 Web Design: Tables and Frames
9. Example of Colspan

  • This is an example of Colspan

    Cell number 3

    Cell number 4



































CSCI N241 Web Design: Tables and Frames
10. Frames
  • Frames are a method of dividing the browser window into smaller sub-windows each displaying a different HTML document



































CSCI N241 Web Design: Tables and Frames
11. 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.



































CSCI N241 Web Design: Tables and Frames
12. Building the Frameset
  • The contents of framed documents come from separate HTML files that are displayed within each frame



































CSCI N241 Web Design: Tables and Frames
13. Example
  • <HTML>
    <HEAD>
    <TITLE>Beginning FrameSet</TITLE>
    </HEAD><
    <FRAMESET COLS = "20%, 80%">
    <FRAME SRC = "LeftSide.html">
    <FRAME SRC = "RightSide.html">
    </FRAMESET>
    </HTML>



































CSCI N241 Web Design: Tables and Frames
14. 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



































CSCI N241 Web Design: Tables and Frames
15. Making Rows in the Frameset
  • By using:
    <FRAMESET ROWS = "*,*">
    <FRAME SRC = "top.html">
    <FRAME SRC = "bottom.html">
    </FRAMESET>
    you can make ROWS



































CSCI N241 Web Design: Tables and Frames
16. 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



































CSCI N241 Web Design: Tables and Frames
17. 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">



































CSCI N241 Web Design: Tables and Frames
18. <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>



































outline

Tables

Table Attributes

<th>…</th> Attributes

<tr>….</tr> Attributes

<td>…</td> Attributes

Table Level Controls

Row Level Controls

Cell Level Controls

Example of Colspan

Frames

Beginning a Frame

Building the Frameset

Example

The Next Step

Making Rows in the Frameset

Targeting Frames

Example

<BASE> Tag