It is very difficult for people to read text that stretches from edge to edge of a monitor. Some studies suggest that the ideal width for a page is about nine words wide. Web designers need to break up their text into columns with white space. Aside from style sheets, which we will study in a few weeks, there are several ways to do this.x
Until
there were tables, some web designers would insert a transparent gif with dimensions
set to create the white space where needed. The gif would be tiny, only 1 x
1 pixel. The dimensions could be set larger, or the attributes for "vspace"
and "hspace" could be added to create the space. Imagine that the
blue gif used in this paragraph were transparent to see how it could be done.
|
However, tables are a better way to create your margins. This is unfortunately the case, even though the W3C guidelines urge designers not to use tables for layout. We are hostages of the browser wars, waiting for the browsers to fully implement the style sheets. When using tables to do layout, please heed the W3C plea not to use "structural" table tags to achieve layout goals. For example, do not use a <th> table header column just to achieve an effect. For a very simple set of margins create a table with two or three columns. You may only need the one row. The first cell serves as your left margin. Set its width for the margin you want, using pixels or percentage. Inside this first "margin" cell, type the special character for a blank space, as the text for that cell. (Nature abhors a vacuum and html tables abhor an empty cell. That is why you type the character for the blank space.) Once you close the first cell, you begin the second cell and type your text there. For the third cell you can again type to create the right margin. For example, these three paragraphs are given the wider margins with a code like this: <table
width="100%" border="0"> Be sure to note that you must include border="0" or you will end up with boxes around everything. When working, you may want to start out with border="1" so you can see clearly what you are doing and then make your border="0" at the end to take out the guidelines. If you define the width in a percentage be sure to use quotation marks around the number with the % as done in the example above. You can imagine how from here you can add more columns and rows, span columns and rows, and so on to do a fairly complex layout. Continue to "How wide is wide?" > > Other
comment notes for this unit: |
Copyright by dwang, 1999. All rights reserved.
