If you're used to writing in a word processor, HTML appears to be arbitrary with white space. You can't indent text with straight HTML and table cells won't stay open if there's nothing in them.
How HTML Interprets White Space
White space in HTML is handled differently than it's handled in word processors. Web browsers "condense" white space in HTML. This means that when a Web page interprets HTML it will display one space (" ") exactly the same as multiple spaces (" "). View the HTML source here, and you'll see that I put 6 spaces in between the second set of quotes, but your browser rendered it exactly the same as the first set of quotes with only one space.
And this doesn't apply just to spaces - Web browsers condense any white space characters, including spaces, tabs, and carriage returns (newlines).
So how do you get white space on your Web pages? There are several ways:
The Non-Breaking Space ( )
The non-breaking space is a character entity recognized by browsers as white space that you want to display on the page. It isn't much more space than would be taken up by a space between words, but often it is all you need.
Table cells can look pretty strange if you don't use the non-breaking space to hold them open.
Cells without the can disappear. If a table column has nothin in it or only white space characters in the cells, some browsers will collapse the column down to nothing (even if you set a width).
You can also use the non-breaking space to indent text and images a small amount. It's not a good idea to use a lot in a row, as older browsers don't support more than one at a time. For example:
However, if your audience doesn't use older browsers, you can use 4 or 5 in a row to get an indent for a new paragraph of text.
However, if your audience doesn't use older browsers, ...
These days, it's better to set margins on the first-line of your paragraphs using CSS rather than the non-breaking space.
The Single Pixel GIF Trick
First documented by David Siegel, this trick uses a transparent GIF image that is 1 pixel square. You take that image and stretch it out to force your HTML to lay the way you want it to.
You can use it for indenting text. Just set the space or the right and left margins to half of the space you want indented. Essentially, you get 1 + 2n pixels of white space (where n = space) without increasing either the download or the rendering time. You can do the same with space to create double spaced text and other effects. For example:
<img src="spacer.gif" alt=" " width="1" height="1" style="margin-right: 5px; margin-left: 5px;" />this paragraph is indented 11 pixels.
Did you find this article useful? For more useful tips & hints, Points to ponder and keep in mind, techniques & insights pertaining to Web Designing, Do please browse for more information at our website :-
http://www.thedesignbuild.com
http://www.webdesign.reprintarticlesite.comBack to articles