HTML Tables Tutorial (Lesson) on How to Make or Build Complex yet Easy Tables
PICTURE YOUR WEB SITE IN TABLES!
Click the below logo to search for your favorite car or truck f 
 COMPLEX, YET VERY SIMPLE TABLES ARRANGEMENTS Unlike Image, Flash, and Java Files, html tables (multiple or otherwise) usually take only seconds to download into a Web site visitor's browser.
To Download a Copy of This 4-page Tutorial, 27 kb's, Before I continue, however, allow me to first make mention that the reason for the large text is explained near the middle of this page. Return to Search WindowRight-click a blank area in this lesson page, and then click View Source to view the source code, and copy it for further offline studying if you wish. Return to Search WindowYou'll notice in the "BODY" tag, that I inserted all four margin tags, and for Netscape browsres: marginwidth="0" marginheight="10". I included them because many Web page designers are unaware of the added flexibility allowed for adjusting margins in pages incorporating html tables. Return to Search Window Return to Search Window Now, if you right-click the image of the phone and then click "Properties," you'll notice that the entire image size is only a bit more than one and a half kilobytes. This is because I optimized the image (for the convenience of those who are browsing this page) for faster loading in the page. The original size of the image was more than 5 kilobytes and would have required nearly three and a half times more time to download. Return to Search WindowI suggest, though, that you only optimize images to a reasonable degree, as over-optimized images sometimes tend to not load (but only in weaker systems), and the "Refresh" button must then be employed (if the viewer is aware of this aspect) to reload those overly-shrunk images. Return to Search WindowThere are many wonderful image optimizers available on the Web. Several of them mentioned in this tutorial are freeware (no charge whatsoever), and a number of them (also operable in Real-Time) cost several dollars but first encourage you to download a 15- or 30-day trial version with which to make your final decision. Return to Search WindowI'll list a few of these sites (hyperlinked for your convenience) that offer in their programs gif and/or jpeg image optimization, that you can download from the Web as freeware or demos: Return to Search Window
jansfreeware.comxat.com GifClean Ulead
Movies 11
Microsoft "Photo Editor" (for those of you who have "Photo Editor" a powerful image editor as well) and many other image and graphics editors also allow you to optimize your JPEG, GIF, PNG and other images (height and width) for faster downloading, but not always in Real-Time. Return to Search WindowI'd also like to give special credit in this lesson to the designers and producers of the Cool Page and Cute Page Web page and HTML editors I used (but mostly my own editing) to construct this page. Both of these programs are awesome and very easy-to-use Web page editing tools and will add to the user of these programs a significant amount of "tables" knowledge. And, Netscape (if you click FILE, NEW, Blank Page) will allow you easy construction of very complex html tables, though basic skeletons in which you fill in the tags. Return to Search WindowI may add more Web page- and Web site enhancing links to this tutorial in the future, or may upload and add links to some of my newest super-fast-opening special-effects test pages, one containing a 27-frame animated gif image (not java or Flash related, but a perfect and total illusion) that opens completely and begins its animation, nearly flodding the enitre sreen the moment the viewer opens the Web page, even if the viewer is using a 28k modem. Click to see a complex, yet very simple tables arrangement Return to Search WindowIn addition, bear in mind that animation and special effects is state-of-the-art (the highest level of development) in Web site design today. Return to Search WindowAsk yourself: Does my Web site visitor remember anything distinct about my product or design after leaving my site? Would that visitor have any desire to revisit my site, even if it's just to watch the special effects? A little food for thought. Return to Search WindowEnough visits, and, sooner or later, that returning visitor will be talking to you about your product. Return to Search WindowOne of the greatest advantages of layering html tables (at least in theory) is that regardless of what browser is being used to view your site, the size of your text never changes, in spite of the font-size configuration in the viewer's browser. Return to Search WindowIn the source code of this lesson, see: font style= "font-size:20pt" size=4. Double insurance. Return to Search WindowEven if you don't use html tables or layered tables, when employing the (font style= "font-size:20pt" size=4) tag for your font-size orientation, the size of the font will always remain the same, in Internet Explorer but not Netscape. Return to Search WindowWhere you see the number "20" and the number "4" in the above font style tag, experiment with them to adjust your desired font size. Internet Explorer recognizes (font style="font size:?pt") tags, but you must use the standard HTML (font size="?") for the benefit of older Netscape Communicator browsers. Return to Search WindowAdding the (font style= "font-size: 20pt") or whatever sized pt, locks the font size in Internet Explorer (but not in older Netscape browsers) and can be set at virtually any size, including 8000 pt font-size and above, believe it or not. Return to Search WindowYou'll notice (if you're viewing this site in Internet Explorer) that in this Web page, the font size doesn't (at least shouldn't) change, even if you reset your browser's font-viewing size (Internet Explorer: Click "View," click "Fonts"; make selection). Return to Search WindowSo you could see the lack of font resizing is why I decided to employ large text in this tutorial. Return to Search WindowThe greatest advantage of using layered tables (at least in theory) is that all browsers will view your Web page or Web site identically: no images or blocks of text staggered all over the viewer's monitor. Return to Search WindowYou can further prevent an html table column from collapsing by making and employing a 1x1-pixel transparent gif. Return to Search WindowThe coherent effect is even more established through the use of the transparent "spacer gif." If you check the source code in this lesson, you'll notice that I made a homemade spacer gif and, for fast identification, named it "myhomemadespacer.gif." Return to Search WindowSpacer gif images are used to nudge graphics or text (short or long distances in width and/or height) one pixel or many at a time, as you'll see in the following tags. The tags are set at ? pixel(s) wide by ? pixel(s) high: < IMG SRC = "myhomemadespacer.gif" alt="spacer" width=50 height=1 > Return to Search WindowThe "Cool Page" Web Page Editor (which allows you to type text or drag anything into its spacious working area, and then as you work view your ongoing additions on your browser) that I mentioned above builds and inserts spacer gifs (called t.gifs) automatically each and every time you "Save" your Web page. Return to Search WindowNote: The very top TD (table data) > "Layered Tables, Image Optimizers, Spacer Gifs, and Special Effects for Beginners and Professionals, Tutorial" is nested alone and is only a single insert of the main table, as is the TD (table data) tag containing this body text. TR (html table row). Return to Search WindowBe reminded, nonetheless, that smaller monitors and some out-dated monitor color settings might cause the viewer to have to scroll back and forth to view the entire page width. However, I haven't heard a complaint yet. Return to Search WindowINTO YOUR SOURCE CODE I hope you've enjoyed your visit to this page. The Yahoo! and Webcrawler search-engine icons located inside the top layered tables are (for your convenience) actual links to those search engines and can be used as such. Return to Search WindowIf you're new at designing Web sites or Web pages and are not already familiar with Internet hyperlinks and how they are written into source code, take a quick glance at the html source code of this page to view the easiness of including links to other Web sites or pages. Search and find the A HREF=" tags. Return to Search WindowAnd by the way, always remember the spacer.gif images for balanced distribution of your entire site. Experiment "Redo," "Undo" with the "myhomemadespacer.gifs." They're easy to understand and very handy when it comes to adding margins or various line breaks, anywhere in any table. Return to Search WindowYou may make a copy of the following spacer gif to experiment with it. I named this the "bluespacer.gif" and gave it some color. I then expanded the size of this spacer gif to 100 by 100 pixels, or you would not be able to see it. The original "myhomemadespacer.gif" is transparent. Your best appplication, of course, is to make a transparent spacer. Return to Search Window When you open this spacer gif in a graphics program or graphics editor, you will not be able to see it until you expand it, because, in its reality, it is only one-pixel square in size. Return to Search WindowIf you wrote 100 bluespacer.gif image tags in a row between two characters or even two images, the characters or images would appear 100 pixels apart from each other. Return to Search WindowStudying the various html tags in this - how to make or build - lesson may seem a wee tedious at first; but, in no time, CELLSPACING, CELLPADDING, BORDERS, COLS, ROWS, etc., will come to you naturally. Return to Search WindowApx. size of source code in this Web page: 28 kilobytes 
The bottom "immovable" margin is controlled by the BOTTOMMARGIN=48 in the BODY tag. I.E. only. |
