• Affiliate Marketing
 • Affiliate Marketing - Basics
 • Affiliate Marketing - Development
 • Affiliate Marketing - Setting Up
 • Archive catalogue
 • Autoresponders
 • Banner Advertising
 • Business Development
 • Checklists
 • Competitors
 • Copy Writing
 • Copy Writing - ad copy
 • Copy Writing - email copy
 • Copy Writing - sales copy
 • Customer Service
 • Database Marketing
 • Direct Mail
 • Domain Names
 • E-books
 • E-commerce
 • E-mail Marketing
 • E-zines
 • E-zines: Advertising
 • E-zines: Promotion
 • E-zines: Subscribers
 • E-zines: Writing
 • Entrepreneurship
 • Free Services
 • Home Based Business
 • Home Based Business - Finance
 • Home Based Business - Getting Started
 • Home Based Business - is it for YOU?
 • Home Based Business - Marketing
 • Internet Tips
 • Market Research
 • Marketing
 • Marketing Strategy
 • Net Business Start ups
 • Networking(MLM)
 • Newsletters/Newsgroups
 • Online Payments
 • Online Promotion
 • PC KNOW HOW
 • Personal Development For Marketeers
 • PR/Publicity and Media
 • Sales Tips
 • Search Engines
 • Search Engines - Keywords
 • Search engines - Optimisation
 • Selling Techniques
 • Surveys and Statistics
 • Telesales
 • Top 10 Tips
 • Traffic and Tracking
 • Viral Marketing
 • Website Design and Development
 • ZeLatest

More Table Tips for Better Browser Compatibility

Category: Website Design and Development Date: 2003-10-05
In a recent article that appeared in WebPro News, I discussed numerous issues related to making pages look consistent on different operating systems and in different browsers. I received a great deal of inquiry on this subject, much of which related to the use of tables.

One use of tables I described advocated the use of fixed width tables to control text wrapping around images. It is important to understand that this technique is intended to allow the control of text wrapping, but, in fact, as some readers pointed out, it causes other problems when the table is too wide or the visitor has font sizes set to very large defaults. To illustrate the differences, I have created an example page which shows the two techniques in use:

Example 1
http://www.web-net-solutions.com/Examples/fixVsScale.html

Unless the control of text wrapping is of top priority, setting the tables width as a percent of the browser window allows better control of the overall look of the page on various browser/operating system combinations.

However, it is possible (with a bit more effort) to use tables with percent widths and still control the text wrapping to some degree. It requires splitting text into sections and using a table with more than one cell to create the wrap effect.

Wrapping Control -- The Next Level

Suppose you have a long body of text into which you want to place an image. However you want the image to line up with the beginning of a particular paragraph. This is pretty easy. However, if you want to prevent one word of the paragraph from appearing on a line by itself under the image, or if you have other wrapping concerns, you now are faced with a difficult task.

To accomplish this, you can create one table that is one column wide and one row long and load it with text. At the place you want to insert the image, create a table with two columns and one row. In one cell, place the image and in the other, place the text you want to accompany the image.

(All of this will probably look better if you set table border to zero.)

You can further control the way the text behaves by setting that CELL to a fixed width. You will want to decide some alignment for the image -- you may want to try center and middle as a starting point.

Example 2
http://www.web-net-solutions.com/Examples/wrapControl.html

When using two cells and the possibility that the cell elements will be right against each other, it is probably a good idea to use cell padding to some degree. I use 4 or 5, depending on my mood. This keeps letters from butting up against images (or each other if there is text in two cells).

Once you start using this technique, you will find so many different possibilities that you may become frustrated. Dont let your frustration become a hinderance, however. Once you begin using tables in this manner, you will find settings that you like and can use them repeatedly with ease.

Tables to Create Framing Effects

Tables can not only be used to help control the look of text positioning, but they can also be used to enhance page layout. Since tables can have a background color or background image different from the rest of the page, you can use this to create many different effects.

First, however, you will have to give up the habit of running content from edge to edge of your browser window. Thats right. Set aside some space along the edges for empty space. If you are shocked by this, pick up ANY printed material and you will see a margin. People trained in design and graphics have told me that our eyes are more happy when they can ease into the body of document. Why would this not be true on the web as well?

Throughout the example pages provided with this article, you will note some sort of empty space on either side of the pages. This is intentional and results in a cleaner and, in my view, more attractive layout.

If you are willing to agree to leave a bit of margin around your work -- a frame of sorts -- then you can harness tables to create some interesting effects.

To create a space to attract visitors eyes, try setting the page background color to one value and the table background color to another. Make good selections about these colors to keep them from clashing (unless that is the effect you are after). Two shades of the same color are possible choices.

If you do this, be sure to use cell padding. If you dont you will have letters too close to the color boundary.

Also, realize that the background color will show BETWEEN any tables you create on the page. Thus, if you are using the technique described in example two above, you will have some color between the tables. (This can be controlled by using a single table with multiple rows instead of separate tables -- see Example 3. However, you will need to set the "row span" attribute on the rows that are supposed to be full table width. I intended example two to be relatively simple and easy enough for anyone to try....) You can also use cell background color to create borders between cells by creating a narrow cell between two other cells.

Example 3
http://www.web-net-solutions.com/Examples/tableBorder.html

Although tables are not capable of doing everything, they offer many options that will help you design pages that are under your control. Using these techniques can provide you with many, many varieties, most of which will give you better control of how your pages will look on multiple browsers. Most table features are equally supported in both Netscape and IE and help you control for some of the differences between Windows, Linux, and Macintosh. Short of adopting all the capabilities of cascading style sheets (CSS), using tables offers the best solution for controlling the way your pages display. However, since Netscape and IE both have features that are not cross compatible, it is still a good idea to inspectpyour creation closely.

About the Author

Bill Snodgrass is a partner in Web-Net Solutions, a company dedicated to helping businesses get the most from technology. His primary contribution is in the area of web site design and engineering. Web-Net Solutions offers small to medium businesses the chance to access top level technical support, state of the art web design, and customized programming without the need to hire full time technical personnel.To contact see details below.


snodgrass@web-net-solutions.com
http://www.web-net-solutions.com
Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация

Copyright © 2005-2006 Powered by Custom PHP Programming

 • Affiliate Marketing
 • Affiliate Marketing - Basics
 • Affiliate Marketing - Development
 • Affiliate Marketing - Setting Up
 • Archive catalogue
 • Autoresponders
 • Banner Advertising
 • Business Development
 • Checklists
 • Competitors
 • Copy Writing
 • Copy Writing - ad copy
 • Copy Writing - email copy
 • Copy Writing - sales copy
 • Customer Service
 • Database Marketing
 • Direct Mail
 • Domain Names
 • E-books
 • E-commerce
 • E-mail Marketing
 • E-zines
 • E-zines: Advertising
 • E-zines: Promotion
 • E-zines: Subscribers
 • E-zines: Writing
 • Entrepreneurship
 • Free Services
 • Home Based Business
 • Home Based Business - Finance
 • Home Based Business - Getting Started
 • Home Based Business - is it for YOU?
 • Home Based Business - Marketing
 • Internet Tips
 • Market Research
 • Marketing
 • Marketing Strategy
 • Net Business Start ups
 • Networking(MLM)
 • Newsletters/Newsgroups
 • Online Payments
 • Online Promotion
 • PC KNOW HOW
 • Personal Development For Marketeers
 • PR/Publicity and Media
 • Sales Tips
 • Search Engines
 • Search Engines - Keywords
 • Search engines - Optimisation
 • Selling Techniques
 • Surveys and Statistics
 • Telesales
 • Top 10 Tips
 • Traffic and Tracking
 • Viral Marketing
 • Website Design and Development
 • ZeLatest