MSN Home  |  My MSN  |  Hotmail
Sign in to Windows Live ID Web Search:   
go to MSNGroups 
Groups Home  |  My Groups  |  Help  
 
Web DesignDeemed especially "cool" by MSN.WebDesign@www.msnusers.com 
  
What's New
  Join Now
  Homepage  
  Rules - Simple  
  Nickel Tour  
  How_to_Ask_for_Help  
  Message Boards  
  Member Promos  
  Newbie Central  
  Tutorials etc.  
  
  System Requirements  
  
  MSN Help Topics  
  
  Add A Counter  
  
  Add a Background  
  
  Logos&Affiliations  
  
  Add Music Link  
  
  Tables for Newbies  
  
  Using Tables  
  
  Advanced Tables  
  
  Cookie Toss etc.  
  
  Font Color Tips  
  
  Netiquette  
  
  Organize Pages  
  
  HTML tags-MSN  
  
  Add a Poll  
  
  Make Your BGs  
  
  Color Matching  
  
  Member Search  
  
  MSN Limits  
  
  Making A List  
  
  Advanced Lists  
  
  Passport Security  
  
  Group Jukebox  
  Basic Security  
  Hot Tips  
  FP - HTML Editors  
  Good Design  
  Help Groups  
  Free*Stuff Links  
  Templates  
  Handy Helpers  
  Pictures  
  Documents  
  Member Assist  
  Scrabble Board  
  Sample Jukebox  
  Nested Tables  
  Homepg Workshop  
  
  
  Tools  
 

Using Tables on your Web Pages

How the table tool works

When you click on Insert Table (the tool on the edit bar that looks like graph paper), the default rows & columns screen appears.  Change it to "1" in each box for a background table for your page.
If you are editing an existing table, be sure to click on the EDIT TABLE tab first!

This is what the Edit Table tab looks like.  The default on entering it is to add rows or columns.  Simply click on them once for each column or row you need to add.  

At present there is no way to delete columns or rows, except to edit the html.

Cell padding and spacing determine the amount of space between the objects you insert into your table.
Higher numbers mean more space.  To get items in your table to touch with no space between them, set both to 0 (zero).  To get a single border on your table, set cell spacing to 0 (zero).
The border tool allows you to select the color and width. 
If you know the color code for the shade you want to use, type it in after the # sign.  If not, select from the color-picker.  The color you are on is shown in the larger box to the left of the rainbow color picker table.
This is the famous background tool.  The color-picker works the same as for the border tool.

If you want to use a background graphic on your page, you type or use control+v to paste in the url for the graphic.  In the case of graphics stored in your photo album, you would paste the "properties" of the graphic in the Background Image URL location on this tool.
Generally speaking, you need to create at least 2 tables on the average MSN web page:
  • first one holds the picture background if you are using one - this must be a 1 column x 1 row table
  • second one goes INSIDE the first and is used to organize the text and graphics components on your page
  • note that you can add more tables inside the cells of any existing table to further organize your page
  • basically, you put one thing in each cell in order to keep them organized on the page so that items stay where YOU want them to be

Things to Remember about Tables:

short TALL WIDER narrow
TALL WIDER narrow short
narrow short TALL WIDER
WIDER narrow short TALL
  • the widest thing in a column will make all the cells in that column the same width
  • ditto for the highest thing in a cell - it will make all the cells in that row the same height
  • taller items in one cell in a row will cause the shorter items in the same row to be centered VERTICALLY in the cell - vertical centering is the default for MSN tables - you can't change it unless you can edit the html code
  • every cell in a table seems to come with a nasty old space in it - delete that space before you start typing or inserting pics into it
  • every graphic inserted into a cell in a table seems to bring a nasty old space with it - usually right behind the pic - delete that too
  • select a table and use the alignment tools on the toolbar to center, right or left align it horizontally - you can tell when a table is selected - 6 little boxes will appear on it's edges, one in each corner, and one in the middle of each side
  • align text and graphics the same way inside the table cells - select them and click on the alignment you want
  • enter key gives you a paragraph break (double space) and shift+enter gives you a line break (single space) - this applies to items within tables as well as spacing between a number of tables on a page
  • when making a change to a table, ALWAYS remember to click on the "edit table" tab, or you will just insert a new table instead and end up with a heck of a mess
  • with MSN tables feature, you are pretty much stuck with the "graph paper" effect - unless you have your own HTML editing software to create tables, or are a real HTML code wiz, there is no way to have a wider cell that spans more than one column in a table, or a longer cell that spans more than one row
  • there is no way to delete a column, row or cell, only to add them, unless you edit the html code
  • if you do have your own HTML editor, you can create the table you want there and copy the code into the HTML editor (checkbox at bottom of MSN Page Editor) and it retains all the parameters

Tips for Graphics and Alignment in Tables:

  • with graphics, horizontally centering them is often the way that you discover those nasty extra spaces - suddenly, new space appears above or below your graphic - delete them - put your cursor at the end of the selected extra space and use BACKSPACE key to remove, or at the beginning of the suspected space and use DELETE key to remove
  • if your graphic suddenly disappears, use control+z to undo the deletion (works on any change you make - last change is undone)
  • you can horizontally align a table in the same way - if you have a small table to hold a picture that you have "framed" with a nice border treatment for example, left or right aligning that table will allow you to put other text or graphics beside that table - however, you can't put two tables beside each other - doesn't work very well
  • when editing your page, set the table borders to at least 1 in order to see where the table is; when you are done and want the table to be invisible, edit the table settings to set the border width to zero - remember to click on the EDIT TABLE tab!
  • Each cell in a table can have a different background color, but borders, cell spacing and cell padding have to be the same
  • To add a graphic background inside a cell within a table, instead of just the MSN-provided solid colors, insert a 1 column by 1 row table inside the cell that you want to have a special background (see Add a Background Tutorial)

Copyright Web Design, February 2001
Updated:  May 2, 2002
Notice: Microsoft has no responsibility for the content featured in this group. Click here for more info.
  Try MSN Internet Software for FREE!
    MSN Home  |  My MSN  |  Hotmail  |  Search
Feedback  |  Help  
  ©2005 Microsoft Corporation. All rights reserved.  Legal  Advertise  MSN Privacy