Web Development

  Homes arrow Web Development arrow Microsoft FrontPage 2000 - Using Tables for P...
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB DEVELOPMENT

Microsoft FrontPage 2000 - Using Tables for Page Layout
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating:  stars stars stars stars stars / 0
    2004-04-14

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    Microsoft FrontPage 2000 - Using Tables for Page Layout
    by GTS Learning

    Objectives of this Tutorial

    Generally: To create advanced table layouts and effects.

    Specifically: On completion of this lesson, you will be able to:
    • Add a table within a table
    • Set table and cell properties, such as alignment, padding and spacing
    • Centre an image or text within a table cell
    • Apply table borders
    • Add background shading or an image to an entire table and to individual table cells

    As well as being used to present tabular information, tables can be used to create the layout of a web page. The advantage of using a table over techniques such as positioning is that tables are supported by a wider range of browsers.

    By using tables you can set fixed page widths and heights, align pictures and text and design shading and border effects around a page.

    Note: If you are publishing your pages to the web, you will still need to test your pages in a variety of browsers when using tables. Some browsers may interpret complex tables slightly differently. You also need to test your page at different screen resolutions and with different sized browser windows.

    Insert a Table Within a Table

    Adding a table within another table allows you to create very complex layouts.

    To insert a table within another table

    • Click in the cell where you want the new table to be positioned

    • From the Table menu, select Insert then Table...

    The Insert Table dialogue box is displayed.


    Insert Table dialogue box

    • Enter the properties as required for the new table
    • Click OK

    Below is an example of a table within another table.


    Example of a table within another table

    Tip: You can also insert a table within a table using the Insert Table button . However you cannot use the Draw Table tool to insert a table.

    Set Table Properties

    Tables have many properties that control how they appear on the page.

    Note: Table cells always expand to fit any text, graphics or sub-tables you put in them. If you want to make a table a precise number of pixels wide or high, you will need to plan the content carefully.

    To modify table properties

    • Select the table then from the Table menu, select Properties... then Table

    OR

    • Right-click the table and from the shortcut menu, select Table Properties

    To modify table or cell properties

    You can also specify the width and height attributes of rows and columns. If you have specified a width for the table, the table measurements override the preferred cell widths. You can enter measurements as a percentage of the table size or as a fixed number of pixels.

    • Select the row(s) or column(s) then from the Table menu, select Properties... then Cell

    OR

    • Right-click the selected cell(s) and from the shortcut menu, select Cell Properties

    Align Cell Contents

    As with a table in a word processing document, you can align cell contents relative to the horizontal and vertical borders.

    To align cell contents using the toolbars

    • Select the cell(s) to align
    • On the Formatting toolbar, click a horizontal alignment button

    Vertical alignment can be set using the Tables toolbar.

    • If the toolbar is not displayed, from the View menu, select Toolbars then Tables


    Tables toolbar

    • Click a button

    To align cell contents using the menu

    • Select the cell(s) to align
    • From the Table menu, select Properties then Cell...

    The Cell Properties dialogue box is displayed.


    Cell Properties dialogue box

    • From the Horizontal alignment list box, select Left, Right, Center or Justify
    • From the Vertical alignment list box, select Top, Middle, Baseline or Bottom
    • Click OK

    Apply Borders to a Cell

    The Table Properties and the Cell Properties dialogue boxes allow you to apply borders to a table.

    When you apply table borders, a border is drawn around the entire table and around each cell, giving the edges of the table a double line effect. You can only change the width and colour of borders - you cannot turn borders on and off for specific edges or cells.

    You can create a 3-D effect by setting different colours for the "light" border (the bottom and right edges) and the "dark" border (the top and left edges).

    To apply a border

    • Select the table then from the Table menu, select Properties then Table...

    OR

    • Right-click the table and from the shortcut menu, select Table Properties...

    The Table Properties dialogue box is displayed.


    Table Properties dialogue box

    • In the Size: box, enter the width of the border in pixels (from 0 to 100)
    • To create a flat border, select a colour from the Color: box

    OR

    • To create a 3-D effect, select colours from the Light border: and Dark border: boxes
    • Click OK

    Tip: You can change the colour of cell borders from the Cell Properties dialogue box.

    Apply Cell Shading and Picture Backgrounds

    The Table Properties and the Cell Properties dialogue boxes have sections where you can specify a background colour or image.

    Note: Background properties set in the Cell Properties dialogue box override those set in the Table Properties box. So if you specify a coloured background in Table Properties and a picture background in Cell Properties, the picture will be displayed. You can use different backgrounds in different cells.

    To apply a coloured background

    • If you are applying changes to cell(s), select the cells; otherwise click in the table
    • From the Table menu, select Properties then Table or Cell as appropriate

    The Table/Cell Properties dialogue box is displayed.


    Table Properties dialogue box

    • Use the Color: list box to select from the colours displayed

    Tip: If you click More Colors... you can select from a wider range of colours or mix a custom colour.

    Tip: You can also apply shading using the Fill Color button on the Tables toolbar.

    To add a background image to a table

    • If you are applying changes to cell(s), select the cells; otherwise click in the table
    • From the Table menu, select Properties then Table or Cell as appropriate

    The Table/Cell Properties dialogue box is displayed.


    Table Properties dialogue box

    • Select the Use background picture check box
    • Click Browse...

    The Select File dialogue box is displayed.


    Select File dialogue box

    • From the Look in: box select the drive and folder where the file is stored
    • Select the file
    • Click OK
    • Click OK again to exit the Table Properties dialogue box

    The table is displayed with the image as a background.


    Table with background image


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed

       

    WEB DEVELOPMENT ARTICLES

    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap