HTML TABLES!
| HTML TABLES! | |
 HOME RESOURCES LESSONS DIRECTORY ARTICLES FORUMS |
 Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | | LESSON 1-05-05: Creating Site Layout By Using Tables Web Design Lessons > Lesson 1-05-05: Creating Site Layout By Using Tables
In order to create a site layout by using html tables, we'll need a navigation menu, a place to put the actual content of your website, and a place to put some ads, graphics and a logo. There are a few ways we can arrange these items, and we're going to cover one of them in this lesson. Your First Website LayoutWe're going to build a website that has a navigation menu along the left hand side. In order to do that, we need a "main" table that has two columns - one reserved for the navigation menu and the other for the content. Note that we're going to add borders to our table to make it visible, but main tables generally do not have any borders. We're then going to define the width of our table as "100%" to ensure it fits the screen in all screen resolutions and browser windows. We're also going to define a width for our navigation menu - it can be both fixed or a percentage depending on your personal taste. We'll set it to a fixed value of 120 pixels for this particular example. Let's write down the HTML code for our "main" table:
The above HTML code will generate the below output:
Now, we can add an additional table to the left column to form a navigation menu. We'll also set the "border" attribute of the "main" table to "0" (zero) in order to make our site look nicer :) Sidenote: Putting a table inside another table is called "nesting tables". Nested tables are used heavily to create neatly designed websites. Copy and paste the below HTML code into your notepad to form a simple website with a navigation menu on the left:
The above HTML code will create a navigation menu:
We can add a logo and some graphics or ads to the top part of our page. To do that we are going to add another row to the top part of our main table:
The above HTML code will produce a simple but complete website layout:
Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) Yup, we're done! Next lesson of your free online web design course will show you how to change background colors, how to add background images and how to avoid background & foreground color conflicts when designing your websites. Let's go!
Nearby Lessons: • Lesson 1-03 Basic Text Formatting• Lesson 1-04 Web Colors Unleashed • Lesson 1-05 HTML Tables  • Lesson 1-05-01 Building simple tables• Lesson 1-05-02 Cellpadding & cellspacing• Lesson 1-05-03 Defining table width & height• Lesson 1-05-04 Merging table cells• Lesson 1-05-05 Creating site layout by using tables• Lesson 1-06 Background Alteration • Lesson 1-07 Images Back To Top  Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | | Partner Links |