Although CSS is by far the best option for creating web designs today, there are still many sites on the web that were created using tables to control layout. Old school sites like this one were created using the table tag in HTML.
Before I get into how tables work, I have to take a moment and explain something that is even more important to me, the instructions for The Chocolate Game. I have included this sample site because I believe that everyone should play the chocolate game at least once in life even if you don’t like chocolate. It is a relatively simple game especially compared to web design. The trick is to start with a flat box of chocolates. I find after 8 dinner mints are the perfect choice. The goal is to place a piece of chocolate on your forehead and then get it into your mouth without using your hands. If you get it close to your mouth, I find that using your tongue is the perfect trick to getting it to its ultimate destination. If you win the chocolate game, you get to eat the chocolate. If the chocolate falls on the floor, eating the chocolate is optional. I encourage you to practice the chocolate game on your own. But for now, we should probably get back to the lesson at hand, tables.
To help you understand how tables can be used for page layout, I created another version of the same page. In this version, you can see the border of the table and how it surrounds the elements in this page. In the old days, tables offered the only way to create a page design with any complexity at all. By merging and splitting cells, you could position text and images more or less the way you wanted them like here at the top where I have merged two cells to create a place for this banner and here where I have split the cells to create an extra cell for the caption and separate it from the image. By setting the borders to zero, you could hide the table so that it did not interfere with your design. This is the same page with the border set to zero. You will find many, many web pages on the internet still created using this technology. And in the lesson on tables, we will review how Dreamweaver’s table features work and I will even show you how to combine tables with CSS although my best recommendation is that you now design sites like this with CSS and D tags.
I do understand that many designers still find it easier to create layouts for tables and not everyone has time to redesign their sites right away. I have to admit, I have been guilty myself of leaving a site online designed with tables long after I have learned better and should have done it in CSS.
So in the tables lesson, we will explore how to use CSS to at least clean up your tables even if you don’t have time to redesign them. And, we will look at the best way to use tables for tabular data like the content that you would find in a spreadsheet or on this order page in Robin Eschner’s site. Although tables are no longer recommended for page layouts, they are still considered the best way to format data like this. In the tables lesson, we will create this page together and I will show you how to use the table header tag to help ensure that your tables are more accessible for everyone who might visit your site.
At the end of part one, we will also explore how to create websites like this that use frames. Don’t make a face. Frames have gotten a bad rep and there are some compelling reasons why frames are not used very much anymore, but they do still have their place on the web and I wanted to make sure you knew how to use Dreamweaver’s frames as part of this essential training. So in the frames lesson, you will learn how to create a design like this displaying multiple pages in one browser window and how to target links so that when you click on the thumbnails on the left, they open on the right.
As we explore more of Dreamweaver’s features in this series, I will also show you how to use dynamic web templates to automate the process of creating a series of pages like these painting pages that are linked from Robin’s card and print section. Any time you use the same elem
Transcription by:
Scribe4you Transcription Services